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

Browse source
This commit is contained in:
thednp 2020-06-23 16:38:58 +00:00
parent 3ce5b8b590
commit 000af8a625
27 changed files with 312 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
demo/opacityProperty.html
View file

@ -121,6 +121,7 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
<h3>Notes</h3>
<ul>
<li>This demo should work with IE9+ browsers.</li>
<li>Support for the specific IE8 <code>filter:alpha(opacity=50)</code> have been dropped.</li>
<li>Early implementations with vendor preffixes such as <code>-o-opacity</code>, <code>-moz-opacity</code> or <code>-ms-opacity</code> are not supported.</li>
<li>The component is an essential part in ALL KUTE.js distributions.</li>
@ -140,8 +141,9 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
<!-- 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.min.js"></script>
<!-- <script src="./src/polyfill-legacy.min.js"></script> -->
<script src="./src/polyfill-legacy.min.js"></script>
<script src="./src/kute.min.js"></script>
<script src="./assets/js/prism.js"></script>
<script src="./assets/js/opacityProperty.js"></script>

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

@ -1,5 +1,5 @@
/*!
* KUTE.js Base v2.0.7 (http://thednp.github.io/kute.js)
* KUTE.js Base v2.0.8 (http://thednp.github.io/kute.js)
* Copyright 2015-2020 © thednp
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
*/
@ -9,7 +9,7 @@
(global = global || self, global.KUTE = factory());
}(this, (function () { 'use strict';
var version = "2.0.7";
var version = "2.0.8";
var KUTE = {};
@ -24,16 +24,7 @@
var onStart = {};
var Time = {};
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
var Tick = 0;
var Ticker = function (time) {
var i = 0;
@ -276,7 +267,7 @@
TweenBase.prototype.start = function start (time) {
add(this);
this.playing = true;
this._startTime = time || KUTE.Time();
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
this._startTime += this._delay;
if (!this._startFired) {
if (this._onStart) {

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

File diff suppressed because one or more lines are too long

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

@ -1,5 +1,5 @@
/*!
* KUTE.js Extra v2.0.7 (http://thednp.github.io/kute.js)
* KUTE.js Extra v2.0.8 (http://thednp.github.io/kute.js)
* Copyright 2015-2020 © thednp
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
*/
@ -9,7 +9,7 @@
(global = global || self, global.KUTE = factory());
}(this, (function () { 'use strict';
var version = "2.0.7";
var version = "2.0.8";
var KUTE = {};
@ -24,16 +24,7 @@
var onStart = {};
var Time = {};
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
var Tick = 0;
var Ticker = function (time) {
var i = 0;
@ -386,7 +377,7 @@
TweenBase.prototype.start = function start (time) {
add(this);
this.playing = true;
this._startTime = time || KUTE.Time();
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
this._startTime += this._delay;
if (!this._startFired) {
if (this._onStart) {
@ -1162,7 +1153,7 @@
var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
var defaultColors = {};
supportedColors.forEach(function (tweenProp) {
supportedColors.map(function (tweenProp) {
defaultColors[tweenProp] = '#000';
});
var colorsOnStart = {};

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

3
demo/src/polyfill-legacy.min.js vendored Normal file
View file

@ -0,0 +1,3 @@
// KUTE.js Polyfill v2.0.8 | 2020 © thednp | MIT-License
"use strict";
var r,n,t,e;if(Function.prototype.bind||(Function.prototype.bind=function(){var r=Array.prototype.slice,n=this,t=arguments[0],e=r.call(arguments,1);if("function"!=typeof n)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");return function(){var o=e.concat(r.call(arguments));return n.apply(t,o)}}),Array.from||(Array.from=(r=Object.prototype.toString,n=function(n){return"function"==typeof n||"[object Function]"===r.call(n)},t=Math.pow(2,53)-1,e=function(r){var n=function(r){var n=Number(r);return isNaN(n)?0:0!==n&&isFinite(n)?(n>0?1:-1)*Math.floor(Math.abs(n)):n}(r);return Math.min(Math.max(n,0),t)},function(r){var t=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!n(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var f,u=e(o.length),c=n(t)?Object(new t(u)):new Array(u),p=0;p<u;)f=o[p],c[p]=a?void 0===i?a(f,p):a.call(i,f,p):f,p+=1;return c.length=u,c})),Array.prototype.map||(Array.prototype.map=function(r){var n,t,e;if(null==this)throw new TypeError("this is null or not defined");var o=Object(this),i=o.length>>>0;if("function"!=typeof r)throw new TypeError(r+" is not a function");for(arguments.length>1&&(n=arguments[1]),t=new Array(i),e=0;e<i;){var a,f;e in o&&(a=o[e],f=r.call(n,a,e,o),t[e]=f),e++}return t}),Array.prototype.some||(Array.prototype.some=function(r,n){if(null==this)throw new TypeError("Array.prototype.some called on null or undefined");if("function"!=typeof r)throw new TypeError;for(var t=Object(this),e=t.length>>>0,o=0;o<e;o++)if(o in t&&r.call(n,t[o],o,t))return!0;return!1}),Array.prototype.every||(Array.prototype.every=function(r,n){var t,e;if(null==this)throw new TypeError("this is null or not defined");var o=Object(this),i=o.length>>>0;if("function"!=typeof r&&"[object Function]"!==Object.prototype.toString.call(r))throw new TypeError;for(arguments.length>1&&(t=n),e=0;e<i;){var a;if(e in o)if(a=o[e],!(t?r.call(t,a,e,o):r(a,e,o)))return!1;e++}return!0}),Array.prototype.includes||(Array.prototype.includes=function(r){var n=Object(this),t=parseInt(n.length)||0;if(0===t)return!1;var e,o,i=parseInt(arguments[1])||0;for(i>=0?e=i:(e=t+i)<0&&(e=0);e<t;){if(r===(o=n[e])||r!=r&&o!=o)return!0;e++}return!1}),String.prototype.includes||(String.prototype.includes=function(r,n){if(r instanceof RegExp)throw TypeError("first argument must not be a RegExp");return void 0===n&&(n=0),-1!==this.indexOf(r,n)}),Date.now||(Date.now=function(){return(new Date).getTime()}),self.performance||(self.performance={}),!self.performance.now)if("undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime)self.performance.now=function(){var r=process.hrtime();return 1e3*r[0]+r[1]/1e6};else{var o=Date.now();self.performance.now=function(){return Date.now()-o}}if(!window.requestAnimationFrame){var i=Date.now();window.requestAnimationFrame=function(r){if("function"!=typeof r)throw new TypeError(r+"is not a function");var n=Date.now(),t=16+i-n;return t<0&&(t=0),i=n,setTimeout((function(){i=Date.now(),r(performance.now())}),t)},window.cancelAnimationFrame=function(r){clearTimeout(r)}}

2
demo/src/polyfill.min.js vendored
View file

@ -1,3 +1,3 @@
// KUTE.js Polyfill v2.0.7 | 2020 © thednp | MIT-License
// KUTE.js Polyfill v2.0.8 | 2020 © thednp | MIT-License
"use strict";
var r,t,n,e;Array.from||(Array.from=(r=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===r.call(t)},n=Math.pow(2,53)-1,e=function(r){var t=function(r){var t=Number(r);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p<f;)u=o[p],c[p]=a?void 0===i?a(u,p):a.call(i,u,p):u,p+=1;return c.length=f,c})),Array.prototype.includes||(Array.prototype.includes=function(r){var t=Object(this),n=parseInt(t.length)||0;if(0===n)return!1;var e,o,i=parseInt(arguments[1])||0;for(i>=0?e=i:(e=n+i)<0&&(e=0);e<n;){if(r===(o=t[e])||r!=r&&o!=o)return!0;e++}return!1}),String.prototype.includes||(String.prototype.includes=function(r,t){if(r instanceof RegExp)throw TypeError("first argument must not be a RegExp");return void 0===t&&(t=0),-1!==this.indexOf(r,t)});

7
demo/transformFunctions.html
View file

@ -91,7 +91,8 @@
<p class="condensed text-right">The component to cover animation for most <b>transform</b> functions with improved performance and faster value processing.</p>
</div>
<div class="col9 border">
<p class="lead condensed">The KUTE.js <b>Transform Functions</b> enables animation for the CSS3 <b>transform</b> style on <b>Element</b> targets on most modern browsers and specific legacy browsers.</p>
<p class="lead condensed">The KUTE.js <b>Transform Functions</b> enables animation for the CSS3 <b>transform</b> style on <b>Element</b> targets on modern browsers. For specific legacy browsers there is another
component called <b>Transform Legacy</b> you will find in the source folders.</p>
<p>Starting with KUTE.js version 2.0, you can set the <b>perspective</b> function as a tween property, while you can still rely on a parent's perspective but for less performance.</p>
<p>All the previous perspective related options have been removed. The <b>transform</b> CSS3 property itself no longer uses preffixes like <b>webkit</b>, <b>moz</b> or <b>ms</b> since all major
browsers are standardized.</p>
@ -138,6 +139,8 @@
<li><kbd class="bg-blue">scale</kbd> function will scale a target element on all axes. Eg. <code>scale:1.5</code> will scale up a target element by 50%. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-red">matrix</kbd> is not supported by this component, but is implemented in the <a href="transformMatrix.html">transformMatrix</a> component.</li>
</ul>
<p>As a quick note, all input values for <kbd class="bg-blue">translate</kbd>, <kbd class="bg-blue">rotate</kbd> or single axis translation, skew or rotation will be all stacked into <kbd class="bg-blue">translate3d</kbd>,
<kbd class="bg-blue">skew</kbd> and <kbd class="bg-blue">rotate3d</kbd> respectivelly; this is to further improve performance on modern browsers.</p>
<h3>Translations</h3>
@ -254,6 +257,7 @@ var tween2 = KUTE.fromTo(
<h3>Notes</h3>
<ul>
<li>This demo page should work with IE10+ browsers.</li>
<li>The order of the transform functions/properties is always the same: <code>perspective</code>, <code>translation</code>, <code>rotation</code>, <code>skew</code>, <code>scale</code>, this way we can prevent
jumpy/janky animations; one of the reasons is consistency in all transform based components and another reason is the order of execution from the draft for
<a href="https://drafts.csswg.org/css-transforms-2/#recomposing-to-a-3d-matrix">matrix3d recomposition</a>.</li>
@ -283,6 +287,7 @@ var tween2 = KUTE.fromTo(
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- <script src="./src/polyfill-legacy.min.js"></script> -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute.js"></script>
<!-- <script src="../dist/kute.js"></script> -->

1
demo/transformMatrix.html
View file

@ -171,6 +171,7 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-
<h3>Notes</h3>
<ul>
<li>This demo page should work with IE10+ browsers.</li>
<li>Why no support for the <code>matrix3d</code> function? Simple: we can of course interpolate 16 numbers super fast, but we won't be able to rotate on any axis above 360 degrees.
As <a href="https://stackoverflow.com/a/39870758/803358">explained here</a>, surely for performance reasons the browsers won't try and compute angles above 360 degrees, but simplify
the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.</li>

2
dist/polyfill.js vendored
View file

@ -1,5 +1,5 @@
/*!
* KUTE.js Polyfill v2.0.7 (http://thednp.github.io/kute.js)
* KUTE.js Polyfill v2.0.8 (http://thednp.github.io/kute.js)
* Copyright 2015-2020 © thednp
* Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE)
*/

2
dist/polyfill.min.js vendored
View file

@ -1,3 +1,3 @@
// KUTE.js Polyfill v2.0.7 | 2020 © thednp | MIT-License
// KUTE.js Polyfill v2.0.8 | 2020 © thednp | MIT-License
"use strict";
var r,t,n,e;Array.from||(Array.from=(r=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===r.call(t)},n=Math.pow(2,53)-1,e=function(r){var t=function(r){var t=Number(r);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p<f;)u=o[p],c[p]=a?void 0===i?a(u,p):a.call(i,u,p):u,p+=1;return c.length=f,c})),Array.prototype.includes||(Array.prototype.includes=function(r){var t=Object(this),n=parseInt(t.length)||0;if(0===n)return!1;var e,o,i=parseInt(arguments[1])||0;for(i>=0?e=i:(e=n+i)<0&&(e=0);e<n;){if(r===(o=t[e])||r!=r&&o!=o)return!0;e++}return!1}),String.prototype.includes||(String.prototype.includes=function(r,t){if(r instanceof RegExp)throw TypeError("first argument must not be a RegExp");return void 0===t&&(t=0),-1!==this.indexOf(r,t)});

7
package.json
View file

@ -1,6 +1,6 @@
{
"name": "kute.js",
"version": "2.0.7",
"version": "2.0.8",
"description": "JavaScript animation engine of the future is called KUTE.js.",
"main": "dist/kute.min.js",
"module": "dist/kute.esm.js",
@ -24,7 +24,8 @@
"build-base-min": "rollup --environment DIST:base,MIN:true,FORMAT:umd -c",
"build-extra": "rollup --environment DIST:extra,MIN:false,FORMAT:umd -c",
"build-extra-min": "rollup --environment DIST:extra,MIN:true,FORMAT:umd -c",
"polyfill": "npm-run-all --parallel polyfill-unminified polyfill-minified copy-polyfill",
"polyfill": "npm-run-all --parallel polyfill-unminified polyfill-minified copy-polyfill copy-polyfill-legacy",
"copy-polyfill-legacy": "rollup --environment INPUTFILE:src/util/polyfill-legacy.js,OUTPUTFILE:demo/src/polyfill-legacy.min.js,MIN:true -c rollup.polyfill.js",
"copy-polyfill": "rollup --environment OUTPUTFILE:demo/src/polyfill.min.js,MIN:true -c rollup.polyfill.js",
"polyfill-unminified": "rollup --environment MIN:false -c rollup.polyfill.js",
"polyfill-minified": "rollup --environment MIN:true -c rollup.polyfill.js"
@ -54,7 +55,7 @@
"homepage": "http://thednp.github.io/kute.js",
"dependencies": {
"cubic-bezier-easing": "^1.0.2",
"minifill": "^0.0.8",
"minifill": "^0.0.12",
"shorter-js": "^0.1.0"
},
"devDependencies": {

4
rollup.polyfill.js
View file

@ -22,8 +22,8 @@ const miniBanner = `// KUTE.js Polyfill v${pkg.version} | ${year} © ${pkg.autho
const MIN = process.env.MIN === 'true' // true/false|unset
const FORMAT = 'esm' // umd|iife|esm|cjs
const INPUTFILE = './src/util/polyfill.js'
const OUTPUTFILE = process.env.OUTPUTFILE ? process.env.OUTPUTFILE : './dist/polyfill'+(MIN?'.min':'')+'.js'
const INPUTFILE = process.env.INPUTFILE ? process.env.INPUTFILE : 'src/util/polyfill.js'
const OUTPUTFILE = process.env.OUTPUTFILE ? process.env.OUTPUTFILE : 'dist/polyfill'+(MIN?'.min':'')+'.js'
const OUTPUT = {
file: OUTPUTFILE,

2
src/components/colorProperties.js
View file

@ -13,7 +13,7 @@ import {onStartColors} from './colorPropertiesBase.js'
const supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']
const defaultColors = {}
supportedColors.forEach(tweenProp => {
supportedColors.map(tweenProp => {
defaultColors[tweenProp] = '#000'
});

24
src/components/transformFunctions.js
View file

@ -11,6 +11,7 @@ import skew from '../interpolation/skew.js'
import {onStartTransform} from './transformFunctionsBase.js'
// const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
// the component developed for modern browsers supporting non-prefixed transform
// Component Functions
function getTransform(tweenProperty,value){
@ -19,31 +20,36 @@ function getTransform(tweenProperty,value){
}
function prepareTransform(prop,obj){
let prepAxis = ['X', 'Y', 'Z'], // coordinates
translateArray = [], rotateArray = [], skewArray = [],
transformObject = {},
translateArray = [], rotateArray = [], skewArray = [],
arrayFunctions = ['translate3d','translate','rotate3d','skew']
for (const x in obj) {
let pv = typeof obj[x] === 'object' && obj[x].length ? obj[x].map(v=>parseInt(v)) : parseInt(obj[x]);
if (arrayFunctions.includes(x)) {
const pv = typeof(obj[x]) === 'object' ? obj[x].map(v=>parseInt(v)) : [parseInt(obj[x]),0]
let propId = x === 'translate' || x === 'rotate' ? `${x}3d` : x;
transformObject[x] = x === 'skew' || x === 'translate' ? [pv[0]||0, pv[1]||0]
transformObject[propId] = x === 'skew' ? (pv.length ? [pv[0]||0, pv[1]||0] : [pv||0,0] )
: x === 'translate' ? (pv.length ? [pv[0]||0, pv[1]||0, pv[2]||0] : [pv||0,0,0] )
: [pv[0]||0, pv[1]||0,pv[2]||0] // translate3d | rotate3d
} else if ( /[XYZ]/.test(x) ) {
const fn = x.replace(/[XYZ]/,'');
const fnId = fn === 'skew' ? fn : `${fn}3d`;
const fnArray = fn === 'translate' ? translateArray
let fn = x.replace(/[XYZ]/,''),
fnId = fn === 'skew' ? fn : `${fn}3d`,
fnLen = fn === 'skew' ? 2 : 3,
fnArray = fn === 'translate' ? translateArray
: fn === 'rotate' ? rotateArray
: fn === 'skew' ? skewArray : {}
for (let fnIndex = 0; fnIndex < 3; fnIndex++) {
for (let fnIndex = 0; fnIndex < fnLen; fnIndex++) {
const fnAxis = prepAxis[fnIndex];
fnArray[fnIndex] = (`${fn}${fnAxis}` in obj) ? parseInt(obj[`${fn}${fnAxis}`]) : 0;
}
transformObject[fnId] = fnArray;
} else { // scale | rotate | perspective
transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : parseInt(obj[x])
} else if (x==='rotate') { // rotate
transformObject['rotate3d'] = [0,0,pv]
} else { // scale | perspective
transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : pv
}
}
return transformObject;

2
src/components/transformFunctionsBase.js
View file

@ -16,9 +16,7 @@ export function onStartTransform(tweenProp){
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.translate ? translate(a.translate,b.translate,'px',v):'') // array [x,y]
+ (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'') // array [x,y,z]
+ (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]
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0
}

134
src/components/transformLegacy.js Normal file
View file

@ -0,0 +1,134 @@
import defaultValues from '../objects/defaultValues.js'
import Components from '../objects/components.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.js'
import {onStartLegacyTransform} from './transformLegacyBase.js'
import transformProperty from '../util/transformProperty.js'
import supportTransform from '../util/supportLegacyTransform.js'
// const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // 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
function getLegacyTransform(tweenProperty,value){
const currentStyle = getInlineStyleLegacy(this.element);
return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty];
}
function prepareLegacyTransform(prop,obj){
let prepAxis = ['X', 'Y', 'Z'], // coordinates
translateArray = [], rotateArray = [], skewArray = [],
transformObject = {},
arrayFunctions = ['translate3d','translate','rotate3d','skew']
for (const x in obj) {
const pv = typeof(obj[x]) === 'object' && obj[x].length ? obj[x].map(v=>parseInt(v)) : parseInt(obj[x])
if (arrayFunctions.includes(x)) {
if (support3DTransform){
if (x==='translate3d' || x==='rotate3d') {
transformObject[x] = pv
} else if (x==='translate'){
transformObject['translate3d'] = pv.length ? pv.concat(0) : [pv||0,0,0]
} else if (x==='rotate'){
transformObject['rotate3d'] = [0,0,pv||0]
} else if (x==='skew'){
transformObject[x] = pv.length ? pv : [pv||0,0]
}
} else if (supportTransform) {
if (x==='translate3d') {
transformObject['translate'] = [pv[0]||0,pv[1]||0]
} else if (x==='translate' || x==='skew'){
transformObject[x] = pv.length ? pv : [pv||0,0]
} else if (x==='rotate3d'){
transformObject['rotate'] = pv[2]||pv[1]||pv[0]
} else if (x==='rotate'){
transformObject[x] = pv
}
}
} else if ( /[XYZ]/.test(x) ) {
let fn = x.replace(/[XYZ]/,''),
fnId = fn === 'skew' || !support3DTransform ? fn : `${fn}3d`,
fnLen = fn === 'skew' || (!support3DTransform && fn === 'translate') ? 2 : 3,
fnArray = fn === 'translate' ? translateArray
: fn === 'rotate' && support3DTransform ? rotateArray
: fn === 'skew' ? skewArray : {}
for (let fnIndex = 0; fnIndex < fnLen; fnIndex++) {
let fnAxis = prepAxis[fnIndex];
fnArray[fnIndex] = (`${fn}${fnAxis}` in obj) ? parseInt(obj[`${fn}${fnAxis}`]) : 0;
}
transformObject[fnId] = support3DTransform ? fnArray : fn === 'rotate' ? fnArray[2]||fnArray[1]||fnArray[0] : fnArray;
} else if (x==='rotate') { // 2d rotate
let pType = support3DTransform ? 'rotate3d' : 'rotate';
transformObject[pType] = support3DTransform ? [0,0,pv] : pv
} else { // scale | perspective
transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : pv
}
}
return transformObject;
}
function crossCheckLegacyTransform(tweenProp){
if (this.valuesEnd[tweenProp]) {
if ( this.valuesEnd[tweenProp] && support3DTransform) {
if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){
this.valuesStart[tweenProp].perspective = this.valuesEnd[tweenProp].perspective
}
}
}
}
// All Component Functions
const transformLegacyFunctions = {
prepareStart: getLegacyTransform,
prepareProperty: prepareLegacyTransform,
onStart: onStartLegacyTransform,
crossCheck: crossCheckLegacyTransform
}
const legacyTransformValues = {
perspective: 400,
translate3d: [0,0,0], translateX: 0, translateY: 0, translateZ: 0, translate: [0,0],
rotate3d: [0,0,0], rotateX: 0, rotateY: 0, rotateZ: 0, rotate: 0,
skewX: 0, skewY: 0, skew: [0,0],
scale: 1
}
const legacyTransformProperties = [
'perspective',
'translate3d', 'translateX', 'translateY', 'translateZ', 'translate',
'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate',
'skewX', 'skewY', 'skew',
'scale'
]
// Full Component
const transformLegacyComponent = {
component: 'transformFunctions',
property: 'transform',
subProperties: legacyTransformProperties,
defaultValues: legacyTransformValues,
functions: transformLegacyFunctions,
Interpolate: {
perspective: perspective,
translate3d: translate3d,
rotate3d: rotate3d,
translate: translate, rotate: rotate, scale: scale, skew: skew
},
Util: [transformProperty]
}
export default transformLegacyComponent
Components.TransformLegacy = transformLegacyComponent

56
src/components/transformLegacyBase.js Normal file
View file

@ -0,0 +1,56 @@
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.js'
import supportTransform from '../util/supportLegacyTransform.js'
import transformProperty from '../util/transformProperty.js'
// const baseLegacyTransform = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
// the component that handles all browsers IE9+
// Component Functions
export function onStartLegacyTransform(tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
if (support3DTransform){
KUTE[tweenProp] = (elem, a, b, v) => {
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]
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y]
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0
}
} else if (supportTransform) {
KUTE[tweenProp] = (elem, a, b, v) => {
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]
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0
}
}
}
}
// Base Component
const BaseLegacyTransform = {
component: 'baseLegacyTransform',
property: 'transform',
functions: {onStart: onStartLegacyTransform},
Interpolate: {
perspective: perspective,
translate3d: translate3d,
rotate3d: rotate3d,
translate: translate, rotate: rotate, scale: scale, skew: skew
},
Util: {transformProperty}
}
export default BaseLegacyTransform

17
src/core/render.js
View file

@ -4,21 +4,10 @@ import globalObject from '../objects/globalObject.js'
import Interpolate from '../objects/interpolate.js'
import onStart from '../objects/onStart.js'
// const Time = window.performance
const Time = {}
// In node.js, use process.hrtime.
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
// In a browser, use self.performance.now if it is available.
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
Time.now = self.performance.now.bind(self.performance)
// export {Time}
let Tick = 0

1
src/index.js
View file

@ -29,6 +29,7 @@ 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 TransformFunctions from './components/transformLegacy.js'
import SVGDraw from './components/svgDraw.js'
import SVGMorph from './components/svgMorph.js'

21
src/process/getInlineStyleLegacy.js Normal file
View file

@ -0,0 +1,21 @@
import transformProperty from '../util/transformProperty.js'
export default function(el) {
if ( !el.style ) return; // if the scroll applies to `window` it returns as it has no styling
let css = el.style.cssText.replace(/\s/g,'').split(';'), // the cssText | the resulting transform object
transformObject = {},
arrayFn = ['translate3d','translate','scale3d','skew'];
css.map(cs => {
let csi = cs.split(':')
if ( csi[0] === transformProperty ) {
let tps = csi[1].split(')'); //all transform properties
tps.map(tpi => {
let tpv = tpi.split('('), tp = tpv[0], tv = tpv[1]; // each transform property
if ( !/matrix/.test(tp) ){
transformObject[tp] = arrayFn.includes(tp) ? tv.split(',') : tv;
}
})
}
})
return transformObject;
}

2
src/tween/tweenBase.js
View file

@ -66,7 +66,7 @@ export default class TweenBase {
add(this);
this.playing = true;
this._startTime = time || KUTE.Time();
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
this._startTime += this._delay;
if (!this._startFired) {

20
src/util/polyfill-legacy.js Normal file
View file

@ -0,0 +1,20 @@
// build this polyfill for IE9+ browser support
// import 'minifill/src/this.Window.js'
// import 'minifill/src/this.Document.js'
// import 'minifill/src/window.HTMLElement.js'
// import 'minifill/src/Object.defineProperty.js'
// import 'minifill/src/Object.create.js'
import 'minifill/src/Function.prototype.bind.js'
import 'minifill/src/Array.from.js'
import 'minifill/src/Array.prototype.map.js'
import 'minifill/src/Array.prototype.some.js'
import 'minifill/src/Array.prototype.every.js'
import 'minifill/src/Array.prototype.includes.js'
import 'minifill/src/String.prototype.includes.js'
// IE9+
import 'minifill/src/Date.now.js'
import 'minifill/src/window.performance.now.js'
import 'minifill/src/window.requestAnimationFrame.js'

1
src/util/polyfill.js
View file

@ -1,3 +1,4 @@
// IE10+
import 'minifill/src/Array.from.js'
import 'minifill/src/Array.prototype.includes.js'
import 'minifill/src/String.prototype.includes.js'

2
src/util/supportLegacyTransform.js Normal file
View file

@ -0,0 +1,2 @@
import transformProperty from './transformProperty.js'
export default transformProperty in document.body.style

2
src/util/transformProperty.js Normal file
View file

@ -0,0 +1,2 @@
import trueProperty from './trueProperty.js'
export default trueProperty('transform')