2a5bac2bb3
* major JSDoc write up * removed ESLint `no-bitwise` exception, it only applies to specific functions and not the entire code * the `SVGCubicMorph` component will remove un-necessary `Z` path commands when is the case for better out of the box animation * fixed a minor disambiguation with `filterEffects` and `drop-shadow` property and its `dropshadow` interpolation function * TypeScript strong: all files are modules, easy to implement in any third party app * updated `CubicBezier` and SVGPathCommander * code cleanup
35 lines
900 B
JavaScript
35 lines
900 B
JavaScript
import KEC from '../objects/kute';
|
|
import coords from '../interpolation/coords';
|
|
|
|
/* SVGMorph = {
|
|
property: 'path',
|
|
defaultValue: [],
|
|
interpolators: {numbers,coords} },
|
|
functions = { prepareStart, prepareProperty, onStart, crossCheck }
|
|
} */
|
|
|
|
// Component functions
|
|
/**
|
|
* Sets the property update function.
|
|
* @param {string} tweenProp the property name
|
|
*/
|
|
export function onStartSVGMorph(tweenProp) {
|
|
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
|
|
KEC[tweenProp] = (elem, a, b, v) => {
|
|
const path1 = a.polygon; const path2 = b.polygon;
|
|
const len = path2.length;
|
|
elem.setAttribute('d', (v === 1 ? b.original : `M${coords(path1, path2, len, v).join('L')}Z`));
|
|
};
|
|
}
|
|
}
|
|
|
|
// Component Base
|
|
const SVGMorphBase = {
|
|
component: 'baseSVGMorph',
|
|
property: 'path',
|
|
Interpolate: coords,
|
|
functions: { onStart: onStartSVGMorph },
|
|
};
|
|
|
|
export default SVGMorphBase;
|