933d61de19
* added ESLint and updated all code base * updated SVGPathCommander, CubicBezier, shorter-js, minifill * updated polyfills * minor CSS fixes
67 lines
2.8 KiB
JavaScript
67 lines
2.8 KiB
JavaScript
import KUTE from '../objects/kute.js';
|
|
import numbers from '../interpolation/numbers.js';
|
|
|
|
/* svgTransform = {
|
|
property: 'svgTransform',
|
|
subProperties,
|
|
defaultValue,
|
|
Interpolate: {numbers},
|
|
functions
|
|
} */
|
|
|
|
// Component Functions
|
|
export function svgTransformOnStart(tweenProp) {
|
|
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
|
KUTE[tweenProp] = (l, a, b, v) => {
|
|
let x = 0;
|
|
let y = 0;
|
|
const deg = Math.PI / 180;
|
|
const scale = 'scale' in b ? numbers(a.scale, b.scale, v) : 1;
|
|
const rotate = 'rotate' in b ? numbers(a.rotate, b.rotate, v) : 0;
|
|
const sin = Math.sin(rotate * deg);
|
|
const cos = Math.cos(rotate * deg);
|
|
const skewX = 'skewX' in b ? numbers(a.skewX, b.skewX, v) : 0;
|
|
const skewY = 'skewY' in b ? numbers(a.skewY, b.skewY, v) : 0;
|
|
const complex = rotate || skewX || skewY || scale !== 1 || 0;
|
|
|
|
// start normalizing the translation, we start from last to first
|
|
// (from last chained translation)
|
|
// the normalized translation will handle the transformOrigin tween option
|
|
// and makes sure to have a consistent transformation
|
|
|
|
// we start with removing transformOrigin from translation
|
|
x -= complex ? b.origin[0] : 0; y -= complex ? b.origin[1] : 0;
|
|
x *= scale; y *= scale; // we now apply the scale
|
|
// now we apply skews
|
|
y += skewY ? x * Math.tan(skewY * deg) : 0; x += skewX ? y * Math.tan(skewX * deg) : 0;
|
|
const cxsy = cos * x - sin * y; // apply rotation as well
|
|
y = rotate ? sin * x + cos * y : y; x = rotate ? cxsy : x;
|
|
// now we apply the actual translation
|
|
x += 'translate' in b ? numbers(a.translate[0], b.translate[0], v) : 0;
|
|
y += 'translate' in b ? numbers(a.translate[1], b.translate[1], v) : 0;
|
|
// normalizing ends with the addition of the transformOrigin to the translation
|
|
x += complex ? b.origin[0] : 0; y += complex ? b.origin[1] : 0;
|
|
|
|
// finally we apply the transform attribute value
|
|
l.setAttribute('transform', (x || y ? (`translate(${(x * 1000 >> 0) / 1000}${y ? (`,${(y * 1000 >> 0) / 1000}`) : ''})`) : '')
|
|
+ (rotate ? `rotate(${(rotate * 1000 >> 0) / 1000})` : '')
|
|
+ (skewX ? `skewX(${(skewX * 1000 >> 0) / 1000})` : '')
|
|
+ (skewY ? `skewY(${(skewY * 1000 >> 0) / 1000})` : '')
|
|
+ (scale !== 1 ? `scale(${(scale * 1000 >> 0) / 1000})` : ''));
|
|
};
|
|
}
|
|
}
|
|
|
|
// Component Base
|
|
const baseSVGTransform = {
|
|
component: 'baseSVGTransform',
|
|
property: 'svgTransform',
|
|
// subProperties: ['translate','rotate','skewX','skewY','scale'],
|
|
// defaultValue: {translate:0, rotate:0, skewX:0, skewY:0, scale:1},
|
|
defaultOptions: { transformOrigin: '50% 50%' },
|
|
Interpolate: { numbers },
|
|
functions: { onStart: svgTransformOnStart },
|
|
};
|
|
|
|
export default baseSVGTransform;
|