deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Changes V2.2.0:

Browse source 
* 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
This commit is contained in:
thednp 2021-12-08 23:43:31 +02:00
parent e5456b86e9
commit 2a5bac2bb3
396 changed files with 11485 additions and 7075 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
.eslintrc
View file

@ -23,18 +23,19 @@
// Disable no-restricted-globals for global objects
"no-restricted-globals": 0,
// Disable no-params-reassign for properties
"no-param-reassign": ["error", { "props": false }],
// "no-param-reassign": ["error", { "props": false }],
// Allow strict mode (we are not dealing with modules)
"strict": [0],
// Disable bitwise
"no-bitwise": 0,
// Allow use of "private methods"
"no-underscore-dangle": 0,
// "strict": [0],
// Allow use of "private methods" - impossible to satisfy
"no-underscore-dangle": 0
// Disable alert rule till we have a CE in place
"no-alert": 0,
// "no-alert": 0
// Allow extensions on imports
"import/extensions": 0,
// "import/extensions": 0,
// Allow exporting mutable 'let' binding
"import/no-mutable-exports": 0
// "import/no-mutable-exports": 0,
// Allow no named as default / member
// "import/no-named-as-default": 0,
// "import/no-named-as-default-member": 0
}
}

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
node_modules/
experiments/
.npmignore
package-lock.json

1
.npmignore
View file

@ -1,4 +1,5 @@
node_modules/
demo/
experiments/
package-lock.json
.gitignore

18
README.md
View file

@ -1,6 +1,6 @@
# KUTE.js
A modern JavaScript animation engine built on ES6+ standards with most essential features for the web, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size.
A modern JavaScript animation engine built on ES6+ standards with strong TypeScript definitions and most essential features for the web with easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size.
[![NPM Version](https://img.shields.io/npm/v/kute.js.svg?style=flat-square)](https://www.npmjs.com/package/kute.js)
[![NPM Downloads](https://img.shields.io/npm/dm/kute.js.svg?style=flat-square)](http://npm-stat.com/charts.html?package=kute.js)
@ -42,22 +42,10 @@ All above mentioned components have a BASE version which doesn't include value p
For a complete developer guide, usage and stuff like npm, visit [the wiki](https://github.com/thednp/kute.js/wiki).
# ESLint
If you include KUTE.js in your project, we recommend using the following ESLint rule:
```js
rules: {
// Disable bitwise for isArcCommand & isPathCommand from SVGPathCommander
// as well as the KUTE.js interpolation functions
"no-bitwise": 0,
}
```
Some **SVGPathCommander** as well as **KUTE.js** interpolation functions make use of `|` (OR) and `>>` operators for fastest number operations.
# Browser Support
KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy browsers might some help, so give them a small polyfill set with most essential features required by KUTE.js to work, powered by [minifill](https://github.com/thednp/minifill), try it. For broader projects you might want to consider <a href="https://cdn.polyfill.io/v2/docs/">polyfills</a>.
# Special Thanks
* [Mike Bostock](https://bost.ocks.org/mike/) for his awesome [D3.js](https://github.com/d3/d3), one of the sources for our reworked [SVGMorph](http://thednp.github.io/kute.js/svgMorph.html) component.
* [Noah Veltman](https://github.com/veltman) for his awesome [flubber](https://github.com/veltman/flubber), another one of the sources for the SVGMorph component.
@ -65,8 +53,10 @@ KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy b
* [Dmitry Baranovskiy](https://dmitry.baranovskiy.com/) for his awesome [Raphael.js](https://dmitrybaranovskiy.github.io/raphael/), another source for our SVGCubicMorph component.
* [@dalisoft](https://github.com/dalisoft) contributed a great deal to the performance and functionality of previous versions of KUTE.js.
# Contributions
* [Contributors &amp; Collaborators](https://github.com/thednp/kute.js/graphs/contributors)
# License
[MIT License](https://github.com/thednp/kute.js/blob/master/LICENSE)

22
demo/assets/js/perf-matrix.js
View file

@ -78,18 +78,18 @@ function complete(){
container.style.display = 'none';
}
var engine = document.getElementById('kute'),
fromCSS = { rotate3d: [ 0, 0,0 ], perspective:600 },
fromMX = { transform: { rotate3d: [ 0, 0,0 ], perspective:600 }},
toCSS = { rotate3d: [ 360,0,0 ], perspective:600 },
toMX = { transform: { rotate3d: [ 0,360,0 ], perspective:600 }},
ops = { duration: 2000, repeat: 5 }
var engine = document.getElementById('kute'),
fromCSS = { rotate3d: [ 0, 0,0 ], perspective:600 },
fromMX = { transform: { rotate3d: [ 0, 0,0 ], perspective:600 }},
toCSS = { rotate3d: [ 360,0,0 ], perspective:600 },
toMX = { transform: { rotate3d: [ 0,360,0 ], perspective:600 }},
ops = { duration: 2000, repeat: 5 }
// since our engines don't do sync, we make it our own here
if (engine.src.indexOf('kute.min.js')>-1) {
if (!engine.src.includes('extra')) {
[].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromCSS,toCSS,ops) ) })
}
if (engine.src.indexOf('kute-extra.min.js')>-1) {
if (engine.src.includes('extra')) {
[].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromMX,toMX,ops) ) })
}
@ -98,15 +98,13 @@ function startTest(){
infoContainer.style.display = 'none';
container.style.display = 'block'
!tws[0].playing && startKUTE();
tws.length && !tws[0].playing && startKUTE();
}
function startKUTE() {
var now = window.performance.now(), count = tws.length;
for (var t=0; t<count; t++){
tws[t].start(now)
}
tws.forEach((t) => t.start(now));
}
// the start button handle

21
demo/assets/js/svgCubicMorph.js
View file

@ -5,28 +5,22 @@ var morphOps = {
// basic morph
var morphTween = KUTE.to('#rectangle', { path: '#star' }, morphOps);
var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, morphOps);
var morphTween2 = KUTE.to('#rectangle2', { path: '#star2' }, morphOps);
var morphBtn = document.getElementById('morphBtn');
morphBtn.addEventListener('click', function(){
!morphTween.playing && morphTween.start();
!morphTween1.playing && morphTween1.start();
!morphTween2.playing && morphTween2.start();
}, false);
// line to circle
var lineMorph = KUTE.to('#line' ,{path:'#circle' }, morphOps);
var lineMorph1 = KUTE.to('#line1',{path:'#circle1'}, morphOps);
var lineMorph2 = KUTE.to('#line2',{path:'#circle2'}, morphOps);
var lineMorph3 = KUTE.to('#line3',{path:'#circle3'}, morphOps);
var morphBtnClosed = document.getElementById('morphBtnClosed')
var morphBtnClosed = document.getElementById('morphBtnClosed')
morphBtnClosed.addEventListener('click', function(){
!lineMorph.playing && lineMorph.start();
!lineMorph1.playing && lineMorph1.start();
!lineMorph2.playing && lineMorph2.start();
!lineMorph3.playing && lineMorph3.start();
}, false);
var morphOps1 = {
@ -63,19 +57,14 @@ var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'}, { path:
var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'}, { path: '#mouth' }, morphOps1);
var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'}, { path: '#eye-right' }, morphOps1);
var compliMorph11 = KUTE.fromTo('#rectangle-container1', {path: '#rectangle-container1', attr:{ fill: "#9C27B0"} }, { path: '#circle-container1', attr:{ fill: "#FF5722"} }, morphOps1);
var compliMorph21 = KUTE.fromTo('#symbol-left1', {path: '#symbol-left1'}, { path: '#eye-left1' }, morphOps1);
var compliMorph31 = KUTE.fromTo('#symbol-left-clone1', {path: '#symbol-left-clone1'}, { path: '#mouth1' }, morphOps1);
var compliMorph41 = KUTE.fromTo('#symbol-right1', {path: '#symbol-right1'}, { path: '#eye-right1' }, morphOps1);
var compliMorph12 = KUTE.fromTo('#rectangle-container2', {path: '#rectangle-container2', attr:{ fill: "#e91b1f"} }, { path: '#circle-container2', attr:{ fill: "#FF5722"} }, morphOps1);
var compliMorph22 = KUTE.fromTo('#symbol-left2', {path: '#symbol-left2'}, { path: '#eye-left2' }, morphOps1);
var compliMorph32 = KUTE.fromTo('#sample-shape2', {path: '#sample-shape2'}, { path: '#mouth2' }, morphOps1);
var compliMorph42 = KUTE.fromTo('#symbol-right2', {path: '#symbol-right2'}, { path: '#eye-right2' }, morphOps1);
compliMorphBtn.addEventListener('click', function(){
!compliMorph1.playing && compliMorph1.start() && compliMorph11.start() && compliMorph12.start();
!compliMorph2.playing && compliMorph2.start() && compliMorph21.start() && compliMorph22.start();
!compliMorph3.playing && compliMorph3.start() && compliMorph31.start() && compliMorph32.start();
!compliMorph4.playing && compliMorph4.start() && compliMorph41.start() && compliMorph42.start();
!compliMorph1.playing && compliMorph1.start() && compliMorph12.start();
!compliMorph2.playing && compliMorph2.start() && compliMorph22.start();
!compliMorph3.playing && compliMorph3.start() && compliMorph32.start();
!compliMorph4.playing && compliMorph4.start() && compliMorph42.start();
}, false);

2
demo/performance-matrix.html
View file

@ -203,7 +203,9 @@
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<!-- <script src="../experiments/CSSMatrix.js"></script> -->
<script id="kute" src="./src/kute-extra.min.js"></script>
<!-- <script id="kute" src="./src/kute-extra.js"></script> -->
<script src="./assets/js/perf-matrix.js"></script>
</body>

391
demo/src/kute-base.js
View file

@ -1,5 +1,5 @@
/*!
* KUTE.js Base v2.1.3 (http://thednp.github.io/kute.js)
* KUTE.js Base v2.2.0alpha2 (http://thednp.github.io/kute.js)
* Copyright 2015-2021 © thednp
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
*/
@ -9,21 +9,24 @@
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.KUTE = factory());
})(this, (function () { 'use strict';
var KUTE = {};
/**
* The KUTE.js Execution Context
*/
var KEC = {};
var Tweens = [];
var globalObject;
var gl0bal;
if (typeof global !== 'undefined') { globalObject = global; }
else if (typeof window !== 'undefined') { globalObject = window.self; }
else { globalObject = {}; }
if (typeof global !== 'undefined') { gl0bal = global; }
else if (typeof window !== 'undefined') { gl0bal = window.self; }
else { gl0bal = {}; }
var globalObject$1 = globalObject;
var globalObject = gl0bal;
// KUTE.js INTERPOLATE FUNCTIONS
// =============================
var Interpolate = {};
var interpolate = {};
// schedule property specific function on animation start
// link property update function to KUTE.js execution context
@ -31,13 +34,13 @@
// Include a performance.now polyfill.
// source https://github.com/tweenjs/tween.js/blob/master/src/Now.ts
var now;
var performanceNow;
// In node.js, use process.hrtime.
// eslint-disable-next-line
// @ts-ignore
if (typeof self === 'undefined' && typeof process !== 'undefined' && process.hrtime) {
now = function () {
performanceNow = function () {
// eslint-disable-next-line
// @ts-ignore
var time = process.hrtime();
@ -49,24 +52,27 @@
// In a browser, use self.performance.now if it is available.
// This must be bound, because directly assigning this function
// leads to an invocation exception in Chrome.
now = self.performance.now.bind(self.performance);
performanceNow = self.performance.now.bind(self.performance);
} else if (typeof Date !== 'undefined' && Date.now) {
// Use Date.now if it is available.
now = Date.now;
performanceNow = Date.now;
} else {
// Otherwise, use 'new Date().getTime()'.
now = function () { return new Date().getTime(); };
performanceNow = function () { return new Date().getTime(); };
}
var now$1 = now;
var now = performanceNow;
var Time = {};
Time.now = now$1;
// const that = window.self || window || {};
// Time.now = that.performance.now.bind(that.performance);
Time.now = now;
// eslint-disable-next-line import/no-mutable-exports -- impossible to satisfy
var Tick = 0;
/**
*
* @param {number | Date} time
*/
var Ticker = function (time) {
var i = 0;
while (i < Tweens.length) {
@ -87,38 +93,43 @@
Tick = null;
Object.keys(onStart).forEach(function (obj) {
if (typeof (onStart[obj]) === 'function') {
if (KUTE[obj]) { delete KUTE[obj]; }
if (KEC[obj]) { delete KEC[obj]; }
} else {
Object.keys(onStart[obj]).forEach(function (prop) {
if (KUTE[prop]) { delete KUTE[prop]; }
if (KEC[prop]) { delete KEC[prop]; }
});
}
});
Object.keys(Interpolate).forEach(function (i) {
if (KUTE[i]) { delete KUTE[i]; }
Object.keys(interpolate).forEach(function (i) {
if (KEC[i]) { delete KEC[i]; }
});
}
}, 64);
}
// KUTE.js render update functions
// ===============================
// render update functions
// =======================
var Render = {
Tick: Tick, Ticker: Ticker, Tweens: Tweens, Time: Time,
};
Object.keys(Render).forEach(function (blob) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
if (!KEC[blob]) {
KEC[blob] = blob === 'Time' ? Time.now : Render[blob];
}
});
globalObject$1._KUTE = KUTE;
globalObject._KUTE = KEC;
var defaultOptions = {
duration: 700,
delay: 0,
easing: 'linear',
repeat: 0,
repeatDelay: 0,
yoyo: false,
resetStart: false,
offset: 0,
};
// link properties to interpolate functions
@ -138,30 +149,46 @@
var Util = {};
var connect = {};
/** @type {KUTE.TweenBase | KUTE.Tween | KUTE.TweenExtra} */
connect.tween = null;
connect.processEasing = null;
// Select Robert Penner's Easing Functions
// updated for ESLint
var Easing = {
/** @type {KUTE.easingFunction} */
linear: function (t) { return t; },
/** @type {KUTE.easingFunction} */
easingQuadraticIn: function (t) { return t * t; },
/** @type {KUTE.easingFunction} */
easingQuadraticOut: function (t) { return t * (2 - t); },
/** @type {KUTE.easingFunction} */
easingQuadraticInOut: function (t) { return (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t); },
/** @type {KUTE.easingFunction} */
easingCubicIn: function (t) { return t * t * t; },
/** @type {KUTE.easingFunction} */
easingCubicOut: function (t0) { var t = t0 - 1; return t * t * t + 1; },
/** @type {KUTE.easingFunction} */
easingCubicInOut: function (t) { return (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1); },
/** @type {KUTE.easingFunction} */
easingCircularIn: function (t) { return -(Math.sqrt(1 - (t * t)) - 1); },
/** @type {KUTE.easingFunction} */
easingCircularOut: function (t0) { var t = t0 - 1; return Math.sqrt(1 - t * t); },
/** @type {KUTE.easingFunction} */
easingCircularInOut: function (t0) {
var t = t0 * 2;
if (t < 1) { return -0.5 * (Math.sqrt(1 - t * t) - 1); }
t -= 2; return 0.5 * (Math.sqrt(1 - t * t) + 1);
},
/** @type {KUTE.easingFunction} */
easingBackIn: function (t) { var s = 1.70158; return t * t * ((s + 1) * t - s); },
/** @type {KUTE.easingFunction} */
easingBackOut: function (t0) {
var s = 1.70158;
var t = t0 - 1;
return t * t * ((s + 1) * t + s) + 1;
},
/** @type {KUTE.easingFunction} */
easingBackInOut: function (t0) {
var s = 1.70158 * 1.525;
var t = t0 * 2;
@ -170,6 +197,12 @@
},
};
/**
* Returns a valid `easingFunction`.
*
* @param {KUTE.easingFunction | string} fn function name or constructor name
* @returns {KUTE.easingFunction} a valid easing function
*/
function processEasing(fn) {
if (typeof fn === 'function') {
return fn;
@ -181,19 +214,42 @@
connect.processEasing = processEasing;
function add (tw) { return Tweens.push(tw); }
/**
* KUTE.add(Tween)
*
* @param {KUTE.Tween} tw a new tween to add
*/
var add = function (tw) { return Tweens.push(tw); };
function remove (tw) {
/**
* KUTE.remove(Tween)
*
* @param {KUTE.Tween} tw a new tween to add
*/
var remove = function (tw) {
var i = Tweens.indexOf(tw);
if (i !== -1) { Tweens.splice(i, 1); }
}
};
function getAll () { return Tweens; }
/**
* KUTE.add(Tween)
*
* @return {KUTE.Tween[]} tw a new tween to add
*/
var getAll = function () { return Tweens; };
function removeAll () { Tweens.length = 0; }
/**
* KUTE.removeAll()
*/
var removeAll = function () { Tweens.length = 0; };
// all supported properties
var supportedProperties = {};
/**
* linkInterpolation
* @this {KUTE.Tween}
*/
function linkInterpolation() {
var this$1$1 = this;
// DON'T change
@ -205,18 +261,18 @@
if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius
&& Object.keys(this$1$1.valuesEnd).some(function (i) { return (componentProps && componentProps.includes(i))
|| (i === 'attr' && Object.keys(this$1$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); })); })) {
if (!KUTE[fnObj]) { KUTE[fnObj] = componentLink[fnObj]; }
if (!KEC[fnObj]) { KEC[fnObj] = componentLink[fnObj]; }
} else {
Object.keys(this$1$1.valuesEnd).forEach(function (prop) {
var propObject = this$1$1.valuesEnd[prop];
if (propObject instanceof Object) {
Object.keys(propObject).forEach(function (i) {
if (typeof (componentLink[i]) === 'function') { // transformCSS3
if (!KUTE[i]) { KUTE[i] = componentLink[i]; }
if (!KEC[i]) { KEC[i] = componentLink[i]; }
} else {
Object.keys(componentLink[fnObj]).forEach(function (j) {
if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix
if (!KUTE[j]) { KUTE[j] = componentLink[i][j]; }
if (!KEC[j]) { KEC[j] = componentLink[i][j]; }
}
});
}
@ -228,7 +284,7 @@
});
}
var Internals = {
var internals = {
add: add,
remove: remove,
getAll: getAll,
@ -237,7 +293,15 @@
linkInterpolation: linkInterpolation,
};
// a public selector utility
/**
* selector
*
* A selector utility for KUTE.js.
*
* @param {KUTE.selectorType} el target(s) or string selector
* @param {boolean | number} multi when true returns an array/collection of elements
* @returns {Element | Element[] | null}
*/
function selector(el, multi) {
try {
var requestedElem;
@ -256,12 +320,17 @@
}
}
// Animation class
/**
* Animation Base Class
*
* Registers components by populating KUTE.js objects and makes sure
* no duplicate component / property is allowed.
*
* This class only registers the minimal amount of component information
* required to enable components animation, which means value processing
* as well as `to()` and `allTo()` methods are not supported.
*/
var AnimationBase = function AnimationBase(Component) {
return this.setComponent(Component);
};
AnimationBase.prototype.setComponent = function setComponent (Component) {
var ComponentName = Component.component;
// const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty }
var Functions = { onStart: onStart, onComplete: onComplete };
@ -276,9 +345,10 @@
// set additional options
if (Component.defaultOptions) {
Object.keys(Component.defaultOptions).forEach(function (op) {
defaultOptions[op] = Component.defaultOptions[op];
});
// Object.keys(Component.defaultOptions).forEach((op) => {
// defaultOptions[op] = Component.defaultOptions[op];
// });
Object.assign(defaultOptions, Component.defaultOptions);
}
// set functions
@ -310,12 +380,12 @@
if (Component.Interpolate) {
Object.keys(Component.Interpolate).forEach(function (fni) {
var compIntObj = Component.Interpolate[fni];
if (typeof (compIntObj) === 'function' && !Interpolate[fni]) {
Interpolate[fni] = compIntObj;
if (typeof (compIntObj) === 'function' && !interpolate[fni]) {
interpolate[fni] = compIntObj;
} else {
Object.keys(compIntObj).forEach(function (sfn) {
if (typeof (compIntObj[sfn]) === 'function' && !Interpolate[fni]) {
Interpolate[fni] = compIntObj[sfn];
if (typeof (compIntObj[sfn]) === 'function' && !interpolate[fni]) {
interpolate[fni] = compIntObj[sfn];
}
});
}
@ -334,62 +404,132 @@
return { name: ComponentName };
};
/**
* Perspective Interpolation Function.
*
* @param {number} a start value
* @param {number} b end value
* @param {string} u unit
* @param {number} v progress
* @returns {string} the perspective function in string format
*/
function perspective(a, b, u, v) {
// eslint-disable-next-line no-bitwise
return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + u + ")");
}
/**
* Translate 3D Interpolation Function.
*
* @param {number[]} a start [x,y,z] position
* @param {number[]} b end [x,y,z] position
* @param {string} u unit, usually `px` degrees
* @param {number} v progress
* @returns {string} the interpolated 3D translation string
*/
function translate3d(a, b, u, v) {
var translateArray = [];
for (var ax = 0; ax < 3; ax += 1) {
translateArray[ax] = (a[ax] || b[ax]
// eslint-disable-next-line no-bitwise
? ((a[ax] + (b[ax] - a[ax]) * v) * 1000 >> 0) / 1000 : 0) + u;
}
return ("translate3d(" + (translateArray.join(',')) + ")");
}
/**
* 3D Rotation Interpolation Function.
*
* @param {number} a start [x,y,z] angles
* @param {number} b end [x,y,z] angles
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated 3D rotation string
*/
function rotate3d(a, b, u, v) {
var rotateStr = '';
// eslint-disable-next-line no-bitwise
rotateStr += a[0] || b[0] ? ("rotateX(" + (((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u + ")") : '';
// eslint-disable-next-line no-bitwise
rotateStr += a[1] || b[1] ? ("rotateY(" + (((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u + ")") : '';
// eslint-disable-next-line no-bitwise
rotateStr += a[2] || b[2] ? ("rotateZ(" + (((a[2] + (b[2] - a[2]) * v) * 1000 >> 0) / 1000) + u + ")") : '';
return rotateStr;
}
/**
* Translate 2D Interpolation Function.
*
* @param {number[]} a start [x,y] position
* @param {number[]} b end [x,y] position
* @param {string} u unit, usually `px` degrees
* @param {number} v progress
* @returns {string} the interpolated 2D translation string
*/
function translate(a, b, u, v) {
var translateArray = [];
// eslint-disable-next-line no-bitwise
translateArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u;
// eslint-disable-next-line no-bitwise
translateArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0';
return ("translate(" + (translateArray.join(',')) + ")");
}
/**
* 2D Rotation Interpolation Function.
*
* @param {number} a start angle
* @param {number} b end angle
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated rotation
*/
function rotate(a, b, u, v) {
// eslint-disable-next-line no-bitwise
return ("rotate(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + u + ")");
}
/**
* Scale Interpolation Function.
*
* @param {number} a start scale
* @param {number} b end scale
* @param {number} v progress
* @returns {string} the interpolated scale
*/
function scale(a, b, v) {
// eslint-disable-next-line no-bitwise
return ("scale(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + ")");
}
/**
* Skew Interpolation Function.
*
* @param {number} a start {x,y} angles
* @param {number} b end {x,y} angles
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated string value of skew(s)
*/
function skew(a, b, u, v) {
var skewArray = [];
// eslint-disable-next-line no-bitwise
skewArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u;
// eslint-disable-next-line no-bitwise
skewArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0';
return ("skew(" + (skewArray.join(',')) + ")");
}
/* transformFunctions = {
property: 'transform',
subProperties,
defaultValues,
Interpolate: {translate,rotate,skew,scale},
functions } */
// same to svg transform, attr
// Component Functions
/**
* Sets the property update function.
* * same to svgTransform, htmlAttributes
* @param {string} tweenProp the property name
*/
function onStartTransform(tweenProp) {
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
KEC[tweenProp] = function (elem, a, b, v) {
// eslint-disable-next-line no-param-reassign
elem.style[tweenProp] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0
+ (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z]
+ (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z]
@ -400,7 +540,7 @@
}
// Base Component
var BaseTransform = {
var TransformFunctionsBase = {
component: 'baseTransform',
property: 'transform',
functions: { onStart: onStartTransform },
@ -415,7 +555,15 @@
},
};
function numbers(a, b, v) { // number1, number2, progress
/**
* Numbers Interpolation Function.
*
* @param {number} a start value
* @param {number} b end value
* @param {number} v progress
* @returns {number} the interpolated number
*/
function numbers(a, b, v) {
var A = +a;
var B = b - a;
// a = +a; b -= a;
@ -423,12 +571,20 @@
}
// Component Functions
/**
* Sets the update function for the property.
* @param {string} tweenProp the property name
*/
function boxModelOnStart(tweenProp) {
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
if (tweenProp in this.valuesEnd && !KEC[tweenProp]) {
KEC[tweenProp] = function (elem, a, b, v) {
/* eslint-disable no-param-reassign -- impossible to satisfy */
/* eslint-disable no-bitwise -- impossible to satisfy */
elem.style[tweenProp] = (v > 0.99 || v < 0.01
? ((numbers(a, b, v) * 10) >> 0) / 10
: (numbers(a, b, v)) >> 0) + "px";
/* eslint-enable no-bitwise */
/* eslint-enable no-param-reassign */
};
}
}
@ -439,7 +595,7 @@
baseBoxProps.forEach(function (x) { baseBoxOnStart[x] = boxModelOnStart; });
// Component Base
var baseBoxModel = {
var BoxModelBase = {
component: 'baseBoxModel',
category: 'boxModel',
properties: baseBoxProps,
@ -455,17 +611,23 @@
} */
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
function onStartOpacity(tweenProp/* , value */) {
// opacity could be 0 sometimes, we need to check regardless
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
if (tweenProp in this.valuesEnd && !KEC[tweenProp]) {
KEC[tweenProp] = function (elem, a, b, v) {
/* eslint-disable */
elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000;
/* eslint-enable */
};
}
}
// Base Component
var baseOpacity = {
var OpacityPropertyBase = {
component: 'baseOpacity',
property: 'opacity',
// defaultValue: 1,
@ -473,13 +635,13 @@
functions: { onStart: onStartOpacity },
};
// import {baseCrossBrowserMove} from '../components/crossBrowserMove.js'
// support for kute-base.js ends here
// import {baseCrossBrowserMove} from '../components/crossBrowserMove'
// support for kute-base ends here
var Components = {
Transform: new AnimationBase(BaseTransform),
BoxModel: new AnimationBase(baseBoxModel),
Opacity: new AnimationBase(baseOpacity),
Transform: new AnimationBase(TransformFunctionsBase),
BoxModel: new AnimationBase(BoxModelBase),
Opacity: new AnimationBase(OpacityPropertyBase),
};
function queueStart() {
@ -500,21 +662,28 @@
linkInterpolation.call(this);
}
// single Tween object construct
// TweenBase is meant to be use for pre-processed values
/**
* The `TweenBase` constructor creates a new `Tween` object
* for a single `HTMLElement` and returns it.
*
* `TweenBase` is meant to be used with pre-processed values.
*/
var TweenBase = function TweenBase(targetElement, startObject, endObject, opsObject) {
var this$1$1 = this;
// element animation is applied to
this.element = targetElement;
/** @type {boolean} */
this.playing = false;
/** @type {number?} */
this._startTime = null;
/** @type {boolean} */
this._startFired = false;
this.valuesEnd = endObject; // valuesEnd
this.valuesStart = startObject; // valuesStart
// type is set via KUTE.tweenProps
this.valuesEnd = endObject;
this.valuesStart = startObject;
// OPTIONS
var options = opsObject || {};
@ -522,8 +691,11 @@
// used by to() method and expects object : {} / false
this._resetStart = options.resetStart || 0;
// you can only set a core easing function as default
/** @type {KUTE.easingOption} */
this._easing = typeof (options.easing) === 'function' ? options.easing : connect.processEasing(options.easing);
/** @type {number} */
this._duration = options.duration || defaultOptions.duration; // duration option | default
/** @type {number} */
this._delay = options.delay || defaultOptions.delay; // delay option | default
// set other options
@ -542,22 +714,24 @@
var easingFnName = this._easing.name;
if (!onStart[easingFnName]) {
onStart[easingFnName] = function easingFn(prop) {
if (!KUTE[prop] && prop === this._easing.name) { KUTE[prop] = this._easing; }
if (!KEC[prop] && prop === this._easing.name) { KEC[prop] = this._easing; }
};
}
return this;
};
// tween prototype
// queue tween object to main frame update
// move functions that use the ticker outside the prototype to be in the same scope with it
/**
* Starts tweening
* @param {number?} time the tween start time
* @returns {TweenBase} this instance
*/
TweenBase.prototype.start = function start (time) {
// now it's a good time to start
add(this);
this.playing = true;
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
this._startTime = typeof time !== 'undefined' ? time : KEC.Time();
this._startTime += this._delay;
if (!this._startFired) {
@ -574,6 +748,10 @@
return this;
};
/**
* Stops tweening
* @returns {TweenBase} this instance
*/
TweenBase.prototype.stop = function stop () {
if (this.playing) {
remove(this);
@ -587,6 +765,9 @@
return this;
};
/**
* Trigger internal completion callbacks.
*/
TweenBase.prototype.close = function close () {
var this$1$1 = this;
@ -601,20 +782,33 @@
stop.call(this);
};
/**
* Schedule another tween instance to start once this one completes.
* @param {KUTE.chainOption} args the tween animation start time
* @returns {TweenBase} this instance
*/
TweenBase.prototype.chain = function chain (args) {
this._chain = [];
this._chain = args.length ? args : this._chain.concat(args);
return this;
};
/**
* Stop tweening the chained tween instances.
*/
TweenBase.prototype.stopChainedTweens = function stopChainedTweens () {
if (this._chain && this._chain.length) { this._chain.forEach(function (tw) { return tw.stop(); }); }
};
/**
* Update the tween on each tick.
* @param {number} time the tick time
* @returns {boolean} this instance
*/
TweenBase.prototype.update = function update (time) {
var this$1$1 = this;
var T = time !== undefined ? time : KUTE.Time();
var T = time !== undefined ? time : KEC.Time();
var elapsed;
@ -628,7 +822,7 @@
// render the update
Object.keys(this.valuesEnd).forEach(function (tweenProp) {
KUTE[tweenProp](this$1$1.element,
KEC[tweenProp](this$1$1.element,
this$1$1.valuesStart[tweenProp],
this$1$1.valuesEnd[tweenProp],
progress);
@ -665,13 +859,32 @@
// Update Tween Interface
connect.tween = TweenBase;
var TweenConstructor = connect.tween;
/**
* The `KUTE.fromTo()` static method returns a new Tween object
* for a single `HTMLElement` at a given state.
*
* @param {Element} element target element
* @param {KUTE.tweenProps} startObject
* @param {KUTE.tweenProps} endObject
* @param {KUTE.tweenOptions} optionsObj tween options
* @returns {KUTE.Tween} the resulting Tween object
*/
function fromTo(element, startObject, endObject, optionsObj) {
var options = optionsObj || {};
var TweenConstructor = connect.tween;
return new TweenConstructor(selector(element), startObject, endObject, options);
}
var version = "2.1.3";
var version = "2.2.0alpha2";
// @ts-ignore
/**
* A global namespace for library version.
* @type {string}
*/
var Version = version;
var indexBase = {
Animation: AnimationBase,
@ -684,10 +897,10 @@
Easing: Easing,
Util: Util,
Render: Render,
Interpolate: Interpolate,
Internals: Internals,
Interpolate: interpolate,
Internals: internals,
Selector: selector,
Version: version,
Version: Version,
};
return indexBase;

4
demo/src/kute-base.min.js vendored
View file

File diff suppressed because one or more lines are too long

2761
demo/src/kute-extra.js
View file

File diff suppressed because it is too large Load diff

4
demo/src/kute-extra.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
demo/src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

73
demo/svgCubicMorph.html
View file

@ -94,9 +94,9 @@
<p>The component will process paths and out of the box will provide the closest possible interpolation by default. It also implements a series of solutions from
<a href="https://github.com/paperjs/paper.js/">Paper.js</a> to determine paths draw direction and automatically reverse one of them for most accurate presentation and as a result
the previously featured options <kbd>reverseFirstPath</kbd> and <kbd>reverseSecondPath</kbd> have been deprecated.</p>
<p>The main difference with the <a href="svgMorph.html">SVG Morph</a> component is the fact that this components is converting all path commands to <i>cubicBezierTo</i>,
giving it the upper hand over the original morph component. While the other component will spend time to process the path data and create polygons, this component should deliver
the animation faster and using considerably less power.</p>
<p>The main difference with the <a href="svgMorph.html">SVG Morph</a> component is the fact that this components is converting all path commands to <i>cubicBezierTo</i>, giving it
the upper hand over the original morph component in many regards. While the other component will spend time to process the path data and create polygons, this component should
deliver the animation faster and using considerably less power.</p>
<p>All path processing is powered by our <a href="https://github.com/thednp/svg-path-commander">SVGPathCommander</a> starting KUTE.js version 2.0.14, which aims to modernize and
improve the path processing and enable transition from closed to and from un-closed shapes.</p>
</div>
@ -131,13 +131,9 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle" class="bg-red" d="M559,597.4H43.6c-21,0-38-17-38-38V44c0-21,17-38,38-38H559c21,0,38,17,38,38v515.4 C597,580.4,580,597.4,559,597.4z"/>
<path id="rectangle" class="bg-olive" d="M559,597.4H43.6c-21,0-38-17-38-38V44c0-21,17-38,38-38H559c21,0,38,17,38,38v515.4 C597,580.4,580,597.4,559,597.4z"/>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011z"/>
</svg>
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle1" class="bg-olive" d="M559,597.4H43.6c-21,0-38-17-38-38V44c0-21,17-38,38-38H559c21,0,38,17,38,38v515.4 C597,580.4,580,597.4,559,597.4"/>
<path id="star1" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
<svg class="example-box-model example-box" id="morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle2" class="bg-blue" d="M559,597.4H302.1H43.6c-21,0-38-17-38-38V300V44c0-21,17-38,38-38H300h259c21,0,38,17,38,38
v257.7v257.7C597,580.4,580,597.4,559,597.4"/>
@ -153,15 +149,12 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
<p><b>Some takeaways:</b></p>
<ul>
<li>The <b class="text-red">red shape</b> and its corresponding end shape are both the originals, un-edited shapes, both have the <code>Z</code> path command, notice a strange line at the bottom-right of the rectangle
during the animation. We'll have another example about that line.</li>
<li>The <b class="text-olive">olive shape</b> and its corresponding end shape both have been edited by removing the <code>Z</code> path command, notice the strange line during the animation is gone, also a different
presentation.</li>
<li>The <b class="text-olive">olive shape</b> and its corresponding end shape are both the originals, un-edited shapes.</li>
<li>The <b class="text-blue">blue shape</b> and its corresponding end shape have been edited by removing their <code>Z</code> path commands and by adding additional curve points using a vector graphics editor to match
the amount of points in both shapes.</li>
</ul>
<p>In this example we focus on experimentation to discover ways to optimize the morph animation so that the points travel optimal distance. Keep in mind that the <code>Z</code> path command is actually a shorthand
for <code>L</code> (line path command), sometimes it's required to close the shape, our shapes here happen to be OK without it.</p>
for <code>L</code> (line path command), sometimes it's required to close the shape, however the path processing tools will remove it or replace it when converting path segments to <code>C</code> cubic-bezier.</p>
<p>Each morph animation as well as each pair of shapes can have its own quirks. You can use the technique on your shapes to optimize the animation to your style. Chris Coyier wrote
<a href="https://css-tricks.com/svg-shape-morphing-works/">an excelent article</a> in which he explains the terminology and workflow on how SVG morphing animation works with simple examples.</p>
@ -192,14 +185,6 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
<path id="line1" fill="transparent" stroke="#4CAF50" stroke-linejoin="round" stroke-width="15" d="M10 300 L580 300"/>
<path id="circle1" style="visibility:hidden" d="M10,300a290,290 0 1,1 580,0a290,290 0 1,1 -580,0z"/>
</svg>
<svg class="example-box-model example-box" id="morph-example-closed2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="line2" fill="transparent" stroke="#2196F3" stroke-linejoin="round" stroke-width="15" d="M10 300 L580 300z"/>
<path id="circle2" style="visibility:hidden" d="M10,300a290,290 0 1,1 580,0a290,290 0 1,1 -580,0"/>
</svg>
<svg class="example-box-model example-box" id="morph-example-closed3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="line3" fill="transparent" stroke="#e91b1f" stroke-linejoin="round" stroke-width="15" d="M10 300 L580 300"/>
<path id="circle3" style="visibility:hidden" d="M10,300a290,290 0 1,1 580,0a290,290 0 1,1 -580,0"/>
</svg>
<div class="example-buttons">
<a id="morphBtnClosed" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
@ -208,16 +193,12 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
<p>As you can see, the functionality of this component is very different from the <a href="svgMorph.html">svgMorph</a> component in the sense that it will
morph shapes as authored. If you replay the above animations, here are a few takeaways:</p>
<ul>
<li>the <b class="text-orange">orange</b> line and its corresponding shape are both closed, this makes the last <code>Z</code> path command behave like a regular
line, perhaps not the best visual presentation;</li>
<li>the <b class="text-green">green</b> line is not closed, but its corresponding shape is, still the <code>Z</code> path command seems to cause trouble, while
the presentation looks a bit different;</li>
<li>the <b class="text-blue">blue</b> line is now closed, but its corresponding shape isn't and with the <code>Z</code> path command missing from the second shape,
the animation looks significantly better;</li>
<li>the <b class="text-red">red</b> line and its corresponding shape are both not closed, another combination that delivers excellent outcome.</li>
<li>the <b class="text-orange">orange</b> line is <b>closed</b>, this makes the last <code>Z</code> path command behave like a regular line;</li>
<li>the <b class="text-green">green</b> line is <b>not closed</b>, and the presentation looks quite different compared to the other example as well as
the other <a href="./cubicMorph.html">cubicMorph</a> component.</li>
</ul>
<p>As you can see, this is another case where easy steps can be made to optimize the visual presentation. Keep in mind that stroke attributes like
<code>stroke-linejoin</code> such can have a small impact on your animation, particularly on start and end.</p>
<p>This is the visual presentation you can expect with this component. Keep in mind that stroke attributes like <code>stroke-linejoin</code> such can have
a small impact on your animation, particularly on start and end points.</p>
<h3>Subpath Example</h3>
@ -310,31 +291,6 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
<path id="rectangle-container" fill="#2196F3" mask="url(#symbol)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path id="circle-container" style="visibility: hidden;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0z"></path>
</svg>
<svg class="example-box-model example-box" id="complex-morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol1">
<rect width="100%" height="100%" fill="#fff"></rect>
<path id="symbol-left1" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-left-clone1" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-right1" fill="#000" d="M418.956 75.269l-123.176 217.79c-0.075 0.115-0.075 0.255 0 0.367l78.431 143.295c1.556 3.084 1.593 6.221 0.113 8.597-1.415 2.288-4.033 3.552-7.383 3.552h-55.57c-8.522 0-12.783-5.663-15.54-10.596 0 0-78.848-144.646-79.050-145.023 3.944-6.98 123.797-219.523 123.797-219.523 2.984-5.362 6.587-10.596 14.894-10.596h56.203c3.351 0 5.981 1.265 7.396 3.553 1.466 2.376 1.428 5.511-0.115 8.584z"></path>
<path id="eye-right1" style="visibility: hidden;" d="M352,128c2.6,0,5,0.5,7.4,1.3c2.3,0.8,4.5,2,6.6,3.6c10.6,7.8,18,24.2,18,43.1c0,16.2-5.3,30.5-13.5,39.2
c-3.1,3.3-6.6,5.8-10.5,7.3c-2.6,1-5.3,1.5-8,1.5c-4,0-7.8-1.1-11.3-3.1c-2.7-1.6-5.3-3.7-7.6-6.2c-7.9-8.7-13-22.8-13-38.7
c0-19.2,7.5-35.7,18.4-43.4c1.9-1.4,4-2.5,6.1-3.2C346.9,128.5,349.4,128,352,128z"></path>
<path id="eye-left1" style="visibility: hidden;" d="M176,156c10.4,0,19.7,1.4,27.5,3.9c14.5,4.7,23.5,13.4,23.5,24.8c0,3.7,1.9,21.5-0.1,24.8
c-3.3-5.5-9.2-10.3-16.7-13.9c-5.6-2.7-12.2-4.8-19.4-6c-4.7-0.8-9.6-1.2-14.7-1.2c-8.9,0-17.3,1.3-24.7,3.5
c-12.2,3.7-21.6,10-26.3,17.6c-2-3.3-0.1-21.1-0.1-24.8c0-11.3,8.8-19.9,23-24.6c3.7-1.2,7.8-2.2,12.2-2.9
C165.1,156.4,170.4,156,176,156z"></path>
<path id="mouth1" style="visibility: hidden;" d="M250.2,416c-42.9,0-82-16.6-111.5-43.9c-7-6.5-13.5-13.6-19.4-21.2c-3.8-4.9-7.3-10-10.6-15.4
c5.6,4.4,11.9,8.2,18.7,11.5c7.1,3.4,14.8,6.2,23,8.4c33.9,9.2,76.7,8.9,120.9,0.1c47.2-9.3,87.3-26.8,114.5-50.3
c6-5.1,11.3-10.6,16-16.3c5.6-6.9,10.3-14.2,13.8-21.8c-1.2,9.2-3.1,18.2-5.7,26.9c-2.6,8.8-5.9,17.3-9.7,25.5
C373.1,376.7,316.1,416,250.2,416L250.2,416z"></path>
</mask>
</defs>
<path id="rectangle-container1" fill="#9C27B0" mask="url(#symbol1)" d="M426.7,0H85.3C38.4,0,0,38.4,0,85.3v341.3c0,47,38.4,85.3,85.3,85.3h341.3
c46.9,0,85.3-38.4,85.3-85.3V85.3C512,38.4,473.6,0,426.7,0z"></path>
<path id="circle-container1" style="visibility: hidden;" d="M0,256c0,100.9,59.8,165.3,72,177.9c11.2,11.6,77.7,78.1,184,78.1c14.5,0,115.8-1.7,190.7-85.3
C510.1,356,512,274.1,512,256c0-18.9-2.1-96.7-61-165.9C375.7,1.8,269.4,0,256,0C241,0,141.3,1.7,66.6,83.7C1.9,154.8,0,237.9,0,256 z"></path>
</svg>
<svg class="example-box-model example-box" id="complex-morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol2">
@ -372,7 +328,7 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
<ul>
<li>Starting with KUTE.js version 2.0.14 the component implements <a href="https://github.com/thednp/svg-path-commander">SVGPathCommander</a> for path processing, solving previous issues with over-optimized
path strings among other issues. You can try the <a href="https://thednp.github.io/svg-path-commander/">SVGPathCommander demo page</a> to prepare your path strings.</li>
<li>Since animation works only with <code>path</code> <b>SVGElement</b>s, you might need a <a href="https://github.com/Waest/SVGPathConverter" target="_blank">convertToPath</a> utility.</li>
<li>Since animation works only with <code>path</code> <b>SVGElement</b>s, you might need a <a href="https://thednp.github.io/svg-path-commander/convert.html" target="_blank">shapeToPath</a> utility.</li>
<li>Both SVG morph components will always animate first sub-path from both starting and ending shapes, and for any case hopefully this demo will guide you in mastering the technique.</li>
<li>In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or <a href="https://github.com/Waest/SVGPathConverter">SVGPathCommander</a>
to apply a scale transformation to your shapes' path commands.</li>
@ -400,13 +356,10 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
</div>
<!-- /.site-wrapper -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<!-- <script src="./src/kute-extra.js"></script> -->
<script src="./src/kute-extra.min.js"></script>
<script src="./src/kute-extra.js"></script>
<script src="./assets/js/svgCubicMorph.js"></script>
<script src="./assets/js/prism.js"></script>
<script src="./assets/js/scripts.js"></script>

5
demo/svgMorph.html
View file

@ -381,7 +381,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<li>Starting with KUTE.js version 2.0.14 the component implements <a href="https://github.com/thednp/svg-path-commander">SVGPathCommander</a> for path processing, solving previous issues with over-optimized
path strings among other issues. You can try the <a href="https://thednp.github.io/svg-path-commander/">SVGPathCommander demo page</a> to prepare your path strings.</li>
<li>Since <b>SVG Morph</b> animation works only with <code>path</code> elements, you might need a <code>convertToPath</code> feature, so
<a href="https://github.com/Waest/SVGPathConverter" target="_blank">grab one here</a>.</li>
<a href="https://thednp.github.io/svg-path-commander/convert.html" target="_blank">grab one here</a>.</li>
<li>Both SVG morph components will always animate first sub-path from both starting and ending shapes, and for any case hopefully this demo will guide you in mastering the technique.</li>
<li>In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or <a href="https://github.com/Waest/SVGPathConverter">SVGPathCommander</a>
to apply a scale transformation to your shapes' path commands.</li>
@ -419,8 +419,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute.min.js"></script>
<!-- <script src="../dist/kute.js"></script> -->
<script src="../dist/kute.js"></script>
<script src="./assets/js/prism.js"></script>
<script src="./assets/js/scripts.js"></script>
<script src="./assets/js/svgMorph.js"></script>

2504
dist/kute.esm.js vendored
View file

File diff suppressed because it is too large Load diff

4
dist/kute.esm.min.js vendored
View file

File diff suppressed because one or more lines are too long

2475
dist/kute.js vendored
View file

File diff suppressed because it is too large Load diff

4
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

12
package.json
View file

@ -1,6 +1,6 @@
{
"name": "kute.js",
"version": "2.1.3",
"version": "2.2.0alpha2",
"description": "JavaScript animation engine",
"main": "dist/kute.min.js",
"module": "dist/kute.esm.js",
@ -23,7 +23,7 @@
"lint:js": "eslint src/ --config .eslintrc",
"copy-build": "rollup --environment OUTPUTFILE:demo/src/kute.min.js,DIST:standard,MIN:true,FORMAT:umd -c",
"build-standard": "rollup --environment DIST:standard,MIN:false,FORMAT:umd -c",
"build-ts": "tsc -d",
"build:ts": "tsc -d",
"build-standard-min": "rollup --environment DIST:standard,MIN:true,FORMAT:umd -c",
"build-standard-esm": "rollup --environment DIST:standard,MIN:false,FORMAT:esm -c",
"build-standard-esm-min": "rollup --environment DIST:standard,MIN:true,FORMAT:esm -c",
@ -61,10 +61,10 @@
},
"homepage": "http://thednp.github.io/kute.js",
"dependencies": {
"cubic-bezier-easing": "^1.0.8",
"cubic-bezier-easing": "^1.0.14",
"minifill": "^0.0.16",
"shorter-js": "^0.2.1",
"svg-path-commander": "0.1.7"
"shorter-js": "^0.2.6",
"svg-path-commander": "0.1.17"
},
"devDependencies": {
"@rollup/plugin-buble": "^0.21.3",
@ -77,6 +77,6 @@
"npm-run-all": "^4.1.5",
"rollup": "^2.38.4",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^4.4.4"
"typescript": "^4.5.2"
}
}

2
rollup.config.js
View file

@ -36,7 +36,7 @@ const PLUGINS = [
]
if (FORMAT!=='esm'){
PLUGINS.push(buble());
PLUGINS.push(buble({objectAssign: 'Object.assign'}));
}
if (MIN){

54
src/animation/animation.js
View file

@ -1,36 +1,37 @@
import supportedProperties from '../objects/supportedProperties.js';
import defaultValues from '../objects/defaultValues.js';
import defaultOptions from '../objects/defaultOptions.js';
import prepareProperty from '../objects/prepareProperty.js';
import prepareStart from '../objects/prepareStart.js';
import onStart from '../objects/onStart.js';
import onComplete from '../objects/onComplete.js';
import crossCheck from '../objects/crossCheck.js';
import linkProperty from '../objects/linkProperty.js';
import Util from '../objects/util.js';
import Interpolate from '../objects/interpolate.js';
import supportedProperties from '../objects/supportedProperties';
import defaultValues from '../objects/defaultValues';
import defaultOptions from '../objects/defaultOptions';
import prepareProperty from '../objects/prepareProperty';
import prepareStart from '../objects/prepareStart';
import onStart from '../objects/onStart';
import onComplete from '../objects/onComplete';
import crossCheck from '../objects/crossCheck';
import linkProperty from '../objects/linkProperty';
import Util from '../objects/util';
import Interpolate from '../objects/interpolate';
// Animation class
// * builds KUTE components
// * populate KUTE objects
// * AnimatonBase creates a KUTE.js build for pre-made Tween objects
// * AnimatonDevelopment can help you debug your new components
/**
* Animation Class
*
* Registers components by populating KUTE.js objects and makes sure
* no duplicate component / property is allowed.
*/
export default class Animation {
/**
* @constructor
* @param {KUTE.fullComponent} Component
*/
constructor(Component) {
try {
if (Component.component in supportedProperties) {
throw Error(`KUTE.js - ${Component.component} already registered`);
throw Error(`KUTE - ${Component.component} already registered`);
} else if (Component.property in defaultValues) {
throw Error(`KUTE.js - ${Component.property} already registered`);
} else {
this.setComponent(Component);
throw Error(`KUTE - ${Component.property} already registered`);
}
} catch (e) {
throw Error(e);
}
}
setComponent(Component) {
const propertyInfo = this;
const ComponentName = Component.component;
// const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty, Util }
@ -75,9 +76,10 @@ export default class Animation {
// set additional options
if (Component.defaultOptions) {
Object.keys(Component.defaultOptions).forEach((op) => {
defaultOptions[op] = Component.defaultOptions[op];
});
// Object.keys(Component.defaultOptions).forEach((op) => {
// defaultOptions[op] = Component.defaultOptions[op];
// });
Object.assign(defaultOptions, Component.defaultOptions);
}
// set functions
@ -105,7 +107,7 @@ export default class Animation {
});
}
// set component interpolate
// set component interpolation functions
if (Component.Interpolate) {
Object.keys(Component.Interpolate).forEach((fni) => {
const compIntObj = Component.Interpolate[fni];

40
src/animation/animationBase.js
View file

@ -1,18 +1,27 @@
import supportedProperties from '../objects/supportedProperties.js';
import defaultOptions from '../objects/defaultOptions.js';
import onStart from '../objects/onStart.js';
import onComplete from '../objects/onComplete.js';
import linkProperty from '../objects/linkProperty.js';
import Util from '../objects/util.js';
import Interpolate from '../objects/interpolate.js';
import supportedProperties from '../objects/supportedProperties';
import defaultOptions from '../objects/defaultOptions';
import onStart from '../objects/onStart';
import onComplete from '../objects/onComplete';
import linkProperty from '../objects/linkProperty';
import Util from '../objects/util';
import Interpolate from '../objects/interpolate';
// Animation class
/**
* Animation Base Class
*
* Registers components by populating KUTE.js objects and makes sure
* no duplicate component / property is allowed.
*
* This class only registers the minimal amount of component information
* required to enable components animation, which means value processing
* as well as `to()` and `allTo()` methods are not supported.
*/
export default class AnimationBase {
/**
* @class
* @param {KUTE.baseComponent} Component
*/
constructor(Component) {
return this.setComponent(Component);
}
setComponent(Component) {
const ComponentName = Component.component;
// const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty }
const Functions = { onStart, onComplete };
@ -27,9 +36,10 @@ export default class AnimationBase {
// set additional options
if (Component.defaultOptions) {
Object.keys(Component.defaultOptions).forEach((op) => {
defaultOptions[op] = Component.defaultOptions[op];
});
// Object.keys(Component.defaultOptions).forEach((op) => {
// defaultOptions[op] = Component.defaultOptions[op];
// });
Object.assign(defaultOptions, Component.defaultOptions);
}
// set functions

38
src/animation/animationDevelopment.js
View file

@ -1,22 +1,28 @@
import prepareProperty from '../objects/prepareProperty.js';
import prepareStart from '../objects/prepareStart.js';
import onStart from '../objects/onStart.js';
import onComplete from '../objects/onComplete.js';
import crossCheck from '../objects/crossCheck.js';
import Interpolate from '../objects/interpolate.js';
import prepareProperty from '../objects/prepareProperty';
import prepareStart from '../objects/prepareStart';
import onStart from '../objects/onStart';
import onComplete from '../objects/onComplete';
import crossCheck from '../objects/crossCheck';
import Interpolate from '../objects/interpolate';
import Animation from './animation.js';
import Animation from './animation';
// AnimationDevelopment class
/**
* Animation Development Class
*
* Registers components by populating KUTE.js objects and makes sure
* no duplicate component / property is allowed.
*
* In addition to the default class, this one provides more component
* information to help you with custom component development.
*/
export default class AnimationDevelopment extends Animation {
constructor(...args) {
super(...args);
this.setComponent(...args);
}
setComponent(Component) {
super.setComponent(Component);
/**
*
* @param {KUTE.fullComponent} args
*/
constructor(Component) {
super(Component);
const propertyInfo = this;
// const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty, Util }

31
src/components/backgroundPosition.js
View file

@ -1,22 +1,27 @@
import defaultValues from '../objects/defaultValues.js';
import getStyleForProperty from '../process/getStyleForProperty.js';
import numbers from '../interpolation/numbers.js';
import trueDimension from '../util/trueDimension.js';
import { onStartBgPos } from './backgroundPositionBase.js';
/* bgPosProp = {
property: 'backgroundPosition',
defaultValue: [0,0],
interpolators: {numbers},
functions = { prepareStart, prepareProperty, onStart }
} */
import defaultValues from '../objects/defaultValues';
import getStyleForProperty from '../process/getStyleForProperty';
import numbers from '../interpolation/numbers';
import trueDimension from '../util/trueDimension';
import { onStartBgPos } from './backgroundPositionBase';
// Component Functions
/**
* Returns the property computed style.
* @param {string} prop the property
* @returns {string} the property computed style
*/
function getBgPos(prop/* , value */) {
return getStyleForProperty(this.element, prop) || defaultValues[prop];
}
function prepareBgPos(prop, value) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {string} value the property value
* @returns {number[]} the property tween object
*/
function prepareBgPos(/* prop, */_, value) {
if (value instanceof Array) {
const x = trueDimension(value[0]).v;
const y = trueDimension(value[1]).v;

25
src/components/backgroundPositionBase.js
View file

@ -1,27 +1,26 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
/* bgPosProp = {
property: 'backgroundPosition',
defaultValue: [0,0],
interpolators: {numbers},
functions = { prepareStart, prepareProperty, onStart }
} */
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
// Component Functions
/**
* Sets the property update function.
* @param {string} prop the property name
*/
export function onStartBgPos(prop) {
if (this.valuesEnd[prop] && !KUTE[prop]) {
KUTE[prop] = (elem, a, b, v) => {
if (this.valuesEnd[prop] && !KEC[prop]) {
KEC[prop] = (elem, a, b, v) => {
/* eslint-disable -- no-bitwise & no-param-reassign impossible to satisfy */
elem.style[prop] = `${(numbers(a[0], b[0], v) * 100 >> 0) / 100}% ${((numbers(a[1], b[1], v) * 100 >> 0) / 100)}%`;
/* eslint-enable -- no-bitwise & no-param-reassign impossible to satisfy */
};
}
}
// Component Base Object
const baseBgPosOps = {
const BackgroundPositionBase = {
component: 'baseBackgroundPosition',
property: 'backgroundPosition',
Interpolate: { numbers },
functions: { onStart: onStartBgPos },
};
export default baseBgPosOps;
export default BackgroundPositionBase;

35
src/components/borderRadius.js
View file

@ -1,19 +1,14 @@
import defaultValues from '../objects/defaultValues.js';
import getStyleForProperty from '../process/getStyleForProperty.js';
import trueDimension from '../util/trueDimension.js';
import units from '../interpolation/units.js';
import { radiusOnStartFn } from './borderRadiusBase.js';
/* borderRadius = {
category: 'borderRadius',
properties : [..],
defaultValues: {..},
interpolation: {units}
} */
import defaultValues from '../objects/defaultValues';
import getStyleForProperty from '../process/getStyleForProperty';
import trueDimension from '../util/trueDimension';
import units from '../interpolation/units';
import { radiusOnStartFn } from './borderRadiusBase';
// Component Properties
const radiusProps = ['borderRadius',
'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'];
const radiusProps = [
'borderRadius',
'borderTopLeftRadius', 'borderTopRightRadius',
'borderBottomLeftRadius', 'borderBottomRightRadius'];
const radiusValues = {};
radiusProps.forEach((x) => { radiusValues[x] = 0; });
@ -24,11 +19,21 @@ radiusProps.forEach((tweenProp) => {
radiusOnStart[tweenProp] = radiusOnStartFn;
});
/**
* Returns the current property computed style.
* @param {string} tweenProp the property name
* @returns {string} the property computed style
*/
export function getRadius(tweenProp) {
return getStyleForProperty(this.element, tweenProp) || defaultValues[tweenProp];
}
export function prepareRadius(tweenProp, value) {
/**
* Returns the property tween object.
* @param {string} value the property value
* @returns {{v: number, u: string}} the property tween object
*/
export function prepareRadius(/* tweenProp, */_, value) {
return trueDimension(value);
}

24
src/components/borderRadiusBase.js
View file

@ -1,5 +1,5 @@
import KUTE from '../objects/kute.js';
import units from '../interpolation/units.js';
import KEC from '../objects/kute';
import units from '../interpolation/units';
/* borderRadius = {
category: 'borderRadius',
@ -9,13 +9,21 @@ import units from '../interpolation/units.js';
} */
// Component Properties
const radiusProps = ['borderRadius',
'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'];
const radiusProps = [
'borderRadius',
'borderTopLeftRadius', 'borderTopRightRadius',
'borderBottomLeftRadius', 'borderBottomRightRadius',
];
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function radiusOnStartFn(tweenProp) {
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (tweenProp in this.valuesEnd && !KEC[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
// eslint-disable-next-line no-param-reassign -- impossible to satisfy
elem.style[tweenProp] = units(a.v, b.v, b.u, v);
};
}
@ -26,10 +34,10 @@ radiusProps.forEach((tweenProp) => {
});
// Base Component
const baseBorderRadius = {
const BorderRadiusBase = {
component: 'baseBorderRadius',
category: 'borderRadius',
Interpolate: { units },
functions: { onStart: radiusOnStart },
};
export default baseBorderRadius;
export default BorderRadiusBase;

26
src/components/boxModel.js
View file

@ -1,8 +1,8 @@
import defaultValues from '../objects/defaultValues.js';
import getStyleForProperty from '../process/getStyleForProperty.js';
import trueDimension from '../util/trueDimension.js';
import numbers from '../interpolation/numbers.js';
import { boxModelOnStart } from './boxModelBase.js';
import defaultValues from '../objects/defaultValues';
import getStyleForProperty from '../process/getStyleForProperty';
import trueDimension from '../util/trueDimension';
import numbers from '../interpolation/numbers';
import { boxModelOnStart } from './boxModelBase';
// Component Properties
const boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
@ -14,9 +14,21 @@ const boxModelValues = {};
boxModelProperties.forEach((x) => { boxModelValues[x] = 0; });
// Component Functions
/**
* Returns the current property computed style.
* @param {string} tweenProp the property name
* @returns {string} computed style for property
*/
function getBoxModel(tweenProp) {
return getStyleForProperty(this.element, tweenProp) || defaultValues[tweenProp];
}
/**
* Returns the property tween object.
* @param {string} tweenProp the property name
* @param {string} value the property value
* @returns {number} the property tween object
*/
function prepareBoxModel(tweenProp, value) {
const boxValue = trueDimension(value); const
offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth';
@ -33,7 +45,7 @@ const boxModelFunctions = {
};
// Component Full Component
const boxModel = {
const BoxModel = {
component: 'boxModelProperties',
category: 'boxModel',
properties: boxModelProperties,
@ -42,4 +54,4 @@ const boxModel = {
functions: boxModelFunctions,
};
export default boxModel;
export default BoxModel;

20
src/components/boxModelBase.js
View file

@ -1,13 +1,21 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
// Component Functions
/**
* Sets the update function for the property.
* @param {string} tweenProp the property name
*/
export function boxModelOnStart(tweenProp) {
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (tweenProp in this.valuesEnd && !KEC[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
/* eslint-disable no-param-reassign -- impossible to satisfy */
/* eslint-disable no-bitwise -- impossible to satisfy */
elem.style[tweenProp] = `${v > 0.99 || v < 0.01
? ((numbers(a, b, v) * 10) >> 0) / 10
: (numbers(a, b, v)) >> 0}px`;
/* eslint-enable no-bitwise */
/* eslint-enable no-param-reassign */
};
}
}
@ -18,7 +26,7 @@ const baseBoxOnStart = {};
baseBoxProps.forEach((x) => { baseBoxOnStart[x] = boxModelOnStart; });
// Component Base
const baseBoxModel = {
const BoxModelBase = {
component: 'baseBoxModel',
category: 'boxModel',
properties: baseBoxProps,
@ -26,4 +34,4 @@ const baseBoxModel = {
functions: { onStart: baseBoxOnStart },
};
export default baseBoxModel;
export default BoxModelBase;

26
src/components/boxModelEssential.js
View file

@ -1,13 +1,25 @@
import defaultValues from '../objects/defaultValues.js';
import getStyleForProperty from '../process/getStyleForProperty.js';
import trueDimension from '../util/trueDimension.js';
import numbers from '../interpolation/numbers.js';
import { boxModelOnStart } from './boxModelBase.js';
import defaultValues from '../objects/defaultValues';
import getStyleForProperty from '../process/getStyleForProperty';
import trueDimension from '../util/trueDimension';
import numbers from '../interpolation/numbers';
import { boxModelOnStart } from './boxModelBase';
// Component Functions
/**
* Returns the current property computed style.
* @param {string} tweenProp the property name
* @returns {string} computed style for property
*/
function getBoxModel(tweenProp) {
return getStyleForProperty(this.element, tweenProp) || defaultValues[tweenProp];
}
/**
* Returns the property tween object.
* @param {string} tweenProp the property name
* @param {string} value the property name
* @returns {number} the property tween object
*/
function prepareBoxModel(tweenProp, value) {
const boxValue = trueDimension(value);
const offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth';
@ -31,7 +43,7 @@ const essentialBoxModelFunctions = {
};
// Component Essential
const essentialBoxModel = {
const BoxModelEssential = {
component: 'essentialBoxModel',
category: 'boxModel',
properties: essentialBoxProps,
@ -41,4 +53,4 @@ const essentialBoxModel = {
Util: { trueDimension },
};
export default essentialBoxModel;
export default BoxModelEssential;

33
src/components/clipProperty.js
View file

@ -1,16 +1,29 @@
import getStyleForProperty from '../process/getStyleForProperty.js';
import trueDimension from '../util/trueDimension.js';
import numbers from '../interpolation/numbers.js';
import { onStartClip } from './clipPropertyBase.js';
import getStyleForProperty from '../process/getStyleForProperty';
import trueDimension from '../util/trueDimension';
import numbers from '../interpolation/numbers';
import { onStartClip } from './clipPropertyBase';
// Component Functions
/**
* Returns the current property computed style.
* @param {string} tweenProp the property name
* @returns {string | number[]} computed style for property
*/
function getClip(tweenProp/* , value */) {
const currentClip = getStyleForProperty(this.element, tweenProp);
const width = getStyleForProperty(this.element, 'width');
const height = getStyleForProperty(this.element, 'height');
const { element } = this;
const currentClip = getStyleForProperty(element, tweenProp);
const width = getStyleForProperty(element, 'width');
const height = getStyleForProperty(element, 'height');
return !/rect/.test(currentClip) ? [0, width, height, 0] : currentClip;
}
function prepareClip(tweenProp, value) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {string} value the property value
* @returns {number[]} the property tween object
*/
function prepareClip(/* tweenProp, */_, value) {
if (value instanceof Array) {
return value.map((x) => trueDimension(x));
}
@ -27,7 +40,7 @@ const clipFunctions = {
};
// Component Full
const clipProperty = {
const ClipProperty = {
component: 'clipProperty',
property: 'clip',
defaultValue: [0, 0, 0, 0],
@ -36,4 +49,4 @@ const clipProperty = {
Util: { trueDimension },
};
export default clipProperty;
export default ClipProperty;

23
src/components/clipPropertyBase.js
View file

@ -1,24 +1,31 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function onStartClip(tweenProp) {
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
let h = 0; const
cl = [];
for (h; h < 4; h += 1) {
const c1 = a[h].v; const c2 = b[h].v; const
cu = b[h].u || 'px';
const c1 = a[h].v;
const c2 = b[h].v;
const cu = b[h].u || 'px';
// eslint-disable-next-line no-bitwise -- impossible to satisfy
cl[h] = ((numbers(c1, c2, v) * 100 >> 0) / 100) + cu;
}
// eslint-disable-next-line no-param-reassign -- impossible to satisfy
elem.style.clip = `rect(${cl})`;
};
}
}
// Component Base
const baseClip = {
const ClipPropertyBase = {
component: 'baseClip',
property: 'clip',
// defaultValue: [0,0,0,0],
@ -26,4 +33,4 @@ const baseClip = {
functions: { onStart: onStartClip },
};
export default baseClip;
export default ClipPropertyBase;

33
src/components/colorProperties.js
View file

@ -1,15 +1,18 @@
import defaultValues from '../objects/defaultValues.js';
import getStyleForProperty from '../process/getStyleForProperty.js';
import trueColor from '../util/trueColor.js';
import numbers from '../interpolation/numbers.js';
import colors from '../interpolation/colors.js';
import { onStartColors } from './colorPropertiesBase.js';
import defaultValues from '../objects/defaultValues';
import getStyleForProperty from '../process/getStyleForProperty';
import trueColor from '../util/trueColor';
import numbers from '../interpolation/numbers';
import colors from '../interpolation/colors';
import { onStartColors } from './colorPropertiesBase';
// Component Interpolation
// Component Properties
// supported formats
// 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+)
const supportedColors = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
const supportedColors = [
'color', 'backgroundColor', 'outlineColor',
'borderColor', 'borderTopColor', 'borderRightColor',
'borderBottomColor', 'borderLeftColor',
];
const defaultColors = {};
supportedColors.forEach((tweenProp) => {
@ -22,10 +25,22 @@ supportedColors.forEach((x) => {
colorsOnStart[x] = onStartColors;
});
/**
* Returns the current property computed style.
* @param {string} prop the property name
* @returns {string} property computed style
*/
function getColor(prop/* , value */) {
return getStyleForProperty(this.element, prop) || defaultValues[prop];
}
function prepareColor(prop, value) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {string} value the property value
* @returns {KUTE.colorObject} the property tween object
*/
function prepareColor(/* prop, */_, value) {
return trueColor(value);
}

23
src/components/colorPropertiesBase.js
View file

@ -1,6 +1,6 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
import colors from '../interpolation/colors.js';
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
import colors from '../interpolation/colors';
// Component Interpolation
// rgba1, rgba2, progress
@ -8,13 +8,22 @@ import colors from '../interpolation/colors.js';
// Component Properties
// supported formats
// 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+)
const supportedColors = ['color', 'backgroundColor', 'borderColor',
'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
const supportedColors = [
'color', 'backgroundColor', 'outlineColor',
'borderColor',
'borderTopColor', 'borderRightColor',
'borderBottomColor', 'borderLeftColor',
];
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function onStartColors(tweenProp) {
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
// eslint-disable-next-line no-param-reassign
elem.style[tweenProp] = colors(a, b, v);
};
}

34
src/components/crossBrowserMove.js
View file

@ -1,14 +1,17 @@
import KUTE from '../objects/kute.js';
import getInlineStyle from '../process/getInlineStyle.js';
import defaultValues from '../objects/defaultValues.js';
import trueProperty from '../util/trueProperty.js';
import numbers from '../interpolation/numbers.js';
import KEC from '../objects/kute';
import getInlineStyle from '../process/getInlineStyle';
import defaultValues from '../objects/defaultValues';
import trueProperty from '../util/trueProperty';
import numbers from '../interpolation/numbers';
// Component Const
const transformProperty = trueProperty('transform');
const supportTransform = transformProperty in document.body.style ? 1 : 0;
// Component Functions
/**
* Returns the property current style.
*/
function getComponentCurrentValue(/* tweenProp, value */) {
const currentTransform = getInlineStyle(this.element);
const { left } = this.element.style;
@ -25,25 +28,38 @@ function getComponentCurrentValue(/* tweenProp, value */) {
return [x, y];
}
function prepareComponentValue(tweenProp, value) {
/**
* Returns the property tween object.
* @param {string} _ property name
* @param {string} value property value
* @returns {number[]} the property tween object
*/
function prepareComponentValue(/* tweenProp */_, value) {
const x = Number.isFinite(value * 1) ? parseInt(value, 10) : parseInt(value[0], 10) || 0;
const y = parseInt(value[1], 10) || 0;
return [x, y];
}
/**
* Sets the property update function.
* @param {string} tweenProp the `path` property
*/
export function onStartComponent(tweenProp/* , value */) {
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
if (supportTransform) {
KUTE[tweenProp] = (elem, a, b, v) => {
KEC[tweenProp] = (elem, a, b, v) => {
/* eslint-disable-next-line no-param-reassign -- impossible to satisfy */
elem.style[transformProperty] = `translate(${numbers(a[0], b[0], v)}px,${numbers(a[1], b[1], v)}px)`;
};
} else {
KUTE[tweenProp] = (elem, a, b, v) => {
KEC[tweenProp] = (elem, a, b, v) => {
if (a[0] || b[0]) {
/* eslint-disable-next-line no-param-reassign -- impossible to satisfy */
elem.style.left = `${numbers(a[0], b[0], v)}px`;
}
if (a[1] || b[1]) {
/* eslint-disable-next-line no-param-reassign -- impossible to satisfy */
elem.style.top = `${numbers(a[1], b[1], v)}px`;
}
};

48
src/components/filterEffects.js
View file

@ -1,9 +1,9 @@
import getStyleForProperty from '../process/getStyleForProperty.js';
import defaultValues from '../objects/defaultValues.js';
import trueColor from '../util/trueColor.js';
import numbers from '../interpolation/numbers.js';
import colors from '../interpolation/colors.js';
import { dropShadow, onStartFilter } from './filterEffectsBase.js';
import getStyleForProperty from '../process/getStyleForProperty';
import defaultValues from '../objects/defaultValues';
import trueColor from '../util/trueColor';
import numbers from '../interpolation/numbers';
import colors from '../interpolation/colors';
import { dropshadow, onStartFilter } from './filterEffectsBase';
/* filterEffects = {
property: 'filter',
@ -14,10 +14,20 @@ import { dropShadow, onStartFilter } from './filterEffectsBase.js';
} */
// Component Util
/**
* Returns camelCase filter sub-property.
* @param {string} str source string
* @returns {string} camelCase property name
*/
function replaceDashNamespace(str) {
return str.replace('-r', 'R').replace('-s', 'S');
}
/**
* Returns `drop-shadow` sub-property object.
* @param {(string | number)[]} shadow and `Array` with `drop-shadow` parameters
* @returns {KUTE.filterList['dropShadow']} the expected `drop-shadow` values
*/
function parseDropShadow(shadow) {
let newShadow;
@ -36,6 +46,11 @@ function parseDropShadow(shadow) {
return newShadow;
}
/**
* Returns an array with current filter sub-properties values.
* @param {string} currentStyle the current filter computed style
* @returns {{[x: string]: number}} the filter tuple
*/
function parseFilterString(currentStyle) {
const result = {};
const fnReg = /(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g;
@ -60,6 +75,12 @@ function parseFilterString(currentStyle) {
}
// Component Functions
/**
* Returns the current property computed style.
* @param {string} tweenProp the property name
* @param {string} value the property value
* @returns {string} computed style for property
*/
function getFilter(tweenProp, value) {
const currentStyle = getStyleForProperty(this.element, tweenProp);
const filterObject = parseFilterString(currentStyle);
@ -74,7 +95,14 @@ function getFilter(tweenProp, value) {
return filterObject;
}
function prepareFilter(tweenProp, value) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {string} value the property name
* @returns {KUTE.filterList} the property tween object
*/
function prepareFilter(/* tweenProp, */_, value) {
const filterObject = {};
let fnp;
@ -108,6 +136,10 @@ function prepareFilter(tweenProp, value) {
return filterObject;
}
/**
* Adds missing sub-properties in `valuesEnd` from `valuesStart`.
* @param {string} tweenProp the property name
*/
function crossCheckFilter(tweenProp) {
if (this.valuesEnd[tweenProp]) {
Object.keys(this.valuesStart[tweenProp]).forEach((fn) => {
@ -158,7 +190,7 @@ const filterEffects = {
sepia: numbers,
invert: numbers,
hueRotate: numbers,
dropShadow: { numbers, colors, dropShadow },
dropShadow: { numbers, colors, dropshadow },
},
functions: filterFunctions,
Util: {

37
src/components/filterEffectsBase.js
View file

@ -1,30 +1,34 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
import colors from '../interpolation/colors.js';
/* filterEffects = {
property: 'filter',
subProperties: {},
defaultValue: {},
interpolators: {},
functions = { prepareStart, prepareProperty, onStart, crossCheck }
} */
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
import colors from '../interpolation/colors';
// Component Interpolation
export function dropShadow(a, b, v) {
/**
* Sets the `drop-shadow` sub-property update function.
* * disimbiguation `dropshadow` interpolation function and `dropShadow` property
* @param {string} tweenProp the property name
*/
export function dropshadow(a, b, v) {
const params = [];
const unit = 'px';
for (let i = 0; i < 3; i += 1) {
// eslint-disable-next-line no-bitwise
params[i] = ((numbers(a[i], b[i], v) * 100 >> 0) / 100) + unit;
}
return `drop-shadow(${params.concat(colors(a[3], b[3], v)).join(' ')})`;
}
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function onStartFilter(tweenProp) {
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
/* eslint-disable-next-line no-param-reassign -- impossible to satisfy */
elem.style[tweenProp] = (b.url ? `url(${b.url})` : '')
/* eslint-disable no-bitwise -- impossible to satisfy */
+ (a.opacity || b.opacity ? `opacity(${((numbers(a.opacity, b.opacity, v) * 100) >> 0) / 100}%)` : '')
+ (a.blur || b.blur ? `blur(${((numbers(a.blur, b.blur, v) * 100) >> 0) / 100}em)` : '')
+ (a.saturate || b.saturate ? `saturate(${((numbers(a.saturate, b.saturate, v) * 100) >> 0) / 100}%)` : '')
@ -34,7 +38,8 @@ export function onStartFilter(tweenProp) {
+ (a.sepia || b.sepia ? `sepia(${((numbers(a.sepia, b.sepia, v) * 100) >> 0) / 100}%)` : '')
+ (a.brightness || b.brightness ? `brightness(${((numbers(a.brightness, b.brightness, v) * 100) >> 0) / 100}%)` : '')
+ (a.contrast || b.contrast ? `contrast(${((numbers(a.contrast, b.contrast, v) * 100) >> 0) / 100}%)` : '')
+ (a.dropShadow || b.dropShadow ? dropShadow(a.dropShadow, b.dropShadow, v) : '');
+ (a.dropShadow || b.dropShadow ? dropshadow(a.dropShadow, b.dropShadow, v) : '');
/* eslint-enable no-bitwise -- impossible to satisfy */
};
}
}
@ -61,7 +66,7 @@ const baseFilter = {
sepia: numbers,
invert: numbers,
hueRotate: numbers,
dropShadow: { numbers, colors, dropShadow },
dropShadow: { numbers, colors, dropshadow },
},
functions: { onStart: onStartFilter },
};

37
src/components/htmlAttributes.js
View file

@ -1,10 +1,10 @@
import defaultValues from '../objects/defaultValues.js';
import onStart from '../objects/onStart.js';
import trueColor from '../util/trueColor.js';
import trueDimension from '../util/trueDimension.js';
import numbers from '../interpolation/numbers.js';
import colors from '../interpolation/colors.js';
import { attributes, onStartAttr } from './htmlAttributesBase.js';
import defaultValues from '../objects/defaultValues';
import onStart from '../objects/onStart';
import trueColor from '../util/trueColor';
import trueDimension from '../util/trueDimension';
import numbers from '../interpolation/numbers';
import colors from '../interpolation/colors';
import { attributes, onStartAttr } from './htmlAttributesBase';
// Component Name
const ComponentName = 'htmlAttributes';
@ -13,13 +13,25 @@ const ComponentName = 'htmlAttributes';
const svgColors = ['fill', 'stroke', 'stop-color'];
// Component Util
/**
* Returns non-camelcase property name.
* @param {string} a the camelcase property name
* @returns {string} the non-camelcase property name
*/
function replaceUppercase(a) { return a.replace(/[A-Z]/g, '-$&').toLowerCase(); }
// Component Functions
export function getAttr(tweenProp, value) {
/**
* Returns the current attribute value.
* @param {string} _ the property name
* @param {string} value the property value
* @returns {{[x:string]: string}} attribute value
*/
export function getAttr(/* tweenProp, */_, value) {
const attrStartValues = {};
Object.keys(value).forEach((attr) => {
// get the value for 'fill-opacity' not fillOpacity, also 'width' not the internal 'width_px'
// get the value for 'fill-opacity' not fillOpacity
// also 'width' not the internal 'width_px'
const attribute = replaceUppercase(attr).replace(/_+[a-z]+/, '');
const currentValue = this.element.getAttribute(attribute);
attrStartValues[attribute] = svgColors.includes(attribute)
@ -30,6 +42,12 @@ export function getAttr(tweenProp, value) {
return attrStartValues;
}
/**
* Returns the property tween object.
* @param {string} tweenProp the property name
* @param {string} attrObj the property value
* @returns {number} the property tween object
*/
export function prepareAttr(tweenProp, attrObj) { // attr (string),attrObj (object)
const attributesObject = {};
@ -49,6 +67,7 @@ export function prepareAttr(tweenProp, attrObj) { // attr (string),attrObj (obje
if (this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes)) {
attributes[tp] = (elem, oneAttr, a, b, v) => {
const _p = oneAttr.replace(suffix, '');
/* eslint no-bitwise: ["error", { "allow": [">>"] }] */
elem.setAttribute(_p, ((numbers(a.v, b.v, v) * 1000 >> 0) / 1000) + b.u);
};
}

28
src/components/htmlAttributesBase.js
View file

@ -1,6 +1,6 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
import colors from '../interpolation/colors.js';
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
import colors from '../interpolation/colors';
// Component Name
const ComponentName = 'baseHTMLAttributes';
@ -10,18 +10,30 @@ const attributes = {};
export { attributes };
export const onStartAttr = {
/**
* onStartAttr.attr
*
* Sets the sub-property update function.
* @param {string} tweenProp the property name
*/
attr(tweenProp) {
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (elem, vS, vE, v) => {
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
KEC[tweenProp] = (elem, vS, vE, v) => {
Object.keys(vE).forEach((oneAttr) => {
KUTE.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v);
KEC.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v);
});
};
}
},
/**
* onStartAttr.attributes
*
* Sets the update function for the property.
* @param {string} tweenProp the property name
*/
attributes(tweenProp) {
if (!KUTE[tweenProp] && this.valuesEnd.attr) {
KUTE[tweenProp] = attributes;
if (!KEC[tweenProp] && this.valuesEnd.attr) {
KEC[tweenProp] = attributes;
}
},
};

30
src/components/opacityProperty.js
View file

@ -1,20 +1,24 @@
import getStyleForProperty from '../process/getStyleForProperty.js';
import numbers from '../interpolation/numbers.js';
import { onStartOpacity } from './opacityPropertyBase.js';
/* opacityProperty = {
property: 'opacity',
defaultValue: 1,
interpolators: {numbers},
functions = { prepareStart, prepareProperty, onStart }
} */
import getStyleForProperty from '../process/getStyleForProperty';
import numbers from '../interpolation/numbers';
import { onStartOpacity } from './opacityPropertyBase';
// Component Functions
/**
* Returns the current property computed style.
* @param {string} tweenProp the property name
* @returns {string} computed style for property
*/
function getOpacity(tweenProp/* , value */) {
return getStyleForProperty(this.element, tweenProp);
}
function prepareOpacity(tweenProp, value) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {string} value the property value
* @returns {number} the property tween object
*/
function prepareOpacity(/* tweenProp, */_, value) {
return parseFloat(value); // opacity always FLOAT
}
@ -26,7 +30,7 @@ const opacityFunctions = {
};
// Full Component
const opacityProperty = {
const OpacityProperty = {
component: 'opacityProperty',
property: 'opacity',
defaultValue: 1,
@ -34,4 +38,4 @@ const opacityProperty = {
functions: opacityFunctions,
};
export default opacityProperty;
export default OpacityProperty;

18
src/components/opacityPropertyBase.js
View file

@ -1,5 +1,5 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
/* opacityProperty = {
property: 'opacity',
@ -9,17 +9,23 @@ import numbers from '../interpolation/numbers.js';
} */
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function onStartOpacity(tweenProp/* , value */) {
// opacity could be 0 sometimes, we need to check regardless
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (tweenProp in this.valuesEnd && !KEC[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
/* eslint-disable */
elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000;
/* eslint-enable */
};
}
}
// Base Component
const baseOpacity = {
const OpacityPropertyBase = {
component: 'baseOpacity',
property: 'opacity',
// defaultValue: 1,
@ -27,4 +33,4 @@ const baseOpacity = {
functions: { onStart: onStartOpacity },
};
export default baseOpacity;
export default OpacityPropertyBase;

23
src/components/scrollProperty.js
View file

@ -1,5 +1,4 @@
import supportPassive from 'shorter-js/src/boolean/supportPassive.js';
import numbers from '../interpolation/numbers.js';
import numbers from '../interpolation/numbers';
import {
scrollContainer,
@ -10,9 +9,13 @@ import {
getScrollTargets,
preventScroll,
toggleScrollEvents,
} from './scrollPropertyBase.js';
} from './scrollPropertyBase';
// Component Functions
/**
* Returns the current property computed style.
* @returns {number} computed style for property
*/
function getScroll() {
this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window)
? scrollContainer : this.element;
@ -22,7 +25,13 @@ function getScroll() {
: this.element.scrollTop;
}
function prepareScroll(prop, value) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {string} value the property value
* @returns {number} the property tween object
*/
function prepareScroll(/* prop, */_, value) {
return parseInt(value, 10);
}
@ -35,7 +44,7 @@ const scrollFunctions = {
};
// Full Component
const scrollProperty = {
const ScrollProperty = {
component: 'scrollProperty',
property: 'scroll',
defaultValue: 0,
@ -43,8 +52,8 @@ const scrollProperty = {
functions: scrollFunctions,
// export stuff to global
Util: {
preventScroll, scrollIn, scrollOut, getScrollTargets, toggleScrollEvents, supportPassive,
preventScroll, scrollIn, scrollOut, getScrollTargets, toggleScrollEvents,
},
};
export default scrollProperty;
export default ScrollProperty;

59
src/components/scrollPropertyBase.js
View file

@ -1,8 +1,8 @@
import supportPassive from 'shorter-js/src/boolean/supportPassive.js';
import mouseHoverEvents from 'shorter-js/src/strings/mouseHoverEvents.js';
import supportTouch from 'shorter-js/src/boolean/supportTouch.js';
import numbers from '../interpolation/numbers.js';
import KUTE from '../objects/kute.js';
import passiveHandler from 'shorter-js/src/misc/passiveHandler';
import mouseHoverEvents from 'shorter-js/src/strings/mouseHoverEvents';
import supportTouch from 'shorter-js/src/boolean/supportTouch';
import numbers from '../interpolation/numbers';
import KEC from '../objects/kute';
// Component Util
// events preventing scroll
@ -14,22 +14,36 @@ export const scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAge
? document.body
: document.documentElement;
// scroll event options
// it's important to stop propagating when animating scroll
const passiveHandler = supportPassive ? { passive: false } : false;
// prevent mousewheel or touch events while tweening scroll
/**
* Prevent further scroll events until scroll animation is over.
* @param {Event} e event object
*/
export function preventScroll(e) {
if (this.scrolling) e.preventDefault();
}
/**
* Returns the scroll element / target.
* @returns {{el: Element, st: Element}}
*/
export function getScrollTargets() {
const el = this.element;
return el === scrollContainer ? { el: document, st: document.body } : { el, st: el };
}
/**
* Toggles scroll prevention callback on scroll events.
* @param {string} action addEventListener / removeEventListener
* @param {Element} element target
*/
export function toggleScrollEvents(action, element) {
element[action](mouseHoverEvents[0], preventScroll, passiveHandler);
element[action](touchOrWheel, preventScroll, passiveHandler);
}
/**
* Action performed before scroll animation start.
*/
export function scrollIn() {
const targets = getScrollTargets.call(this);
@ -39,6 +53,9 @@ export function scrollIn() {
targets.st.style.pointerEvents = 'none';
}
}
/**
* Action performed when scroll animation ends.
*/
export function scrollOut() { // prevent scroll when tweening scroll
const targets = getScrollTargets.call(this);
@ -50,23 +67,35 @@ export function scrollOut() { // prevent scroll when tweening scroll
}
// Component Functions
/**
* * Sets the scroll target.
* * Adds the scroll prevention event listener.
* * Sets the property update function.
* @param {string} tweenProp the property name
*/
export function onStartScroll(tweenProp) {
// checking 0 will NOT add the render function
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
if (tweenProp in this.valuesEnd && !KEC[tweenProp]) {
this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window)
? scrollContainer : this.element;
scrollIn.call(this);
KUTE[tweenProp] = (elem, a, b, v) => {
KEC[tweenProp] = (elem, a, b, v) => {
/* eslint-disable */
elem.scrollTop = (numbers(a, b, v)) >> 0;
/* eslint-enable */
};
}
}
/**
* Removes the scroll prevention event listener.
*/
export function onCompleteScroll(/* tweenProp */) {
scrollOut.call(this);
}
// Base Component
const baseScroll = {
const ScrollPropertyBase = {
component: 'baseScroll',
property: 'scroll',
// defaultValue: 0,
@ -77,8 +106,8 @@ const baseScroll = {
},
// unfortunatelly scroll needs all them no matter the packaging
Util: {
preventScroll, scrollIn, scrollOut, getScrollTargets, supportPassive,
preventScroll, scrollIn, scrollOut, getScrollTargets,
},
};
export default baseScroll;
export default ScrollPropertyBase;

43
src/components/shadowProperties.js
View file

@ -1,19 +1,25 @@
import defaultValues from '../objects/defaultValues.js';
import getStyleForProperty from '../process/getStyleForProperty.js';
import trueColor from '../util/trueColor.js';
import numbers from '../interpolation/numbers.js';
import colors from '../interpolation/colors.js';
import { onStartShadow } from './shadowPropertiesBase.js';
import defaultValues from '../objects/defaultValues';
import getStyleForProperty from '../process/getStyleForProperty';
import trueColor from '../util/trueColor';
import numbers from '../interpolation/numbers';
import colors from '../interpolation/colors';
import { onStartShadow } from './shadowPropertiesBase';
// Component Properties
const shadowProps = ['boxShadow', 'textShadow'];
// Component Util
// box-shadow: none | h-shadow v-shadow blur spread color inset|initial|inherit
// text-shadow: none | offset-x offset-y blur-radius color |initial|inherit
// utility function to process values accordingly
// numbers must be floats and color must be rgb object
/**
* Return the box-shadow / text-shadow tween object.
* * box-shadow: none | h-shadow v-shadow blur spread color inset|initial|inherit
* * text-shadow: none | offset-x offset-y blur-radius color |initial|inherit
* * numbers must be floats and color must be rgb object
*
* @param {(number | string)[]} shadow an `Array` with shadow parameters
* @param {string} tweenProp the property name
* @returns {KUTE.shadowObject} the property tween object
*/
function processShadowArray(shadow, tweenProp) {
let newShadow;
@ -45,12 +51,17 @@ function processShadowArray(shadow, tweenProp) {
newShadow = tweenProp === 'boxShadow'
? newShadow
: newShadow.filter((x, i) => [0, 1, 2, 4].includes(i));
: newShadow.filter((_, i) => [0, 1, 2, 4].includes(i));
return newShadow;
}
// Component Functions
/**
* Returns the current property computed style.
* @param {string} tweenProp the property name
* @returns {string} computed style for property
*/
export function getShadow(tweenProp/* , value */) {
const cssShadow = getStyleForProperty(this.element, tweenProp);
// '0px 0px 0px 0px rgb(0,0,0)'
@ -59,6 +70,12 @@ export function getShadow(tweenProp/* , value */) {
: cssShadow;
}
/**
* Returns the property tween object.
* @param {string} tweenProp the property name
* @param {string} propValue the property value
* @returns {KUTE.shadowObject} the property tween object
*/
export function prepareShadow(tweenProp, propValue) {
// [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
// parseProperty for boxShadow, builds basic structure with ready to tween values
@ -95,7 +112,7 @@ const shadowFunctions = {
};
// Component Full
const shadowProperties = {
const ShadowProperties = {
component: 'shadowProperties',
properties: shadowProps,
defaultValues: {
@ -107,4 +124,4 @@ const shadowProperties = {
Util: { processShadowArray, trueColor },
};
export default shadowProperties;
export default ShadowProperties;

25
src/components/shadowPropertiesBase.js
View file

@ -1,14 +1,18 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
import colors from '../interpolation/colors.js';
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
import colors from '../interpolation/colors';
// Component Properties
const shadowProps = ['boxShadow', 'textShadow'];
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function onStartShadow(tweenProp) {
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
// let's start with the numbers | set unit | also determine inset
const params = [];
const unit = 'px';
@ -18,9 +22,11 @@ export function onStartShadow(tweenProp) {
const inset = (a[5] && a[5] !== 'none') || (b[5] && b[5] !== 'none') ? ' inset' : false;
for (let i = 0; i < sl; i += 1) {
/* eslint no-bitwise: ["error", { "allow": [">>"] }] */
params.push(((numbers(a[i], b[i], v) * 1000 >> 0) / 1000) + unit);
}
// the final piece of the puzzle, the DOM update
// eslint-disable-next-line no-param-reassign -- impossible to satisfy
elem.style[tweenProp] = inset
? colors(colA, colB, v) + params.join(' ') + inset
: colors(colA, colB, v) + params.join(' ');
@ -31,15 +37,10 @@ const shadowPropOnStart = {};
shadowProps.forEach((x) => { shadowPropOnStart[x] = onStartShadow; });
// Component Base
const baseShadow = {
const ShadowPropertiesBase = {
component: 'baseShadow',
// properties: shadowProps,
// defaultValues: {
// boxShadow :'0px 0px 0px 0px rgb(0,0,0)',
// textShadow: '0px 0px 0px 0px rgb(0,0,0)'
// },
Interpolate: { numbers, colors },
functions: { onStart: shadowPropOnStart },
};
export default baseShadow;
export default ShadowPropertiesBase;

98
src/components/svgCubicMorph.js
View file

@ -1,31 +1,31 @@
import parsePathString from 'svg-path-commander/src/process/parsePathString.js';
import pathToAbsolute from 'svg-path-commander/src/convert/pathToAbsolute.js';
import pathToCurve from 'svg-path-commander/src/convert/pathToCurve.js';
import pathToString from 'svg-path-commander/src/convert/pathToString.js';
import reverseCurve from 'svg-path-commander/src/process/reverseCurve.js';
import getDrawDirection from 'svg-path-commander/src/util/getDrawDirection.js';
import clonePath from 'svg-path-commander/src/process/clonePath.js';
import splitCubic from 'svg-path-commander/src/process/splitCubic.js';
import splitPath from 'svg-path-commander/src/process/splitPath.js';
import getSegCubicLength from 'svg-path-commander/src/util/getSegCubicLength.js';
import distanceSquareRoot from 'svg-path-commander/src/math/distanceSquareRoot.js';
import { onStartCubicMorph } from './svgCubicMorphBase.js';
import numbers from '../interpolation/numbers.js';
import selector from '../util/selector.js';
import parsePathString from 'svg-path-commander/src/parser/parsePathString';
import pathToAbsolute from 'svg-path-commander/src/convert/pathToAbsolute';
import pathToCurve from 'svg-path-commander/src/convert/pathToCurve';
import pathToString from 'svg-path-commander/src/convert/pathToString';
import reverseCurve from 'svg-path-commander/src/process/reverseCurve';
import getDrawDirection from 'svg-path-commander/src/util/getDrawDirection';
import clonePath from 'svg-path-commander/src/process/clonePath';
import splitCubic from 'svg-path-commander/src/process/splitCubic';
import splitPath from 'svg-path-commander/src/process/splitPath';
import fixPath from 'svg-path-commander/src/process/fixPath';
import getSegCubicLength from 'svg-path-commander/src/util/getSegCubicLength';
import distanceSquareRoot from 'svg-path-commander/src/math/distanceSquareRoot';
/* SVGMorph = {
property: 'path',
defaultValue: [],
interpolators: {numbers},
functions = { prepareStart, prepareProperty, onStart, crossCheck }
} */
import { onStartCubicMorph } from './svgCubicMorphBase';
import numbers from '../interpolation/numbers';
import selector from '../util/selector';
// Component Util
function getCurveArray(pathString) {
return pathToCurve(splitPath(pathToString(pathToAbsolute(pathString)))[0])
/**
* Returns first `pathArray` from multi-paths path.
* @param {SVGPathCommander.pathArray | string} source the source `pathArray` or string
* @returns {KUTE.curveSpecs[]} an `Array` with a custom tuple for `equalizeSegments`
*/
function getCurveArray(source) {
return pathToCurve(splitPath(source)[0])
.map((segment, i, pathArray) => {
const segmentData = i && pathArray[i - 1].slice(-2).concat(segment.slice(1));
const curveLength = i ? getSegCubicLength.apply(0, segmentData) : 0;
const segmentData = i && [...pathArray[i - 1].slice(-2), ...segment.slice(1)];
const curveLength = i ? getSegCubicLength(...segmentData) : 0;
let subsegs;
if (i) {
@ -43,6 +43,13 @@ function getCurveArray(pathString) {
});
}
/**
* Returns two `curveArray` with same amount of segments.
* @param {SVGPathCommander.curveArray} path1 the first `curveArray`
* @param {SVGPathCommander.curveArray} path2 the second `curveArray`
* @param {number} TL the maximum `curveArray` length
* @returns {SVGPathCommander.curveArray[]} equalized segments
*/
function equalizeSegments(path1, path2, TL) {
const c1 = getCurveArray(path1);
const c2 = getCurveArray(path2);
@ -70,23 +77,34 @@ function equalizeSegments(path1, path2, TL) {
: equalizeSegments(result[0], result[1], tl);
}
/**
* Returns all possible path rotations for `curveArray`.
* @param {SVGPathCommander.curveArray} a the source `curveArray`
* @returns {SVGPathCommander.curveArray[]} all rotations for source
*/
function getRotations(a) {
const segCount = a.length;
const pointCount = segCount - 1;
return a.map((f, idx) => a.map((p, i) => {
return a.map((_, idx) => a.map((__, i) => {
let oldSegIdx = idx + i;
let seg;
if (i === 0 || (a[oldSegIdx] && a[oldSegIdx][0] === 'M')) {
seg = a[oldSegIdx];
return ['M'].concat(seg.slice(-2));
return ['M', ...seg.slice(-2)];
}
if (oldSegIdx >= segCount) oldSegIdx -= pointCount;
return a[oldSegIdx];
}));
}
/**
* Returns the `curveArray` rotation for the best morphing animation.
* @param {SVGPathCommander.curveArray} a the target `curveArray`
* @param {SVGPathCommander.curveArray} b the reference `curveArray`
* @returns {SVGPathCommander.curveArray} the best `a` rotation
*/
function getRotatedCurve(a, b) {
const segCount = a.length - 1;
const lineLengths = [];
@ -94,8 +112,8 @@ function getRotatedCurve(a, b) {
let sumLensSqrd = 0;
const rotations = getRotations(a);
rotations.forEach((r, i) => {
a.slice(1).forEach((s, j) => {
rotations.forEach((_, i) => {
a.slice(1).forEach((__, j) => {
sumLensSqrd += distanceSquareRoot(a[(i + j) % segCount].slice(-2), b[j % segCount].slice(-2));
});
lineLengths[i] = sumLensSqrd;
@ -108,10 +126,23 @@ function getRotatedCurve(a, b) {
}
// Component Functions
/**
* Returns the current `d` attribute value.
* @returns {string}
*/
function getCubicMorph(/* tweenProp, value */) {
return this.element.getAttribute('d');
}
function prepareCubicMorph(tweenProp, value) {
/**
* Returns the property tween object.
* @see KUTE.curveObject
*
* @param {string} _ is the `path` property name, not needed
* @param {string | KUTE.curveObject} value the `path` property value
* @returns {KUTE.curveObject}
*/
function prepareCubicMorph(/* tweenProp, */_, value) {
// get path d attribute or create a path from string value
const pathObject = {};
// remove newlines, they break some JSON strings
@ -135,7 +166,12 @@ function prepareCubicMorph(tweenProp, value) {
}
return pathObject;
}
function crossCheckCubicMorph(tweenProp) {
/**
* Enables the `to()` method by preparing the tween object in advance.
* @param {string} tweenProp is `path` tween property, but it's not needed
*/
function crossCheckCubicMorph(tweenProp/** , value */) {
if (this.valuesEnd[tweenProp]) {
const pathCurve1 = this.valuesStart[tweenProp].curve;
const pathCurve2 = this.valuesEnd[tweenProp].curve;
@ -183,6 +219,8 @@ const svgCubicMorph = {
clonePath,
getDrawDirection,
splitCubic,
splitPath,
fixPath,
getCurveArray,
},
};

23
src/components/svgCubicMorphBase.js
View file

@ -1,24 +1,23 @@
import pathToString from 'svg-path-commander/src/convert/pathToString.js';
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
/* SVGMorph = {
property: 'path',
defaultValue: [],
interpolators: {numbers} },
functions = { prepareStart, prepareProperty, onStart, crossCheck }
} */
import pathToString from 'svg-path-commander/src/convert/pathToString';
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the `path` property
*/
export function onStartCubicMorph(tweenProp) {
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function updateMorph(elem, a, b, v) {
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
KEC[tweenProp] = function updateMorph(elem, a, b, v) {
const curve = [];
const path1 = a.curve;
const path2 = b.curve;
for (let i = 0, l = path2.length; i < l; i += 1) { // each path command
curve.push([path1[i][0]]);
for (let j = 1, l2 = path1[i].length; j < l2; j += 1) { // each command coordinate
/* eslint-disable-next-line no-bitwise -- impossible to satisfy */
curve[i].push((numbers(path1[i][j], path2[i][j], v) * 1000 >> 0) / 1000);
}
}

90
src/components/svgDraw.js
View file

@ -1,29 +1,36 @@
import getStyleForProperty from '../process/getStyleForProperty.js';
import numbers from '../interpolation/numbers.js';
import { onStartDraw } from './svgDrawBase.js';
/* svgDraw = {
property: 'draw',
defaultValue,
Interpolate: {numbers} },
functions = { prepareStart, prepareProperty, onStart }
} */
import getStyleForProperty from '../process/getStyleForProperty';
import numbers from '../interpolation/numbers';
import { onStartDraw } from './svgDrawBase';
// Component Util
/**
* Convert a `<path>` length percent value to absolute.
* @param {string} v raw value
* @param {number} l length value
* @returns {number} the absolute value
*/
function percent(v, l) {
return (parseFloat(v) / 100) * l;
}
// http://stackoverflow.com/a/30376660
// returns the length of a Rect
/**
* Returns the `<rect>` length.
* It doesn't compute `rx` and / or `ry` of the element.
* @see http://stackoverflow.com/a/30376660
* @param {SVGRectElement} el target element
* @returns {number} the `<rect>` length
*/
function getRectLength(el) {
const w = el.getAttribute('width');
const h = el.getAttribute('height');
return (w * 2) + (h * 2);
}
// getPolygonLength / getPolylineLength
// returns the length of the Polygon / Polyline
/**
* Returns the `<polyline>` / `<polygon>` length.
* @param {SVGPolylineElement | SVGPolygonElement} el target element
* @returns {number} the element length
*/
function getPolyLength(el) {
const points = el.getAttribute('points').split(' ');
@ -54,7 +61,11 @@ function getPolyLength(el) {
return len;
}
// return the length of the line
/**
* Returns the `<line>` length.
* @param {SVGLineElement} el target element
* @returns {number} the element length
*/
function getLineLength(el) {
const x1 = el.getAttribute('x1');
const x2 = el.getAttribute('x2');
@ -63,13 +74,22 @@ function getLineLength(el) {
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}
// return the length of the circle
/**
* Returns the `<circle>` length.
* @param {SVGCircleElement} el target element
* @returns {number} the element length
*/
function getCircleLength(el) {
const r = el.getAttribute('r');
return 2 * Math.PI * r;
}
// returns the length of an ellipse
/**
* Returns the `<ellipse>` length.
* @param {SVGEllipseElement} el target element
* @returns {number} the element length
*/
function getEllipseLength(el) {
const rx = el.getAttribute('rx');
const ry = el.getAttribute('ry');
@ -78,7 +98,11 @@ function getEllipseLength(el) {
return ((Math.sqrt(0.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2;
}
// returns the result of any of the below functions
/**
* Returns the shape length.
* @param {SVGPathCommander.shapeTypes} el target element
* @returns {number} the element length
*/
function getTotalLength(el) {
if (el.tagName === 'rect') {
return getRectLength(el);
@ -95,6 +119,12 @@ function getTotalLength(el) {
return 0;
}
/**
* Returns the property tween object.
* @param {SVGPathCommander.shapeTypes} element the target element
* @param {string | KUTE.drawObject} value the property value
* @returns {KUTE.drawObject} the property tween object
*/
function getDraw(element, value) {
const length = /path|glyph/.test(element.tagName)
? element.getTotalLength()
@ -104,7 +134,7 @@ function getDraw(element, value) {
let dasharray;
let offset;
if (value instanceof Object) {
if (value instanceof Object && Object.keys(value).every((v) => ['s', 'e', 'l'].includes(v))) {
return value;
} if (typeof value === 'string') {
const v = value.split(/,|\s/);
@ -120,17 +150,33 @@ function getDraw(element, value) {
return { s: start, e: end, l: length };
}
/**
* Reset CSS properties associated with the `draw` property.
* @param {SVGPathCommander.shapeTypes} element target
*/
function resetDraw(elem) {
/* eslint-disable no-param-reassign -- impossible to satisfy */
elem.style.strokeDashoffset = '';
elem.style.strokeDasharray = '';
/* eslint-disable no-param-reassign -- impossible to satisfy */
}
// Component Functions
/**
* Returns the property tween object.
* @returns {KUTE.drawObject} the property tween object
*/
function getDrawValue(/* prop, value */) {
return getDraw(this.element);
}
function prepareDraw(a, o) {
return getDraw(this.element, o);
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {string | KUTE.drawObject} value the property value
* @returns {KUTE.drawObject} the property tween object
*/
function prepareDraw(_, value) {
return getDraw(this.element, value);
}
// All Component Functions
@ -141,7 +187,7 @@ const svgDrawFunctions = {
};
// Component Full
const svgDraw = {
const SvgDrawProperty = {
component: 'svgDraw',
property: 'draw',
defaultValue: '0% 0%',
@ -161,4 +207,4 @@ const svgDraw = {
},
};
export default svgDraw;
export default SvgDrawProperty;

28
src/components/svgDrawBase.js
View file

@ -1,35 +1,35 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
/* svgDraw = {
property: 'draw',
defaultValue,
Interpolate: {numbers} },
functions = { prepareStart, prepareProperty, onStart }
} */
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function onStartDraw(tweenProp) {
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (tweenProp in this.valuesEnd && !KEC[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
/* eslint-disable no-bitwise -- impossible to satisfy */
const pathLength = (a.l * 100 >> 0) / 100;
const start = (numbers(a.s, b.s, v) * 100 >> 0) / 100;
const end = (numbers(a.e, b.e, v) * 100 >> 0) / 100;
const offset = 0 - start;
const dashOne = end + offset;
// eslint-disable-next-line no-param-reassign -- impossible to satisfy
elem.style.strokeDashoffset = `${offset}px`;
// eslint-disable-next-line no-param-reassign -- impossible to satisfy
elem.style.strokeDasharray = `${((dashOne < 1 ? 0 : dashOne) * 100 >> 0) / 100}px, ${pathLength}px`;
/* eslint-disable no-bitwise -- impossible to satisfy */
};
}
}
// Component Base
const baseSVGDraw = {
const SvgDrawBase = {
component: 'baseSVGDraw',
property: 'draw',
Interpolate: { numbers },
functions: { onStart: onStartDraw },
};
export default baseSVGDraw;
export default SvgDrawBase;

263
src/components/svgMorph.js
View file

@ -1,46 +1,45 @@
import pathToCurve from 'svg-path-commander/src/convert/pathToCurve.js';
import pathToString from 'svg-path-commander/src/convert/pathToString.js';
import normalizePath from 'svg-path-commander/src/process/normalizePath.js';
import splitPath from 'svg-path-commander/src/process/splitPath.js';
import roundPath from 'svg-path-commander/src/process/roundPath.js';
import invalidPathValue from 'svg-path-commander/src/util/invalidPathValue.js';
import getPathLength from 'svg-path-commander/src/util/getPathLength.js';
import getPointAtLength from 'svg-path-commander/src/util/getPointAtLength.js';
import getDrawDirection from 'svg-path-commander/src/util/getDrawDirection.js';
import epsilon from 'svg-path-commander/src/math/epsilon.js';
import midPoint from 'svg-path-commander/src/math/midPoint.js';
import distanceSquareRoot from 'svg-path-commander/src/math/distanceSquareRoot.js';
import { onStartSVGMorph } from './svgMorphBase.js';
import coords from '../interpolation/coords.js';
import defaultOptions from '../objects/defaultOptions.js';
import selector from '../util/selector.js';
/* SVGMorph = {
property: 'path',
defaultValue: [],
interpolators: {numbers,coords},
functions = { prepareStart, prepareProperty, onStart, crossCheck }
} */
// Component Interpolation
// function function(array1, array2, length, progress)
import pathToCurve from 'svg-path-commander/src/convert/pathToCurve';
import pathToString from 'svg-path-commander/src/convert/pathToString';
import normalizePath from 'svg-path-commander/src/process/normalizePath';
import splitPath from 'svg-path-commander/src/process/splitPath';
import roundPath from 'svg-path-commander/src/process/roundPath';
import invalidPathValue from 'svg-path-commander/src/parser/invalidPathValue';
import getPathLength from 'svg-path-commander/src/util/getPathLength';
import getPointAtLength from 'svg-path-commander/src/util/getPointAtLength';
import getDrawDirection from 'svg-path-commander/src/util/getDrawDirection';
import epsilon from 'svg-path-commander/src/math/epsilon';
import midPoint from 'svg-path-commander/src/math/midPoint';
import distanceSquareRoot from 'svg-path-commander/src/math/distanceSquareRoot';
import { onStartSVGMorph } from './svgMorphBase';
import coords from '../interpolation/coords';
import defaultOptions from '../objects/defaultOptions';
import selector from '../util/selector';
// Component Util
// original script flubber
// https://github.com/veltman/flubber
function polygonLength(ring) {
return ring.reduce((length, point, i) => (i
? length + distanceSquareRoot(ring[i - 1], point)
/**
* Returns polygon length.
* @param {KUTE.polygonMorph} polygon target polygon
* @returns {number} length
*/
function polygonLength(polygon) {
return polygon.reduce((length, point, i) => (i
? length + distanceSquareRoot(polygon[i - 1], point)
: 0), 0);
}
/**
* Returns an existing polygin and its length or false if not polygon.
* @param {SVGPathCommander.pathArray} pathArray target polygon
* @returns {KUTE.exactRing} length
*/
function exactRing(pathArray) {
const ring = [];
const polygon = [];
const pathlen = pathArray.length;
let segment = [];
let pathCommand = '';
let pathLength = 0;
if (!pathArray.length || pathArray[0][0] !== 'M') {
return false;
@ -52,54 +51,68 @@ function exactRing(pathArray) {
if ((pathCommand === 'M' && i) || pathCommand === 'Z') {
break; // !!
} else if ('ML'.indexOf(pathCommand) > -1) {
ring.push([segment[1], segment[2]]);
} else if ('ML'.includes(pathCommand)) {
polygon.push([segment[1], segment[2]]);
} else {
return false;
}
}
pathLength = polygonLength(ring);
return pathlen ? { ring, pathLength } : false;
return pathlen ? { polygon } : false;
}
function approximateRing(parsed, maxSegmentLength) {
/**
* Returns polygon length.
* @param {SVGPathCommander.pathArray} parsed target polygon
* @param {number} maxLength the maximum segment length
* @returns {KUTE.exactRing} length
*/
function approximatePolygon(parsed, maxLength) {
const ringPath = splitPath(pathToString(parsed))[0];
const curvePath = pathToCurve(ringPath, 4);
const curvePath = pathToCurve(ringPath);
const pathLength = getPathLength(curvePath);
const ring = [];
const polygon = [];
let numPoints = 3;
let point;
if (maxSegmentLength && !Number.isNaN(maxSegmentLength) && +maxSegmentLength > 0) {
numPoints = Math.max(numPoints, Math.ceil(pathLength / maxSegmentLength));
if (maxLength && !Number.isNaN(maxLength) && +maxLength > 0) {
numPoints = Math.max(numPoints, Math.ceil(pathLength / maxLength));
}
for (let i = 0; i < numPoints; i += 1) {
point = getPointAtLength(curvePath, (pathLength * i) / numPoints);
ring.push([point.x, point.y]);
polygon.push([point.x, point.y]);
}
// Make all rings clockwise
if (!getDrawDirection(curvePath)) {
ring.reverse();
polygon.reverse();
}
return {
pathLength,
ring,
polygon,
skipBisect: true,
};
}
function pathStringToRing(str, maxSegmentLength) {
const parsed = normalizePath(str, 0);
return exactRing(parsed) || approximateRing(parsed, maxSegmentLength);
/**
* Parses a path string and returns a polygon array.
* @param {string} str path string
* @param {number} maxLength maximum amount of points
* @returns {KUTE.exactRing} the polygon array we need
*/
function pathStringToPolygon(str, maxLength) {
const parsed = normalizePath(str);
return exactRing(parsed) || approximatePolygon(parsed, maxLength);
}
function rotateRing(ring, vs) {
const len = ring.length;
/**
* Rotates a polygon to better match its pair.
* @param {KUTE.polygonMorph} polygon the target polygon
* @param {KUTE.polygonMorph} vs the reference polygon
*/
function rotatePolygon(polygon, vs) {
const len = polygon.length;
let min = Infinity;
let bestOffset;
let sumOfSquares = 0;
@ -110,13 +123,9 @@ function rotateRing(ring, vs) {
for (let offset = 0; offset < len; offset += 1) {
sumOfSquares = 0;
// vs.forEach((p, i) => {
// const d = distanceSquareRoot(ring[(offset + i) % len], p);
// sumOfSquares += d * d;
// });
for (let i = 0; i < vs.length; i += 1) {
p = vs[i];
d = distanceSquareRoot(ring[(offset + i) % len], p);
d = distanceSquareRoot(polygon[(offset + i) % len], p);
sumOfSquares += d * d;
}
@ -127,15 +136,19 @@ function rotateRing(ring, vs) {
}
if (bestOffset) {
spliced = ring.splice(0, bestOffset);
ring.splice(ring.length, 0, ...spliced);
spliced = polygon.splice(0, bestOffset);
polygon.splice(polygon.length, 0, ...spliced);
}
}
function addPoints(ring, numPoints) {
const desiredLength = ring.length + numPoints;
// const step = ring.pathLength / numPoints;
const step = polygonLength(ring) / numPoints;
/**
* Sample additional points for a polygon to better match its pair.
* @param {KUTE.polygonObject} polygon the target polygon
* @param {number} numPoints the amount of points needed
*/
function addPoints(polygon, numPoints) {
const desiredLength = polygon.length + numPoints;
const step = polygonLength(polygon) / numPoints;
let i = 0;
let cursor = 0;
@ -144,14 +157,14 @@ function addPoints(ring, numPoints) {
let b;
let segment;
while (ring.length < desiredLength) {
a = ring[i];
b = ring[(i + 1) % ring.length];
while (polygon.length < desiredLength) {
a = polygon[i];
b = polygon[(i + 1) % polygon.length];
segment = distanceSquareRoot(a, b);
if (insertAt <= cursor + segment) {
ring.splice(i + 1, 0, segment
polygon.splice(i + 1, 0, segment
? midPoint(a, b, (insertAt - cursor) / segment)
: a.slice(0));
insertAt += step;
@ -162,48 +175,62 @@ function addPoints(ring, numPoints) {
}
}
function bisect(ring, maxSegmentLength = Infinity) {
/**
* Split segments of a polygon until it reaches a certain
* amount of points.
* @param {number[][]} polygon the target polygon
* @param {number} maxSegmentLength the maximum amount of points
*/
function bisect(polygon, maxSegmentLength = Infinity) {
let a = [];
let b = [];
for (let i = 0; i < ring.length; i += 1) {
a = ring[i];
b = i === ring.length - 1 ? ring[0] : ring[i + 1];
for (let i = 0; i < polygon.length; i += 1) {
a = polygon[i];
b = i === polygon.length - 1 ? polygon[0] : polygon[i + 1];
// Could splice the whole set for a segment instead, but a bit messy
while (distanceSquareRoot(a, b) > maxSegmentLength) {
b = midPoint(a, b, 0.5);
ring.splice(i + 1, 0, b);
polygon.splice(i + 1, 0, b);
}
}
}
function validRing(ring) {
return Array.isArray(ring)
&& ring.every((point) => Array.isArray(point)
/**
* Checks the validity of a polygon.
* @param {KUTE.polygonMorph} polygon the target polygon
* @returns {boolean} the result of the check
*/
function validPolygon(polygon) {
return Array.isArray(polygon)
&& polygon.every((point) => Array.isArray(point)
&& point.length === 2
&& !Number.isNaN(point[0])
&& !Number.isNaN(point[1]));
}
function normalizeRing(input, maxSegmentLength) {
/**
* Returns a new polygon and its length from string or another `Array`.
* @param {KUTE.polygonMorph | string} input the target polygon
* @param {number} maxSegmentLength the maximum amount of points
* @returns {KUTE.polygonMorph} normalized polygon
*/
function getPolygon(input, maxSegmentLength) {
let skipBisect;
let pathLength;
let ring = input;
let polygon;
if (typeof (ring) === 'string') {
const converted = pathStringToRing(ring, maxSegmentLength);
ring = converted.ring;
skipBisect = converted.skipBisect;
pathLength = converted.pathLength;
} else if (!Array.isArray(ring)) {
throw Error(`${invalidPathValue}: ${ring}`);
if (typeof (input) === 'string') {
const converted = pathStringToPolygon(input, maxSegmentLength);
({ polygon, skipBisect } = converted);
} else if (!Array.isArray(input)) {
throw Error(`${invalidPathValue}: ${input}`);
}
const points = ring.slice(0);
points.pathLength = pathLength;
/** @type {KUTE.polygonMorph} */
const points = [...polygon];
if (!validRing(points)) {
if (!validPolygon(points)) {
throw Error(`${invalidPathValue}: ${points}`);
}
@ -221,39 +248,56 @@ function normalizeRing(input, maxSegmentLength) {
return points;
}
function getInterpolationPoints(pathArray1, pathArray2, precision) {
/**
* Returns two new polygons ready to tween.
* @param {string} path1 the first path string
* @param {string} path2 the second path string
* @param {number} precision the morphPrecision option value
* @returns {KUTE.polygonMorph[]} the two polygons
*/
function getInterpolationPoints(path1, path2, precision) {
const morphPrecision = precision || defaultOptions.morphPrecision;
const fromRing = normalizeRing(pathArray1, morphPrecision);
const toRing = normalizeRing(pathArray2, morphPrecision);
const fromRing = getPolygon(path1, morphPrecision);
const toRing = getPolygon(path2, morphPrecision);
const diff = fromRing.length - toRing.length;
addPoints(fromRing, diff < 0 ? diff * -1 : 0);
addPoints(toRing, diff > 0 ? diff : 0);
rotateRing(fromRing, toRing);
rotatePolygon(fromRing, toRing);
return [roundPath(fromRing), roundPath(toRing)];
}
// Component functions
/**
* Returns the current `d` attribute value.
* @returns {string} the `d` attribute value
*/
function getSVGMorph(/* tweenProp */) {
return this.element.getAttribute('d');
}
function prepareSVGMorph(tweenProp, value) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {string | KUTE.polygonObject} value the property value
* @returns {KUTE.polygonObject} the property tween object
*/
function prepareSVGMorph(/* tweenProp */_, value) {
const pathObject = {};
// remove newlines, they brake JSON strings sometimes
const pathReg = new RegExp('\\n', 'ig');
let elem = null;
if (value instanceof SVGElement) {
if (value instanceof SVGPathElement) {
elem = value;
} else if (/^\.|^#/.test(value)) {
elem = selector(value);
}
// first make sure we return pre-processed values
if (typeof (value) === 'object' && value.pathArray) {
if (typeof (value) === 'object' && value.polygon) {
return value;
} if (elem && ['path', 'glyph'].includes(elem.tagName)) {
pathObject.original = elem.getAttribute('d').replace(pathReg, '');
@ -264,10 +308,15 @@ function prepareSVGMorph(tweenProp, value) {
return pathObject;
}
/**
* Enables the `to()` method by preparing the tween object in advance.
* @param {string} prop the `path` property name
*/
function crossCheckSVGMorph(prop) {
if (this.valuesEnd[prop]) {
const pathArray1 = this.valuesStart[prop].pathArray;
const pathArray2 = this.valuesEnd[prop].pathArray;
const pathArray1 = this.valuesStart[prop].polygon;
const pathArray2 = this.valuesEnd[prop].polygon;
// skip already processed paths
// allow the component to work with pre-processed values
if (!pathArray1 || !pathArray2
@ -280,8 +329,8 @@ function crossCheckSVGMorph(prop) {
: defaultOptions.morphPrecision;
const [path1, path2] = getInterpolationPoints(p1, p2, morphPrecision);
this.valuesStart[prop].pathArray = path1;
this.valuesEnd[prop].pathArray = path2;
this.valuesStart[prop].polygon = path1;
this.valuesEnd[prop].polygon = path2;
}
}
}
@ -295,27 +344,29 @@ const svgMorphFunctions = {
};
// Component Full
const svgMorph = {
const SVGMorph = {
component: 'svgMorph',
property: 'path',
defaultValue: [],
Interpolate: coords,
defaultOptions: { morphPrecision: 10, morphIndex: 0 },
defaultOptions: { morphPrecision: 10 },
functions: svgMorphFunctions,
// Export utils to global for faster execution
Util: {
// component
addPoints,
bisect,
normalizeRing,
validRing, // component
getPolygon,
validPolygon,
getInterpolationPoints,
pathStringToRing,
pathStringToPolygon,
distanceSquareRoot,
midPoint,
approximateRing,
rotateRing,
approximatePolygon,
rotatePolygon,
// svg-path-commander
pathToString,
pathToCurve, // svg-path-commander
pathToCurve,
getPathLength,
getPointAtLength,
getDrawDirection,
@ -323,4 +374,4 @@ const svgMorph = {
},
};
export default svgMorph;
export default SVGMorph;

20
src/components/svgMorphBase.js
View file

@ -1,5 +1,5 @@
import KUTE from '../objects/kute.js';
import coords from '../interpolation/coords.js';
import KEC from '../objects/kute';
import coords from '../interpolation/coords';
/* SVGMorph = {
property: 'path',
@ -9,22 +9,26 @@ import coords from '../interpolation/coords.js';
} */
// Component functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function onStartSVGMorph(tweenProp) {
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
const path1 = a.pathArray; const path2 = b.pathArray; const
len = path2.length;
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 baseSVGMorph = {
const SVGMorphBase = {
component: 'baseSVGMorph',
property: 'path',
Interpolate: coords,
functions: { onStart: onStartSVGMorph },
};
export default baseSVGMorph;
export default SVGMorphBase;

55
src/components/svgTransform.js
View file

@ -1,17 +1,16 @@
import numbers from '../interpolation/numbers.js';
import { svgTransformOnStart } from './svgTransformBase.js';
/* const svgTransform = {
property: 'svgTransform',
subProperties,
defaultValue,
Interpolate: {numbers},
functions
} */
import numbers from '../interpolation/numbers';
import { svgTransformOnStart } from './svgTransformBase';
// Component Util
function parseStringOrigin(origin, { x, width }) {
/**
* Returns a correct transform origin consistent with the shape bounding box.
* @param {string} origin transform origin string
* @param {SVGPathCommander.pathBBox} bbox path bounding box
* @returns {number}
*/
function parseStringOrigin(origin, bbox) {
let result;
const { x, width } = bbox;
if (/[a-z]/i.test(origin) && !/px/.test(origin)) {
result = origin.replace(/top|left/, 0)
.replace(/right|bottom/, 100)
@ -22,7 +21,11 @@ function parseStringOrigin(origin, { x, width }) {
return result;
}
// helper function that turns transform value from string to object
/**
* Parse SVG transform string and return an object.
* @param {string} a transform string
* @returns {Object<string, (string | number)>}
*/
function parseTransformString(a) {
const c = {};
const d = a && /\)/.test(a)
@ -38,7 +41,14 @@ function parseTransformString(a) {
return c;
}
function parseTransformSVG(p, v) {
/**
* Returns the SVG transform tween object.
* @param {string} _ property name
* @param {Object<string, (string | number)>} v property value object
* @returns {KUTE.transformSVGObject} the SVG transform tween object
*/
function parseTransformSVG(/* prop */_, v) {
/** @type {KUTE.transformSVGObject} */
const svgTransformObject = {};
// by default the transformOrigin is "50% 50%" of the shape box
@ -90,12 +100,23 @@ function parseTransformSVG(p, v) {
}
// Component Functions
function prepareSvgTransform(p, v) {
return parseTransformSVG.call(this, p, v);
/**
* Returns the property tween object.
* @param {string} prop the property name
* @param {string} value the property value
* @returns {KUTE.transformSVGObject} the property tween object
*/
function prepareSvgTransform(prop, value) {
return parseTransformSVG.call(this, prop, value);
}
// returns an obect with current transform attribute value
function getStartSvgTransform(tweenProp, value) {
/**
* Returns an object with the current transform attribute value.
* @param {string} _ the property name
* @param {string} value the property value
* @returns {string} current transform object
*/
function getStartSvgTransform(/* tweenProp */_, value) {
const transformObject = {};
const currentTransform = parseTransformString(this.element.getAttribute('transform'));

21
src/components/svgTransformBase.js
View file

@ -1,18 +1,14 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
/* svgTransform = {
property: 'svgTransform',
subProperties,
defaultValue,
Interpolate: {numbers},
functions
} */
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function svgTransformOnStart(tweenProp) {
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (l, a, b, v) => {
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
KEC[tweenProp] = (l, a, b, v) => {
let x = 0;
let y = 0;
const deg = Math.PI / 180;
@ -43,6 +39,7 @@ export function svgTransformOnStart(tweenProp) {
x += complex ? b.origin[0] : 0; y += complex ? b.origin[1] : 0;
// finally we apply the transform attribute value
/* eslint no-bitwise: ["error", { "allow": [">>"] }] */
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})` : '')

34
src/components/textProperties.js
View file

@ -1,15 +1,8 @@
import defaultValues from '../objects/defaultValues.js';
import getStyleForProperty from '../process/getStyleForProperty.js';
import trueDimension from '../util/trueDimension.js';
import units from '../interpolation/units.js';
import { textPropOnStart } from './textPropertiesBase.js';
/* textProperties = {
category: 'textProperties',
defaultValues: [],
interpolators: {units}
functions = { prepareStart, prepareProperty, onStart }
} */
import defaultValues from '../objects/defaultValues';
import getStyleForProperty from '../process/getStyleForProperty';
import trueDimension from '../util/trueDimension';
import units from '../interpolation/units';
import { textPropOnStart } from './textPropertiesBase';
// Component Properties
const textProps = ['fontSize', 'lineHeight', 'letterSpacing', 'wordSpacing'];
@ -20,11 +13,22 @@ textProps.forEach((tweenProp) => {
textOnStart[tweenProp] = textPropOnStart;
});
/**
* Returns the current property computed style.
* @param {string} prop the property name
* @returns {string} computed style for property
*/
export function getTextProp(prop/* , value */) {
return getStyleForProperty(this.element, prop) || defaultValues[prop];
}
export function prepareTextProp(prop, value) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {string} value the property value
* @returns {number} the property tween object
*/
export function prepareTextProp(/* prop */_, value) {
return trueDimension(value);
}
@ -36,7 +40,7 @@ const textPropFunctions = {
};
// Component Full
const textProperties = {
const TextProperties = {
component: 'textProperties',
category: 'textProperties',
properties: textProps,
@ -48,4 +52,4 @@ const textProperties = {
Util: { trueDimension },
};
export default textProperties;
export default TextProperties;

24
src/components/textPropertiesBase.js
View file

@ -1,20 +1,18 @@
import KUTE from '../objects/kute.js';
import units from '../interpolation/units.js';
/* textProperties = {
category: 'textProperties',
defaultValues: [],
interpolators: {units},
functions = { prepareStart, prepareProperty, onStart:{}
} */
import KEC from '../objects/kute';
import units from '../interpolation/units';
// Component Properties
const textProperties = ['fontSize', 'lineHeight', 'letterSpacing', 'wordSpacing'];
const textOnStart = {};
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function textPropOnStart(tweenProp) {
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
// eslint-disable-next-line no-param-reassign -- impossible to satisfy
elem.style[tweenProp] = units(a.v, b.v, b.u, v);
};
}
@ -25,7 +23,7 @@ textProperties.forEach((tweenProp) => {
});
// Component Base
const baseTextProperties = {
const TextPropertiesBase = {
component: 'baseTextProperties',
category: 'textProps',
// properties: textProperties,
@ -34,4 +32,4 @@ const baseTextProperties = {
functions: { onStart: textOnStart },
};
export default baseTextProperties;
export default TextPropertiesBase;

27
src/components/textWrite.js
View file

@ -1,7 +1,7 @@
import connect from '../objects/connect.js';
import numbers from '../interpolation/numbers.js';
import connect from '../objects/connect';
import numbers from '../interpolation/numbers';
import { onStartWrite, charSet } from './textWriteBase.js';
import { onStartWrite, charSet } from './textWriteBase';
// Component Util
// utility for multi-child targets
@ -20,8 +20,10 @@ function wrapContentsSpan(el, classNAME) {
textWriteWrapper = document.createElement('SPAN');
textWriteWrapper.className = classNAME;
textWriteWrapper.innerHTML = elementInnerHTML;
/* eslint-disable no-param-reassign -- impossible to satisfy */
el.appendChild(textWriteWrapper);
el.innerHTML = textWriteWrapper.outerHTML;
/* eslint-enable no-param-reassign -- impossible to satisfy */
} else if (el.children.length && el.children[0].className === classNAME) {
[textWriteWrapper] = el.children;
}
@ -72,9 +74,11 @@ function setSegments(target, newText) {
const oldTargetSegs = getTextPartsArray(target, 'text-part');
const newTargetSegs = getTextPartsArray(wrapContentsSpan(newText), 'text-part');
/* eslint-disable no-param-reassign */
target.innerHTML = '';
target.innerHTML += oldTargetSegs.map((s) => { s.className += ' oldText'; return s.outerHTML; }).join('');
target.innerHTML += newTargetSegs.map((s) => { s.className += ' newText'; return s.outerHTML.replace(s.innerHTML, ''); }).join('');
/* eslint-enable no-param-reassign */
return [oldTargetSegs, newTargetSegs];
}
@ -113,8 +117,10 @@ export function createTextTweens(target, newText, ops) {
}));
textTween = textTween.concat(newTargets.map((el, i) => {
function onComplete() {
/* eslint-disable no-param-reassign */
target.innerHTML = newText;
target.playing = false;
/* eslint-enable no-param-reassign */
}
options.duration = options.duration === 'auto' ? newTargetSegs[i].innerHTML.length * 75 : options.duration;
@ -128,6 +134,7 @@ export function createTextTweens(target, newText, ops) {
textTween.start = function startTweens() {
if (!target.playing) {
textTween.forEach((tw) => tw.start());
// eslint-disable-next-line no-param-reassign
target.playing = true;
}
};
@ -136,10 +143,20 @@ export function createTextTweens(target, newText, ops) {
}
// Component Functions
/**
* Returns the current element `innerHTML`.
* @returns {string} computed style for property
*/
function getWrite(/* tweenProp, value */) {
return this.element.innerHTML;
}
/**
* Returns the property tween object.
* @param {string} tweenProp the property name
* @param {string} value the property value
* @returns {number | string} the property tween object
*/
function prepareText(tweenProp, value) {
if (tweenProp === 'number') {
return parseFloat(value);
@ -156,7 +173,7 @@ export const textWriteFunctions = {
};
// Full Component
export const textWrite = {
export const TextWrite = {
component: 'textWriteProperties',
category: 'textWrite',
properties: ['text', 'number'],
@ -168,4 +185,4 @@ export const textWrite = {
Util: { charSet, createTextTweens },
};
export default textWrite;
export default TextWrite;

34
src/components/textWriteBase.js
View file

@ -1,6 +1,6 @@
import KUTE from '../objects/kute.js';
import numbers from '../interpolation/numbers.js';
import defaultOptions from '../objects/defaultOptions.js';
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
import defaultOptions from '../objects/defaultOptions';
// Component Values
const lowerCaseAlpha = String('abcdefghijklmnopqrstuvwxyz').split(''); // lowercase
@ -23,8 +23,14 @@ export { charSet };
// Component Functions
export const onStartWrite = {
/**
* onStartWrite.text
*
* Sets the property update function.
* @param {string} tweenProp the property name
*/
text(tweenProp) {
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
const chars = this._textChars;
let charsets = charSet[defaultOptions.textChars];
@ -34,12 +40,13 @@ export const onStartWrite = {
charsets = chars;
}
KUTE[tweenProp] = (elem, a, b, v) => {
KEC[tweenProp] = (elem, a, b, v) => {
let initialText = '';
let endText = '';
const finalText = b === '' ? ' ' : b;
const firstLetterA = a.substring(0);
const firstLetterB = b.substring(0);
/* eslint-disable */
const pointer = charsets[(Math.random() * charsets.length) >> 0];
if (a === ' ') {
@ -58,20 +65,29 @@ export const onStartWrite = {
.substring(0, Math.min(v * firstLetterB.length, firstLetterB.length) >> 0);
elem.innerHTML = v < 1 ? ((endText + pointer + initialText)) : finalText;
}
/* eslint-enable */
};
}
},
/**
* onStartWrite.number
*
* Sets the property update function.
* @param {string} tweenProp the property name
*/
number(tweenProp) {
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // numbers can be 0
KUTE[tweenProp] = (elem, a, b, v) => {
if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { // numbers can be 0
KEC[tweenProp] = (elem, a, b, v) => {
/* eslint-disable */
elem.innerHTML = numbers(a, b, v) >> 0;
/* eslint-enable */
};
}
},
};
// Base Component
export const baseTextWrite = {
export const TextWriteBase = {
component: 'baseTextWrite',
category: 'textWrite',
// properties: ['text','number'],
@ -83,4 +99,4 @@ export const baseTextWrite = {
Util: { charSet },
};
export default baseTextWrite;
export default TextWriteBase;

52
src/components/transformFunctions.js
View file

@ -1,31 +1,35 @@
import defaultValues from '../objects/defaultValues.js';
import getInlineStyle from '../process/getInlineStyle.js';
import perspective from '../interpolation/perspective.js';
import translate3d from '../interpolation/translate3d.js';
import rotate3d from '../interpolation/rotate3d.js';
import translate from '../interpolation/translate.js';
import rotate from '../interpolation/rotate.js';
import scale from '../interpolation/scale.js';
import skew from '../interpolation/skew.js';
import { onStartTransform } from './transformFunctionsBase.js';
/* transformFunctions = {
property: 'transform',
subProperties,
defaultValues,
Interpolate: {translate,rotate,skew,scale},
functions } */
import defaultValues from '../objects/defaultValues';
import getInlineStyle from '../process/getInlineStyle';
import perspective from '../interpolation/perspective';
import translate3d from '../interpolation/translate3d';
import rotate3d from '../interpolation/rotate3d';
import translate from '../interpolation/translate';
import rotate from '../interpolation/rotate';
import scale from '../interpolation/scale';
import skew from '../interpolation/skew';
import { onStartTransform } from './transformFunctionsBase';
// same to svg transform, attr
// the component developed for modern browsers supporting non-prefixed transform
// Component Functions
function getTransform(tweenProperty/* , value */) {
/**
* Returns the current property inline style.
* @param {string} tweenProp the property name
* @returns {string} inline style for property
*/
function getTransform(tweenProp/* , value */) {
const currentStyle = getInlineStyle(this.element);
return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty];
return currentStyle[tweenProp] ? currentStyle[tweenProp] : defaultValues[tweenProp];
}
function prepareTransform(prop, obj) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {Object<string, string | number | (string | number)[]>} obj the property value
* @returns {KUTE.transformFObject} the property tween object
*/
function prepareTransform(/* prop, */_, obj) {
const prepAxis = ['X', 'Y', 'Z']; // coordinates
const transformObject = {};
const translateArray = []; const rotateArray = []; const skewArray = [];
@ -79,6 +83,10 @@ function prepareTransform(prop, obj) {
return transformObject;
}
/**
* Prepare tween object in advance for `to()` method.
* @param {string} tweenProp the property name
*/
function crossCheckTransform(tweenProp) {
if (this.valuesEnd[tweenProp]) {
if (this.valuesEnd[tweenProp]) {
@ -124,7 +132,7 @@ const defaultTransformValues = {
};
// Full Component
const transformFunctionsComponent = {
const TransformFunctions = {
component: 'transformFunctions',
property: 'transform',
subProperties: supportedTransformProperties,
@ -141,4 +149,4 @@ const transformFunctionsComponent = {
},
};
export default transformFunctionsComponent;
export default TransformFunctions;

39
src/components/transformFunctionsBase.js
View file

@ -1,25 +1,22 @@
import KUTE from '../objects/kute.js';
import perspective from '../interpolation/perspective.js';
import translate3d from '../interpolation/translate3d.js';
import rotate3d from '../interpolation/rotate3d.js';
import translate from '../interpolation/translate.js';
import rotate from '../interpolation/rotate.js';
import scale from '../interpolation/scale.js';
import skew from '../interpolation/skew.js';
/* transformFunctions = {
property: 'transform',
subProperties,
defaultValues,
Interpolate: {translate,rotate,skew,scale},
functions } */
// same to svg transform, attr
import KEC from '../objects/kute';
import perspective from '../interpolation/perspective';
import translate3d from '../interpolation/translate3d';
import rotate3d from '../interpolation/rotate3d';
import translate from '../interpolation/translate';
import rotate from '../interpolation/rotate';
import scale from '../interpolation/scale';
import skew from '../interpolation/skew';
// Component Functions
/**
* Sets the property update function.
* * same to svgTransform, htmlAttributes
* @param {string} tweenProp the property name
*/
export function onStartTransform(tweenProp) {
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
// eslint-disable-next-line no-param-reassign
elem.style[tweenProp] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0
+ (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z]
+ (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z]
@ -30,7 +27,7 @@ export function onStartTransform(tweenProp) {
}
// Base Component
const BaseTransform = {
const TransformFunctionsBase = {
component: 'baseTransform',
property: 'transform',
functions: { onStart: onStartTransform },
@ -45,4 +42,4 @@ const BaseTransform = {
},
};
export default BaseTransform;
export default TransformFunctionsBase;

51
src/components/transformLegacy.js
View file

@ -1,35 +1,40 @@
import support3DTransform from 'shorter-js/src/boolean/support3DTransform.js';
import defaultValues from '../objects/defaultValues.js';
import getInlineStyleLegacy from '../process/getInlineStyleLegacy.js';
import perspective from '../interpolation/perspective.js';
import translate3d from '../interpolation/translate3d.js';
import rotate3d from '../interpolation/rotate3d.js';
import translate from '../interpolation/translate.js';
import rotate from '../interpolation/rotate.js';
import scale from '../interpolation/scale.js';
import skew from '../interpolation/skew.js';
import support3DTransform from 'shorter-js/src/boolean/support3DTransform';
import defaultValues from '../objects/defaultValues';
import getInlineStyleLegacy from '../process/getInlineStyleLegacy';
import perspective from '../interpolation/perspective';
import translate3d from '../interpolation/translate3d';
import rotate3d from '../interpolation/rotate3d';
import translate from '../interpolation/translate';
import rotate from '../interpolation/rotate';
import scale from '../interpolation/scale';
import skew from '../interpolation/skew';
import { onStartLegacyTransform } from './transformLegacyBase.js';
import transformProperty from '../util/transformProperty.js';
import supportTransform from '../util/supportLegacyTransform.js';
/* transformFunctions = {
property : 'transform',
subProperties,
defaultValues,
Interpolate: {translate,rotate,skew,scale},
functions } */
import { onStartLegacyTransform } from './transformLegacyBase';
import transformProperty from '../util/transformProperty';
import supportTransform from '../util/supportLegacyTransform';
// same to svg transform, attr
// the component to handle all kinds of input values and process according to browser supported API,
// the component that handles all browsers IE9+
// Component Functions
/**
* Returns the current property inline style.
* @param {string} tweenProperty the property name
* @returns {string} inline style for property
*/
function getLegacyTransform(tweenProperty/* , value */) {
const currentStyle = getInlineStyleLegacy(this.element);
return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty];
}
function prepareLegacyTransform(prop, obj) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {Object<string, string | number | (string | number)[]>} obj the property value
* @returns {KUTE.transformFObject} the property tween object
*/
function prepareLegacyTransform(/* prop */_, obj) {
const prepAxis = ['X', 'Y', 'Z']; // coordinates
const translateArray = []; const rotateArray = []; const skewArray = [];
const transformObject = {};
@ -97,6 +102,10 @@ function prepareLegacyTransform(prop, obj) {
return transformObject;
}
/**
* Prepare tween object in advance for `to()` method.
* @param {string} tweenProp the property name
*/
function crossCheckLegacyTransform(tweenProp) {
if (this.valuesEnd[tweenProp]) {
if (this.valuesEnd[tweenProp] && support3DTransform) {

43
src/components/transformLegacyBase.js
View file

@ -1,31 +1,29 @@
import support3DTransform from 'shorter-js/src/boolean/support3DTransform.js';
import KUTE from '../objects/kute.js';
import perspective from '../interpolation/perspective.js';
import translate3d from '../interpolation/translate3d.js';
import rotate3d from '../interpolation/rotate3d.js';
import translate from '../interpolation/translate.js';
import rotate from '../interpolation/rotate.js';
import scale from '../interpolation/scale.js';
import skew from '../interpolation/skew.js';
import support3DTransform from 'shorter-js/src/boolean/support3DTransform';
import KEC from '../objects/kute';
import perspective from '../interpolation/perspective';
import translate3d from '../interpolation/translate3d';
import rotate3d from '../interpolation/rotate3d';
import translate from '../interpolation/translate';
import rotate from '../interpolation/rotate';
import scale from '../interpolation/scale';
import skew from '../interpolation/skew';
import supportTransform from '../util/supportLegacyTransform.js';
import transformProperty from '../util/transformProperty.js';
import supportTransform from '../util/supportLegacyTransform';
import transformProperty from '../util/transformProperty';
/* baseLegacyTransform = {
property: 'transform',
subProperties,
defaultValues,
Interpolate: {translate,rotate,skew,scale},
functions } */
// same to svg transform, attr
// same as svgTransform, htmlAttributes
// the component that handles all browsers IE9+
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
export function onStartLegacyTransform(tweenProp) {
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
if (support3DTransform) {
KUTE[tweenProp] = (elem, a, b, v) => {
KEC[tweenProp] = (elem, a, b, v) => {
// eslint-disable-next-line no-param-reassign
elem.style[transformProperty] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0
+ (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z]
+ (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z]
@ -33,7 +31,8 @@ export function onStartLegacyTransform(tweenProp) {
+ (a.scale || b.scale ? scale(a.scale, b.scale, v) : ''); // one side might be 0
};
} else if (supportTransform) {
KUTE[tweenProp] = (elem, a, b, v) => {
KEC[tweenProp] = (elem, a, b, v) => {
// eslint-disable-next-line no-param-reassign
elem.style[transformProperty] = (a.translate ? translate(a.translate, b.translate, 'px', v) : '') // array [x,y]
+ ((a.rotate || b.rotate) ? rotate(a.rotate, b.rotate, 'deg', v) : '') // one side might be 0
+ (a.skew ? skew(a.skew, b.skew, 'deg', v) : '') // array [x,y]

45
src/components/transformMatrix.js
View file

@ -1,20 +1,19 @@
import defaultValues from '../objects/defaultValues.js';
import numbers from '../interpolation/numbers.js';
import arrays from '../interpolation/arrays.js';
import { onStartTransform } from './transformMatrixBase.js';
/* transformMatrix = {
property : 'transform',
defaultValue: {},
interpolators: {}
functions = { prepareStart, prepareProperty, onStart, crossCheck }
} */
import defaultValues from '../objects/defaultValues';
import numbers from '../interpolation/numbers';
import arrays from '../interpolation/arrays';
import { onStartTransform } from './transformMatrixBase';
// Component name
const matrixComponent = 'transformMatrix';
// Component Functions
function getTransform(tweenProp, value) {
/**
* Returns the current transform object.
* @param {string} _ the property name
* @param {string} value the property value
* @returns {KUTE.transformMObject} transform object
*/
function getTransform(/* tweenProp, */_, value) {
const transformObject = {};
const currentValue = this.element[matrixComponent];
@ -30,7 +29,13 @@ function getTransform(tweenProp, value) {
return transformObject;
}
function prepareTransform(tweenProp, value) {
/**
* Returns the property tween object.
* @param {string} _ the property name
* @param {Object<string, string | number | (string | number)[]>} obj the property value
* @returns {KUTE.transformMObject} the property tween object
*/
function prepareTransform(/* tweenProp, */_, value) {
if (typeof (value) === 'object' && !value.length) {
let pv;
const transformObject = {};
@ -89,14 +94,20 @@ function prepareTransform(tweenProp, value) {
throw Error(`KUTE.js - "${value}" is not valid/supported transform function`);
}
/**
* Sets the end values for the next `to()` method call.
* @param {string} tweenProp the property name
*/
function onCompleteTransform(tweenProp) {
if (this.valuesEnd[tweenProp]) {
this.element[matrixComponent] = {};
Object.keys(this.valuesEnd[tweenProp]).forEach((tf) => {
this.element[matrixComponent][tf] = this.valuesEnd[tweenProp][tf];
});
this.element[matrixComponent] = { ...this.valuesEnd[tweenProp] };
}
}
/**
* Prepare tween object in advance for `to()` method.
* @param {string} tweenProp the property name
*/
function crossCheckTransform(tweenProp) {
if (this.valuesEnd[tweenProp]) {
if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective) {

34
src/components/transformMatrixBase.js
View file

@ -1,13 +1,6 @@
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 }
} */
import KEC from '../objects/kute';
import numbers from '../interpolation/numbers';
import arrays from '../interpolation/arrays';
// Component name
const matrixComponent = 'transformMatrixBase';
@ -18,9 +11,13 @@ const CSS3Matrix = typeof (DOMMatrix) !== 'undefined' ? DOMMatrix : null;
// Component Functions
export const onStartTransform = {
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
transform(tweenProp) {
if (CSS3Matrix && this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem, a, b, v) => {
if (CSS3Matrix && this.valuesEnd[tweenProp] && !KEC[tweenProp]) {
KEC[tweenProp] = (elem, a, b, v) => {
let matrix = new CSS3Matrix();
const tObject = {};
@ -53,19 +50,26 @@ export const onStartTransform = {
: matrix;
// set element style
// eslint-disable-next-line no-param-reassign
elem.style[tweenProp] = matrix.toString();
};
}
},
/**
* onStartTransform.CSS3Matrix
*
* Sets the update function for the property.
* @param {string} prop the property name
*/
CSS3Matrix(prop) {
if (CSS3Matrix && this.valuesEnd.transform) {
if (!KUTE[prop]) KUTE[prop] = CSS3Matrix;
if (!KEC[prop]) KEC[prop] = CSS3Matrix;
}
},
};
// Component Base Object
export const baseMatrixTransform = {
export const TransformMatrixBase = {
component: matrixComponent,
property: 'transform',
functions: { onStart: onStartTransform },
@ -78,4 +82,4 @@ export const baseMatrixTransform = {
},
};
export default baseMatrixTransform;
export default TransformMatrixBase;

11
src/core/add.js
View file

@ -1,3 +1,10 @@
import Tweens from '../objects/tweens.js';
import Tweens from '../objects/tweens';
export default (tw) => Tweens.push(tw);
/**
* KUTE.add(Tween)
*
* @param {KUTE.Tween} tw a new tween to add
*/
const add = (tw) => Tweens.push(tw);
export default add;

11
src/core/getAll.js
View file

@ -1,3 +1,10 @@
import Tweens from '../objects/tweens.js';
import Tweens from '../objects/tweens';
export default () => Tweens;
/**
* KUTE.add(Tween)
*
* @return {KUTE.Tween[]} tw a new tween to add
*/
const getAll = () => Tweens;
export default getAll;

16
src/core/internals.js
View file

@ -1,11 +1,11 @@
import add from './add.js';
import remove from './remove.js';
import getAll from './getAll.js';
import removeAll from './removeAll.js';
import { stop } from './render.js';
import linkInterpolation from './linkInterpolation.js';
import add from './add';
import remove from './remove';
import getAll from './getAll';
import removeAll from './removeAll';
import { stop } from './render';
import linkInterpolation from './linkInterpolation';
export default {
const internals = {
add,
remove,
getAll,
@ -13,3 +13,5 @@ export default {
stop,
linkInterpolation,
};
export default internals;

16
src/core/linkInterpolation.js
View file

@ -1,7 +1,11 @@
import KUTE from '../objects/kute.js';
import linkProperty from '../objects/linkProperty.js';
import supportedProperties from '../objects/supportedProperties.js';
import KEC from '../objects/kute';
import linkProperty from '../objects/linkProperty';
import supportedProperties from '../objects/supportedProperties';
/**
* linkInterpolation
* @this {KUTE.Tween}
*/
export default function linkInterpolation() { // DON'T change
Object.keys(linkProperty).forEach((component) => {
const componentLink = linkProperty[component];
@ -11,18 +15,18 @@ export default function linkInterpolation() { // DON'T change
if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius
&& Object.keys(this.valuesEnd).some((i) => (componentProps && componentProps.includes(i))
|| (i === 'attr' && Object.keys(this.valuesEnd[i]).some((j) => componentProps && componentProps.includes(j))))) {
if (!KUTE[fnObj]) KUTE[fnObj] = componentLink[fnObj];
if (!KEC[fnObj]) KEC[fnObj] = componentLink[fnObj];
} else {
Object.keys(this.valuesEnd).forEach((prop) => {
const propObject = this.valuesEnd[prop];
if (propObject instanceof Object) {
Object.keys(propObject).forEach((i) => {
if (typeof (componentLink[i]) === 'function') { // transformCSS3
if (!KUTE[i]) KUTE[i] = componentLink[i];
if (!KEC[i]) KEC[i] = componentLink[i];
} else {
Object.keys(componentLink[fnObj]).forEach((j) => {
if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix
if (!KUTE[j]) KUTE[j] = componentLink[i][j];
if (!KEC[j]) KEC[j] = componentLink[i][j];
}
});
}

4
src/core/queueStart.js
View file

@ -1,5 +1,5 @@
import onStart from '../objects/onStart.js';
import linkInterpolation from './linkInterpolation.js';
import onStart from '../objects/onStart';
import linkInterpolation from './linkInterpolation';
export default function queueStart() {
// fire onStart actions

11
src/core/remove.js
View file

@ -1,6 +1,13 @@
import Tweens from '../objects/tweens.js';
import Tweens from '../objects/tweens';
export default (tw) => {
/**
* KUTE.remove(Tween)
*
* @param {KUTE.Tween} tw a new tween to add
*/
const remove = (tw) => {
const i = Tweens.indexOf(tw);
if (i !== -1) Tweens.splice(i, 1);
};
export default remove;

9
src/core/removeAll.js
View file

@ -1,3 +1,8 @@
import Tweens from '../objects/tweens.js';
import Tweens from '../objects/tweens';
export default () => { Tweens.length = 0; };
/**
* KUTE.removeAll()
*/
const removeAll = () => { Tweens.length = 0; };
export default removeAll;

35
src/core/render.js
View file

@ -1,18 +1,21 @@
import KUTE from '../objects/kute.js';
import Tweens from '../objects/tweens.js';
import globalObject from '../objects/globalObject.js';
import Interpolate from '../objects/interpolate.js';
import onStart from '../objects/onStart.js';
import now from '../util/now.js';
import KEC from '../objects/kute';
import Tweens from '../objects/tweens';
import globalObject from '../objects/globalObject';
import Interpolate from '../objects/interpolate';
import onStart from '../objects/onStart';
import now from '../util/now';
const Time = {};
Time.now = now;
// const that = window.self || window || {};
// Time.now = that.performance.now.bind(that.performance);
// eslint-disable-next-line import/no-mutable-exports -- impossible to satisfy
let Tick = 0;
export { Tick };
/**
*
* @param {number | Date} time
*/
const Ticker = (time) => {
let i = 0;
while (i < Tweens.length) {
@ -34,31 +37,31 @@ export function stop() {
Tick = null;
Object.keys(onStart).forEach((obj) => {
if (typeof (onStart[obj]) === 'function') {
if (KUTE[obj]) delete KUTE[obj];
if (KEC[obj]) delete KEC[obj];
} else {
Object.keys(onStart[obj]).forEach((prop) => {
if (KUTE[prop]) delete KUTE[prop];
if (KEC[prop]) delete KEC[prop];
});
}
});
Object.keys(Interpolate).forEach((i) => {
if (KUTE[i]) delete KUTE[i];
if (KEC[i]) delete KEC[i];
});
}
}, 64);
}
// KUTE.js render update functions
// ===============================
// render update functions
// =======================
const Render = {
Tick, Ticker, Tweens, Time,
};
Object.keys(Render).forEach((blob) => {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
if (!KEC[blob]) {
KEC[blob] = blob === 'Time' ? Time.now : Render[blob];
}
});
globalObject._KUTE = KUTE;
globalObject._KUTE = KEC;
export default Render;

21
src/easing/easing-base.js
View file

@ -1,28 +1,41 @@
import connect from '../objects/connect.js';
import connect from '../objects/connect';
// Select Robert Penner's Easing Functions
// updated for ESLint
const Easing = {
/** @type {KUTE.easingFunction} */
linear: (t) => t,
/** @type {KUTE.easingFunction} */
easingQuadraticIn: (t) => t * t,
/** @type {KUTE.easingFunction} */
easingQuadraticOut: (t) => t * (2 - t),
/** @type {KUTE.easingFunction} */
easingQuadraticInOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
/** @type {KUTE.easingFunction} */
easingCubicIn: (t) => t * t * t,
/** @type {KUTE.easingFunction} */
easingCubicOut: (t0) => { const t = t0 - 1; return t * t * t + 1; },
/** @type {KUTE.easingFunction} */
easingCubicInOut: (t) => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1),
/** @type {KUTE.easingFunction} */
easingCircularIn: (t) => -(Math.sqrt(1 - (t * t)) - 1),
/** @type {KUTE.easingFunction} */
easingCircularOut: (t0) => { const t = t0 - 1; return Math.sqrt(1 - t * t); },
/** @type {KUTE.easingFunction} */
easingCircularInOut: (t0) => {
let t = t0 * 2;
if (t < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
t -= 2; return 0.5 * (Math.sqrt(1 - t * t) + 1);
},
/** @type {KUTE.easingFunction} */
easingBackIn: (t) => { const s = 1.70158; return t * t * ((s + 1) * t - s); },
/** @type {KUTE.easingFunction} */
easingBackOut: (t0) => {
const s = 1.70158;
const t = t0 - 1;
return t * t * ((s + 1) * t + s) + 1;
},
/** @type {KUTE.easingFunction} */
easingBackInOut: (t0) => {
const s = 1.70158 * 1.525;
let t = t0 * 2;
@ -31,6 +44,12 @@ const Easing = {
},
};
/**
* Returns a valid `easingFunction`.
*
* @param {KUTE.easingFunction | string} fn function name or constructor name
* @returns {KUTE.easingFunction} a valid easing function
*/
function processEasing(fn) {
if (typeof fn === 'function') {
return fn;

10
src/easing/easing-bezier.js
View file

@ -1,5 +1,5 @@
import CubicBezier from 'cubic-bezier-easing';
import connect from '../objects/connect.js';
import connect from '../objects/connect';
const Easing = {
linear: new CubicBezier(0, 0, 1, 1, 'linear'),
@ -36,6 +36,12 @@ const Easing = {
easingBackInOut: new CubicBezier(0.68, -0.55, 0.265, 1.55, 'easingBackInOut'),
};
/**
* Returns a valid `easingFunction`.
*
* @param {KUTE.easingFunction | string} fn function name or constructor name
* @returns {KUTE.easingFunction} a valid easingfunction
*/
function processBezierEasing(fn) {
if (typeof fn === 'function') {
return fn;
@ -46,7 +52,7 @@ function processBezierEasing(fn) {
return new CubicBezier(bz[0] * 1, bz[1] * 1, bz[2] * 1, bz[3] * 1); // bezier easing
}
// if (/elastic|bounce/i.test(fn)) {
// throw TypeError(`KUTE.js - CubicBezier doesn't support ${fn} easing.`);
// throw TypeError(`KUTE - CubicBezier doesn't support ${fn} easing.`);
// }
return Easing.linear;
}

41
src/easing/easing.js
View file

@ -1,58 +1,84 @@
import connect from '../objects/connect.js';
import connect from '../objects/connect';
// Robert Penner's Easing Functions
// updated for ESLint
const Easing = {
/** @type {KUTE.easingFunction} */
linear: (t) => t,
/** @type {KUTE.easingFunction} */
easingSinusoidalIn: (t) => -Math.cos((t * Math.PI) / 2) + 1,
/** @type {KUTE.easingFunction} */
easingSinusoidalOut: (t) => Math.sin((t * Math.PI) / 2),
/** @type {KUTE.easingFunction} */
easingSinusoidalInOut: (t) => -0.5 * (Math.cos(Math.PI * t) - 1),
/** @type {KUTE.easingFunction} */
easingQuadraticIn: (t) => t * t,
/** @type {KUTE.easingFunction} */
easingQuadraticOut: (t) => t * (2 - t),
/** @type {KUTE.easingFunction} */
easingQuadraticInOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
/** @type {KUTE.easingFunction} */
easingCubicIn: (t) => t * t * t,
/** @type {KUTE.easingFunction} */
easingCubicOut: (t0) => { const t = t0 - 1; return t * t * t + 1; },
/** @type {KUTE.easingFunction} */
easingCubicInOut: (t) => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1),
/** @type {KUTE.easingFunction} */
easingQuarticIn: (t) => t * t * t * t,
/** @type {KUTE.easingFunction} */
easingQuarticOut: (t0) => { const t = t0 - 1; return 1 - t * t * t * t; },
/** @type {KUTE.easingFunction} */
easingQuarticInOut: (t0) => {
let t = t0;
if (t < 0.5) return 8 * t * t * t * t;
t -= 1; return 1 - 8 * t * t * t * t;
},
/** @type {KUTE.easingFunction} */
easingQuinticIn: (t) => t * t * t * t * t,
/** @type {KUTE.easingFunction} */
easingQuinticOut: (t0) => { const t = t0 - 1; return 1 + t * t * t * t * t; },
/** @type {KUTE.easingFunction} */
easingQuinticInOut: (t0) => {
let t = t0;
if (t < 0.5) return 16 * t * t * t * t * t;
t -= 1; return 1 + 16 * t * t * t * t * t;
},
/** @type {KUTE.easingFunction} */
easingCircularIn: (t) => -(Math.sqrt(1 - (t * t)) - 1),
/** @type {KUTE.easingFunction} */
easingCircularOut: (t0) => { const t = t0 - 1; return Math.sqrt(1 - t * t); },
/** @type {KUTE.easingFunction} */
easingCircularInOut: (t0) => {
let t = t0 * 2;
if (t < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
t -= 2; return 0.5 * (Math.sqrt(1 - t * t) + 1);
},
/** @type {KUTE.easingFunction} */
easingExponentialIn: (t) => 2 ** (10 * (t - 1)) - 0.001,
/** @type {KUTE.easingFunction} */
easingExponentialOut: (t) => 1 - 2 ** (-10 * t),
/** @type {KUTE.easingFunction} */
easingExponentialInOut: (t0) => {
const t = t0 * 2;
if (t < 1) return 0.5 * (2 ** (10 * (t - 1)));
return 0.5 * (2 - 2 ** (-10 * (t - 1)));
},
/** @type {KUTE.easingFunction} */
easingBackIn: (t) => { const s = 1.70158; return t * t * ((s + 1) * t - s); },
/** @type {KUTE.easingFunction} */
easingBackOut: (t0) => {
const s = 1.70158;
const t = t0 - 1;
return t * t * ((s + 1) * t + s) + 1;
},
/** @type {KUTE.easingFunction} */
easingBackInOut: (t0) => {
const s = 1.70158 * 1.525;
let t = t0 * 2;
if (t < 1) return 0.5 * (t * t * ((s + 1) * t - s));
t -= 2; return 0.5 * (t * t * ((s + 1) * t + s) + 2);
},
/** @type {KUTE.easingFunction} */
easingElasticIn: (t0) => {
let s;
let k1 = 0.1;
@ -68,6 +94,7 @@ const Easing = {
t -= 1;
return -(k1 * (2 ** (10 * t)) * Math.sin(((t - s) * Math.PI * 2) / k2));
},
/** @type {KUTE.easingFunction} */
easingElasticOut: (t) => {
let s;
let k1 = 0.1;
@ -82,6 +109,7 @@ const Easing = {
}
return k1 * (2 ** (-10 * t)) * Math.sin(((t - s) * Math.PI * 2) / k2) + 1;
},
/** @type {KUTE.easingFunction} */
easingElasticInOut: (t0) => {
let t = t0;
let s;
@ -97,12 +125,14 @@ const Easing = {
t *= 2;
if (t < 1) {
return -0.5 * (k1 * (2 ** (10 * (t - 1)))
* Math.sin(((t - 1 - s) * Math.PI * 2) / k2));
* Math.sin(((t - 1 - s) * Math.PI * 2) / k2));
}
t -= 1;
return k1 * (2 ** (-10 * t)) * Math.sin(((t - s) * Math.PI * 2) / k2) * 0.5 + 1;
},
/** @type {KUTE.easingFunction} */
easingBounceIn: (t) => 1 - Easing.easingBounceOut(1 - t),
/** @type {KUTE.easingFunction} */
easingBounceOut: (t0) => {
let t = t0;
if (t < (1 / 2.75)) { return 7.5625 * t * t; }
@ -111,12 +141,19 @@ const Easing = {
t -= (2.625 / 2.75);
return 7.5625 * t * t + 0.984375;
},
/** @type {KUTE.easingFunction} */
easingBounceInOut: (t) => {
if (t < 0.5) return Easing.easingBounceIn(t * 2) * 0.5;
return Easing.easingBounceOut(t * 2 - 1) * 0.5 + 0.5;
},
};
/**
* Returns a valid `easingFunction`.
*
* @param {KUTE.easingFunction | string} fn function name or constructor
* @returns {KUTE.easingFunction} a valid easing function
*/
function processEasing(fn) {
if (typeof fn === 'function') {
return fn;

24
src/index-base.js
View file

@ -1,22 +1,22 @@
import Render from './core/render.js';
import Interpolate from './objects/interpolate.js';
import Objects from './objects/objectsBase.js';
import Util from './objects/util.js';
import Easing from './easing/easing-base.js';
import Internals from './core/internals.js';
import Selector from './util/selector.js';
import Render from './core/render';
import Interpolate from './objects/interpolate';
import Objects from './objects/objectsBase';
import Util from './objects/util';
import Easing from './easing/easing-base';
import Internals from './core/internals';
import Selector from './util/selector';
// Animation
import Animation from './animation/animationBase.js';
import Animation from './animation/animationBase';
// Base Components
import Components from './objects/componentsBase.js';
import Components from './objects/componentsBase';
// TweenConstructor
import Tween from './tween/tweenBase.js';
import Tween from './tween/tweenBase';
// Interface only fromTo
import fromTo from './interface/fromTo.js';
import fromTo from './interface/fromTo';
import Version from './util/version.js';
import Version from './util/version';
export default {
Animation,

36
src/index-extra.js
View file

@ -1,30 +1,30 @@
import CubicBezier from 'cubic-bezier-easing';
import Render from './core/render.js';
import Interpolate from './objects/interpolate.js';
import Objects from './objects/objects.js';
import Util from './objects/util.js';
import Internals from './core/internals.js';
import Process from './process/process.js';
import Easing from './easing/easing-bezier.js';
import Selector from './util/selector.js';
import Render from './core/render';
import Interpolate from './objects/interpolate';
import Objects from './objects/objects';
import Util from './objects/util';
import Internals from './core/internals';
import Process from './process/process';
import Easing from './easing/easing-bezier';
import Selector from './util/selector';
// TweenConstructor
import Tween from './tween/tweenExtra.js';
import TweenCollection from './tween/tweenCollection.js';
import ProgressBar from './util/progressBar.js';
import Tween from './tween/tweenExtra';
import TweenCollection from './tween/tweenCollection';
import ProgressBar from './util/progressBar';
// interface
import to from './interface/to.js';
import fromTo from './interface/fromTo.js';
import allTo from './interface/allTo.js';
import allFromTo from './interface/allFromTo.js';
import to from './interface/to';
import fromTo from './interface/fromTo';
import allTo from './interface/allTo';
import allFromTo from './interface/allFromTo';
// Animation
import Animation from './animation/animationDevelopment.js';
import Animation from './animation/animationDevelopment';
// Components Extra
import Components from './objects/componentsExtra.js';
import Components from './objects/componentsExtra';
import Version from './util/version.js';
import Version from './util/version';
export default {
Animation,

50
src/index-legacy.js
View file

@ -1,40 +1,40 @@
import Render from './core/render.js';
import Interpolate from './objects/interpolate.js';
import Objects from './objects/objects.js';
import Util from './objects/util.js';
import Internals from './core/internals.js';
import Process from './process/process.js';
import Easing from './easing/easing.js';
import Selector from './util/selector.js';
import Render from './core/render';
import Interpolate from './objects/interpolate';
import Objects from './objects/objects';
import Util from './objects/util';
import Internals from './core/internals';
import Process from './process/process';
import Easing from './easing/easing';
import Selector from './util/selector';
// TweenConstructor
import Tween from './tween/tween.js';
import TweenCollection from './tween/tweenCollection.js';
import Tween from './tween/tween';
import TweenCollection from './tween/tweenCollection';
// interface
import to from './interface/to.js';
import fromTo from './interface/fromTo.js';
import allTo from './interface/allTo.js';
import allFromTo from './interface/allFromTo.js';
import Animation from './animation/animation.js';
import to from './interface/to';
import fromTo from './interface/fromTo';
import allTo from './interface/allTo';
import allFromTo from './interface/allFromTo';
import Animation from './animation/animation';
// components
import BoxModel from './components/boxModelEssential.js';
import ColorProperties from './components/colorProperties.js';
import HTMLAttributes from './components/htmlAttributes.js';
import OpacityProperty from './components/opacityProperty.js';
import TextWrite from './components/textWrite.js';
import TransformLegacy from './components/transformLegacy.js';
import SVGDraw from './components/svgDraw.js';
import SVGMorph from './components/svgMorph.js';
import BoxModel from './components/boxModelEssential';
import ColorProperties from './components/colorProperties';
import HTMLAttributes from './components/htmlAttributes';
import OpacityProperty from './components/opacityProperty';
import TextWriteProp from './components/textWrite';
import TransformLegacy from './components/transformLegacy';
import SVGDraw from './components/svgDraw';
import SVGMorph from './components/svgMorph';
import Version from './util/version.js';
import Version from './util/version';
const Components = {
BoxModel,
ColorProperties,
HTMLAttributes,
OpacityProperty,
TextWrite,
TextWriteProp,
TransformLegacy,
SVGDraw,
SVGMorph,

35
src/index.js
View file

@ -1,29 +1,30 @@
// KUTE.js standard distribution version
import CubicBezier from 'cubic-bezier-easing';
import Render from './core/render.js';
import Interpolate from './objects/interpolate.js';
import Objects from './objects/objects.js';
import Util from './objects/util.js';
import Internals from './core/internals.js';
import Process from './process/process.js';
import Easing from './easing/easing-bezier.js';
import Selector from './util/selector.js';
import Render from './core/render';
import Interpolate from './objects/interpolate';
import Objects from './objects/objects';
import Util from './objects/util';
import Internals from './core/internals';
import Process from './process/process';
import Easing from './easing/easing-bezier';
import Selector from './util/selector';
// TweenConstructor
import Tween from './tween/tween.js';
import TweenCollection from './tween/tweenCollection.js';
import Tween from './tween/tween';
import TweenCollection from './tween/tweenCollection';
// interface
import to from './interface/to.js';
import fromTo from './interface/fromTo.js';
import allTo from './interface/allTo.js';
import allFromTo from './interface/allFromTo.js';
import to from './interface/to';
import fromTo from './interface/fromTo';
import allTo from './interface/allTo';
import allFromTo from './interface/allFromTo';
// Animation
import Animation from './animation/animation.js';
import Animation from './animation/animation';
// Default Components
import Components from './objects/componentsDefault.js';
import Components from './objects/componentsDefault';
import Version from './util/version.js';
import Version from './util/version';
const KUTE = {
Animation,

15
src/interface/allFromTo.js
View file

@ -1,6 +1,17 @@
import selector from '../util/selector.js';
import TweenCollection from '../tween/tweenCollection.js';
import selector from '../util/selector';
import TweenCollection from '../tween/tweenCollection';
/**
* The `KUTE.allFromTo()` static method creates a new Tween object
* for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat`
* at a given state.
*
* @param {Element[] | HTMLCollection | NodeList} elements target elements
* @param {KUTE.tweenProps} startObject
* @param {KUTE.tweenProps} endObject
* @param {KUTE.tweenOptions} optionsObj tween options
* @returns {TweenCollection} the Tween object collection
*/
export default function allFromTo(elements, startObject, endObject, optionsObj) {
const options = optionsObj || {};
return new TweenCollection(selector(elements, true), startObject, endObject, options);

17
src/interface/allTo.js
View file

@ -1,9 +1,18 @@
import selector from '../util/selector.js';
import TweenCollection from '../tween/tweenCollection.js';
import selector from '../util/selector';
import TweenCollection from '../tween/tweenCollection';
// multiple elements tween objects
/**
* The `KUTE.allTo()` static method creates a new Tween object
* for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat`
* at their current state.
*
* @param {Element[] | HTMLCollection | NodeList} elements target elements
* @param {KUTE.tweenProps} endObject
* @param {KUTE.tweenProps} optionsObj progress
* @returns {TweenCollection} the Tween object collection
*/
export default function allTo(elements, endObject, optionsObj) {
const options = optionsObj || {};
optionsObj.resetStart = endObject;
options.resetStart = endObject;
return new TweenCollection(selector(elements, true), endObject, endObject, options);
}

17
src/interface/fromTo.js
View file

@ -1,8 +1,19 @@
import selector from '../util/selector.js';
import connect from '../objects/connect.js';
import selector from '../util/selector';
import connect from '../objects/connect';
const { tween: TweenConstructor } = connect;
/**
* The `KUTE.fromTo()` static method returns a new Tween object
* for a single `HTMLElement` at a given state.
*
* @param {Element} element target element
* @param {KUTE.tweenProps} startObject
* @param {KUTE.tweenProps} endObject
* @param {KUTE.tweenOptions} optionsObj tween options
* @returns {KUTE.Tween} the resulting Tween object
*/
export default function fromTo(element, startObject, endObject, optionsObj) {
const options = optionsObj || {};
const TweenConstructor = connect.tween;
return new TweenConstructor(selector(element), startObject, endObject, options);
}

16
src/interface/to.js
View file

@ -1,9 +1,19 @@
import selector from '../util/selector.js';
import connect from '../objects/connect.js';
import selector from '../util/selector';
import connect from '../objects/connect';
const { tween: TweenConstructor } = connect;
/**
* The `KUTE.to()` static method returns a new Tween object
* for a single `HTMLElement` at its current state.
*
* @param {Element} element target element
* @param {KUTE.tweenProps} endObject
* @param {KUTE.tweenOptions} optionsObj tween options
* @returns {KUTE.Tween} the resulting Tween object
*/
export default function to(element, endObject, optionsObj) {
const options = optionsObj || {};
const TweenConstructor = connect.tween;
options.resetStart = endObject;
return new TweenConstructor(selector(element), endObject, endObject, options);
}

13
src/interpolation/arrays.js
View file

@ -1,6 +1,15 @@
/**
* Array Interpolation Function.
*
* @param {number[]} a start array
* @param {number[]} b end array
* @param {number} v progress
* @returns {number[]} the resulting array
*/
export default function arrays(a, b, v) {
const result = [];
for (let i = 0, l = b.length; i < l; i += 1) {
const result = []; const { length } = b;
for (let i = 0; i < length; i += 1) {
// eslint-disable-next-line no-bitwise
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0) / 1000;
}
return result;

17
src/interpolation/colors.js
View file

@ -1,5 +1,12 @@
import numbers from './numbers.js';
import numbers from './numbers';
/**
* Color Interpolation Function.
*
* @param {KUTE.colorObject} a start color
* @param {KUTE.colorObject} b end color
* @param {number} v progress
* @returns {string} the resulting color
*/
export default function colors(a, b, v) {
const _c = {};
const ep = ')';
@ -8,12 +15,10 @@ export default function colors(a, b, v) {
const rgba = 'rgba(';
Object.keys(b).forEach((c) => {
// _c[c] = c !== 'a' ? (numbers(a[c], b[c], v) >> 0 || 0) : (a[c] && b[c])
// ? (numbers(a[c], b[c], v) * 100 >> 0) / 100 : null;
if (c !== 'a') {
_c[c] = numbers(a[c], b[c], v) >> 0 || 0;
_c[c] = numbers(a[c], b[c], v) >> 0 || 0; // eslint-disable-line no-bitwise
} else if (a[c] && b[c]) {
_c[c] = (numbers(a[c], b[c], v) * 100 >> 0) / 100;
_c[c] = (numbers(a[c], b[c], v) * 100 >> 0) / 100; // eslint-disable-line no-bitwise
}
});

10
src/interpolation/coords.js
View file

@ -1,8 +1,18 @@
/**
* Coordinates Interpolation Function.
*
* @param {number[][]} a start coordinates
* @param {number[][]} b end coordinates
* @param {string} l amount of coordinates
* @param {number} v progress
* @returns {number[][]} the interpolated coordinates
*/
export default function coords(a, b, l, v) {
const points = [];
for (let i = 0; i < l; i += 1) { // for each point
points[i] = [];
for (let j = 0; j < 2; j += 1) { // each point coordinate
// eslint-disable-next-line no-bitwise
points[i].push(((a[i][j] + (b[i][j] - a[i][j]) * v) * 1000 >> 0) / 1000);
}
}

10
src/interpolation/numbers.js
View file

@ -1,4 +1,12 @@
export default function numbers(a, b, v) { // number1, number2, progress
/**
* Numbers Interpolation Function.
*
* @param {number} a start value
* @param {number} b end value
* @param {number} v progress
* @returns {number} the interpolated number
*/
export default function numbers(a, b, v) {
const A = +a;
const B = b - a;
// a = +a; b -= a;

10
src/interpolation/perspective.js
View file

@ -1,3 +1,13 @@
/**
* Perspective Interpolation Function.
*
* @param {number} a start value
* @param {number} b end value
* @param {string} u unit
* @param {number} v progress
* @returns {string} the perspective function in string format
*/
export default function perspective(a, b, u, v) {
// eslint-disable-next-line no-bitwise
return `perspective(${((a + (b - a) * v) * 1000 >> 0) / 1000}${u})`;
}

10
src/interpolation/rotate.js
View file

@ -1,3 +1,13 @@
/**
* 2D Rotation Interpolation Function.
*
* @param {number} a start angle
* @param {number} b end angle
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated rotation
*/
export default function rotate(a, b, u, v) {
// eslint-disable-next-line no-bitwise
return `rotate(${((a + (b - a) * v) * 1000 >> 0) / 1000}${u})`;
}

12
src/interpolation/rotate3d.js
View file

@ -1,7 +1,19 @@
/**
* 3D Rotation Interpolation Function.
*
* @param {number} a start [x,y,z] angles
* @param {number} b end [x,y,z] angles
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated 3D rotation string
*/
export default function rotate3d(a, b, u, v) {
let rotateStr = '';
// eslint-disable-next-line no-bitwise
rotateStr += a[0] || b[0] ? `rotateX(${((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000}${u})` : '';
// eslint-disable-next-line no-bitwise
rotateStr += a[1] || b[1] ? `rotateY(${((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000}${u})` : '';
// eslint-disable-next-line no-bitwise
rotateStr += a[2] || b[2] ? `rotateZ(${((a[2] + (b[2] - a[2]) * v) * 1000 >> 0) / 1000}${u})` : '';
return rotateStr;
}

9
src/interpolation/scale.js
View file

@ -1,3 +1,12 @@
/**
* Scale Interpolation Function.
*
* @param {number} a start scale
* @param {number} b end scale
* @param {number} v progress
* @returns {string} the interpolated scale
*/
export default function scale(a, b, v) {
// eslint-disable-next-line no-bitwise
return `scale(${((a + (b - a) * v) * 1000 >> 0) / 1000})`;
}

11
src/interpolation/skew.js
View file

@ -1,6 +1,17 @@
/**
* Skew Interpolation Function.
*
* @param {number} a start {x,y} angles
* @param {number} b end {x,y} angles
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated string value of skew(s)
*/
export default function skew(a, b, u, v) {
const skewArray = [];
// eslint-disable-next-line no-bitwise
skewArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u;
// eslint-disable-next-line no-bitwise
skewArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0';
return `skew(${skewArray.join(',')})`;
}

10
src/interpolation/skewX.js
View file

@ -1,3 +1,13 @@
/**
* SkewX Interpolation Function.
*
* @param {number} a start angle
* @param {number} b end angle
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated skewX
*/
export default function skewX(a, b, u, v) {
// eslint-disable-next-line no-bitwise
return `skewX(${((a + (b - a) * v) * 1000 >> 0) / 1000}${u})`;
}

10
src/interpolation/skewY.js
View file

@ -1,3 +1,13 @@
/**
* SkewY Interpolation Function.
*
* @param {number} a start angle
* @param {number} b end angle
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated skewY
*/
export default function skewY(a, b, u, v) {
// eslint-disable-next-line no-bitwise
return `skewY(${((a + (b - a) * v) * 1000 >> 0) / 1000}${u})`;
}

11
src/interpolation/translate.js
View file

@ -1,6 +1,17 @@
/**
* Translate 2D Interpolation Function.
*
* @param {number[]} a start [x,y] position
* @param {number[]} b end [x,y] position
* @param {string} u unit, usually `px` degrees
* @param {number} v progress
* @returns {string} the interpolated 2D translation string
*/
export default function translate(a, b, u, v) {
const translateArray = [];
// eslint-disable-next-line no-bitwise
translateArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u;
// eslint-disable-next-line no-bitwise
translateArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0';
return `translate(${translateArray.join(',')})`;
}

10
src/interpolation/translate3d.js
View file

@ -1,7 +1,17 @@
/**
* Translate 3D Interpolation Function.
*
* @param {number[]} a start [x,y,z] position
* @param {number[]} b end [x,y,z] position
* @param {string} u unit, usually `px` degrees
* @param {number} v progress
* @returns {string} the interpolated 3D translation string
*/
export default function translate3d(a, b, u, v) {
const translateArray = [];
for (let ax = 0; ax < 3; ax += 1) {
translateArray[ax] = (a[ax] || b[ax]
// eslint-disable-next-line no-bitwise
? ((a[ax] + (b[ax] - a[ax]) * v) * 1000 >> 0) / 1000 : 0) + u;
}
return `translate3d(${translateArray.join(',')})`;

9
src/interpolation/units.js
View file

@ -1,3 +1,12 @@
/**
* Units Interpolation Function.
*
* @param {number} a start value
* @param {number} b end value
* @param {string} u unit
* @param {number} v progress
* @returns {string} the interpolated value + unit string
*/
export default function units(a, b, u, v) { // number1, number2, unit, progress
const A = +a;
const B = b - a;

14
src/objects/componentsBase.js
View file

@ -1,11 +1,11 @@
import Animation from '../animation/animationBase.js';
import Animation from '../animation/animationBase';
// kute-base.js supported components
import baseTransform from '../components/transformFunctionsBase.js';
import baseBoxModel from '../components/boxModelBase.js';
import baseOpacity from '../components/opacityPropertyBase.js';
// import {baseCrossBrowserMove} from '../components/crossBrowserMove.js'
// support for kute-base.js ends here
// kute-base supported components
import baseTransform from '../components/transformFunctionsBase';
import baseBoxModel from '../components/boxModelBase';
import baseOpacity from '../components/opacityPropertyBase';
// import {baseCrossBrowserMove} from '../components/crossBrowserMove'
// support for kute-base ends here
const Components = {
Transform: new Animation(baseTransform),

20
src/objects/componentsDefault.js
View file

@ -1,20 +1,20 @@
import Animation from '../animation/animation.js';
import Animation from '../animation/animation';
import EssentialBoxModel from '../components/boxModelEssential.js';
import ColorsProperties from '../components/colorProperties.js';
import HTMLAttributes from '../components/htmlAttributes.js';
import OpacityProperty from '../components/opacityProperty.js';
import TextWrite from '../components/textWrite.js';
import TransformFunctions from '../components/transformFunctions.js';
import SVGDraw from '../components/svgDraw.js';
import SVGMorph from '../components/svgMorph.js';
import EssentialBoxModel from '../components/boxModelEssential';
import ColorsProperties from '../components/colorProperties';
import HTMLAttributes from '../components/htmlAttributes';
import OpacityProperty from '../components/opacityProperty';
import TextWriteProp from '../components/textWrite';
import TransformFunctions from '../components/transformFunctions';
import SVGDraw from '../components/svgDraw';
import SVGMorph from '../components/svgMorph';
const Components = {
EssentialBoxModel,
ColorsProperties,
HTMLAttributes,
OpacityProperty,
TextWrite,
TextWriteProp,
TransformFunctions,
SVGDraw,
SVGMorph,

32
src/objects/componentsExtra.js
View file

@ -1,21 +1,21 @@
import Animation from '../animation/animationDevelopment.js';
import Animation from '../animation/animationDevelopment';
import BackgroundPosition from '../components/backgroundPosition.js';
import BorderRadius from '../components/borderRadius.js';
import BoxModel from '../components/boxModel.js';
import ClipProperty from '../components/clipProperty.js';
import ColorProperties from '../components/colorProperties.js';
import BackgroundPosition from '../components/backgroundPosition';
import BorderRadius from '../components/borderRadius';
import BoxModel from '../components/boxModel';
import ClipProperty from '../components/clipProperty';
import ColorProperties from '../components/colorProperties';
import FilterEffects from '../components/filterEffects';
import HTMLAttributes from '../components/htmlAttributes.js';
import OpacityProperty from '../components/opacityProperty.js';
import SVGDraw from '../components/svgDraw.js';
import SVGCubicMorph from '../components/svgCubicMorph.js';
import SVGTransform from '../components/svgTransform.js';
import ScrollProperty from '../components/scrollProperty.js';
import ShadowProperties from '../components/shadowProperties.js';
import TextProperties from '../components/textProperties.js';
import TextWriteProperties from '../components/textWrite.js';
import MatrixTransform from '../components/transformMatrix.js';
import HTMLAttributes from '../components/htmlAttributes';
import OpacityProperty from '../components/opacityProperty';
import SVGDraw from '../components/svgDraw';
import SVGCubicMorph from '../components/svgCubicMorph';
import SVGTransform from '../components/svgTransform';
import ScrollProperty from '../components/scrollProperty';
import ShadowProperties from '../components/shadowProperties';
import TextProperties from '../components/textProperties';
import TextWriteProperties from '../components/textWrite';
import MatrixTransform from '../components/transformMatrix';
const Components = {
BackgroundPosition,

7
src/objects/connect.js
View file

@ -1 +1,6 @@
export default {};
const connect = {};
/** @type {KUTE.TweenBase | KUTE.Tween | KUTE.TweenExtra} */
connect.tween = null;
connect.processEasing = null;
export default connect;

Some files were not shown because too many files have changed in this diff Show more