933d61de19
* added ESLint and updated all code base * updated SVGPathCommander, CubicBezier, shorter-js, minifill * updated polyfills * minor CSS fixes
82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
import KUTE from '../objects/kute.js';
|
|
import numbers from '../interpolation/numbers.js';
|
|
import arrays from '../interpolation/arrays.js';
|
|
|
|
/* transformMatrix = {
|
|
property : 'transform',
|
|
defaultValue: {},
|
|
interpolators: {},
|
|
functions = { prepareStart, prepareProperty, onStart, crossCheck }
|
|
} */
|
|
|
|
// Component name
|
|
const matrixComponent = 'transformMatrixBase';
|
|
|
|
// Component special
|
|
// this component is restricted to modern browsers only
|
|
const CSS3Matrix = typeof (DOMMatrix) !== 'undefined' ? DOMMatrix : null;
|
|
|
|
// Component Functions
|
|
export const onStartTransform = {
|
|
transform(tweenProp) {
|
|
if (CSS3Matrix && this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
|
|
KUTE[tweenProp] = (elem, a, b, v) => {
|
|
let matrix = new CSS3Matrix();
|
|
const tObject = {};
|
|
|
|
Object.keys(b).forEach((p) => {
|
|
tObject[p] = p === 'perspective' ? numbers(a[p], b[p], v) : arrays(a[p], b[p], v);
|
|
});
|
|
|
|
// set perspective
|
|
if (tObject.perspective) matrix.m34 = -1 / tObject.perspective;
|
|
|
|
// set translate
|
|
matrix = tObject.translate3d
|
|
? matrix.translate(tObject.translate3d[0], tObject.translate3d[1], tObject.translate3d[2])
|
|
: matrix;
|
|
|
|
// set rotation
|
|
matrix = tObject.rotate3d
|
|
? matrix.rotate(tObject.rotate3d[0], tObject.rotate3d[1], tObject.rotate3d[2])
|
|
: matrix;
|
|
|
|
// set skew
|
|
if (tObject.skew) {
|
|
matrix = tObject.skew[0] ? matrix.skewX(tObject.skew[0]) : matrix;
|
|
matrix = tObject.skew[1] ? matrix.skewY(tObject.skew[1]) : matrix;
|
|
}
|
|
|
|
// set scale
|
|
matrix = tObject.scale3d
|
|
? matrix.scale(tObject.scale3d[0], tObject.scale3d[1], tObject.scale3d[2])
|
|
: matrix;
|
|
|
|
// set element style
|
|
elem.style[tweenProp] = matrix.toString();
|
|
};
|
|
}
|
|
},
|
|
CSS3Matrix(prop) {
|
|
if (CSS3Matrix && this.valuesEnd.transform) {
|
|
if (!KUTE[prop]) KUTE[prop] = CSS3Matrix;
|
|
}
|
|
},
|
|
};
|
|
|
|
// Component Base Object
|
|
export const baseMatrixTransform = {
|
|
component: matrixComponent,
|
|
property: 'transform',
|
|
functions: { onStart: onStartTransform },
|
|
Interpolate: {
|
|
perspective: numbers,
|
|
translate3d: arrays,
|
|
rotate3d: arrays,
|
|
skew: arrays,
|
|
scale3d: arrays,
|
|
},
|
|
};
|
|
|
|
export default baseMatrixTransform;
|