This commit is contained in:
parent
3ce5b8b590
commit
000af8a625
|
@ -121,6 +121,7 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
|
||||||
|
|
||||||
<h3>Notes</h3>
|
<h3>Notes</h3>
|
||||||
<ul>
|
<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>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>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>
|
<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 =============================================== -->
|
<!-- JavaScript =============================================== -->
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
<script src="./src/polyfill.min.js"></script>
|
<!-- <script src="./src/polyfill-legacy.min.js"></script> -->
|
||||||
<script src="./src/kute-extra.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/prism.js"></script>
|
||||||
|
|
||||||
<script src="./assets/js/opacityProperty.js"></script>
|
<script src="./assets/js/opacityProperty.js"></script>
|
||||||
|
|
|
@ -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
|
* Copyright 2015-2020 © thednp
|
||||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
@ -9,7 +9,7 @@
|
||||||
(global = global || self, global.KUTE = factory());
|
(global = global || self, global.KUTE = factory());
|
||||||
}(this, (function () { 'use strict';
|
}(this, (function () { 'use strict';
|
||||||
|
|
||||||
var version = "2.0.7";
|
var version = "2.0.8";
|
||||||
|
|
||||||
var KUTE = {};
|
var KUTE = {};
|
||||||
|
|
||||||
|
@ -24,16 +24,7 @@
|
||||||
var onStart = {};
|
var onStart = {};
|
||||||
|
|
||||||
var Time = {};
|
var Time = {};
|
||||||
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
|
Time.now = self.performance.now.bind(self.performance);
|
||||||
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 Tick = 0;
|
||||||
var Ticker = function (time) {
|
var Ticker = function (time) {
|
||||||
var i = 0;
|
var i = 0;
|
||||||
|
@ -276,7 +267,7 @@
|
||||||
TweenBase.prototype.start = function start (time) {
|
TweenBase.prototype.start = function start (time) {
|
||||||
add(this);
|
add(this);
|
||||||
this.playing = true;
|
this.playing = true;
|
||||||
this._startTime = time || KUTE.Time();
|
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
|
||||||
this._startTime += this._delay;
|
this._startTime += this._delay;
|
||||||
if (!this._startFired) {
|
if (!this._startFired) {
|
||||||
if (this._onStart) {
|
if (this._onStart) {
|
||||||
|
|
4
demo/src/kute-base.min.js
vendored
4
demo/src/kute-base.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -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
|
* Copyright 2015-2020 © thednp
|
||||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
@ -9,7 +9,7 @@
|
||||||
(global = global || self, global.KUTE = factory());
|
(global = global || self, global.KUTE = factory());
|
||||||
}(this, (function () { 'use strict';
|
}(this, (function () { 'use strict';
|
||||||
|
|
||||||
var version = "2.0.7";
|
var version = "2.0.8";
|
||||||
|
|
||||||
var KUTE = {};
|
var KUTE = {};
|
||||||
|
|
||||||
|
@ -24,16 +24,7 @@
|
||||||
var onStart = {};
|
var onStart = {};
|
||||||
|
|
||||||
var Time = {};
|
var Time = {};
|
||||||
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
|
Time.now = self.performance.now.bind(self.performance);
|
||||||
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 Tick = 0;
|
||||||
var Ticker = function (time) {
|
var Ticker = function (time) {
|
||||||
var i = 0;
|
var i = 0;
|
||||||
|
@ -386,7 +377,7 @@
|
||||||
TweenBase.prototype.start = function start (time) {
|
TweenBase.prototype.start = function start (time) {
|
||||||
add(this);
|
add(this);
|
||||||
this.playing = true;
|
this.playing = true;
|
||||||
this._startTime = time || KUTE.Time();
|
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
|
||||||
this._startTime += this._delay;
|
this._startTime += this._delay;
|
||||||
if (!this._startFired) {
|
if (!this._startFired) {
|
||||||
if (this._onStart) {
|
if (this._onStart) {
|
||||||
|
@ -1162,7 +1153,7 @@
|
||||||
|
|
||||||
var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
|
var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
|
||||||
var defaultColors = {};
|
var defaultColors = {};
|
||||||
supportedColors.forEach(function (tweenProp) {
|
supportedColors.map(function (tweenProp) {
|
||||||
defaultColors[tweenProp] = '#000';
|
defaultColors[tweenProp] = '#000';
|
||||||
});
|
});
|
||||||
var colorsOnStart = {};
|
var colorsOnStart = {};
|
||||||
|
|
4
demo/src/kute-extra.min.js
vendored
4
demo/src/kute-extra.min.js
vendored
File diff suppressed because one or more lines are too long
4
demo/src/kute.min.js
vendored
4
demo/src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
3
demo/src/polyfill-legacy.min.js
vendored
Normal file
3
demo/src/polyfill-legacy.min.js
vendored
Normal 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
2
demo/src/polyfill.min.js
vendored
|
@ -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";
|
"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)});
|
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)});
|
||||||
|
|
|
@ -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>
|
<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>
|
||||||
<div class="col9 border">
|
<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>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
|
<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>
|
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-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>
|
<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>
|
</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>
|
<h3>Translations</h3>
|
||||||
|
|
||||||
|
@ -254,6 +257,7 @@ var tween2 = KUTE.fromTo(
|
||||||
|
|
||||||
<h3>Notes</h3>
|
<h3>Notes</h3>
|
||||||
<ul>
|
<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
|
<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
|
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>
|
<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 =============================================== -->
|
<!-- JavaScript =============================================== -->
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- 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/polyfill.min.js"></script>
|
||||||
<script src="./src/kute.js"></script>
|
<script src="./src/kute.js"></script>
|
||||||
<!-- <script src="../dist/kute.js"></script> -->
|
<!-- <script src="../dist/kute.js"></script> -->
|
||||||
|
|
|
@ -171,20 +171,21 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-
|
||||||
|
|
||||||
<h3>Notes</h3>
|
<h3>Notes</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<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.
|
<li>This demo page should work with IE10+ browsers.</li>
|
||||||
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
|
<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.
|
||||||
the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.</li>
|
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
|
||||||
<li>The component does NOT include any scripting for matrix decomposition/unmatrix, after several years of research I came to the conclusion that there is no such thing to be reliable.
|
the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.</li>
|
||||||
Such a feature would allow us to kick start animations directly from <code>matrix3d</code> string/array values, but considering the size of this component, I let you draw the conclusions.</li>
|
<li>The component does NOT include any scripting for matrix decomposition/unmatrix, after several years of research I came to the conclusion that there is no such thing to be reliable.
|
||||||
<li>Despite the "limitations", we have some tricks available: the <code>fromTo()</code> method will never fail and it's much better when performance and sync are a must, and for <code>to()</code>
|
Such a feature would allow us to kick start animations directly from <code>matrix3d</code> string/array values, but considering the size of this component, I let you draw the conclusions.</li>
|
||||||
method we're storing the values from previous animations to have them ready and available for the next chained animation.</li>
|
<li>Despite the "limitations", we have some tricks available: the <code>fromTo()</code> method will never fail and it's much better when performance and sync are a must, and for <code>to()</code>
|
||||||
<li>The performance of this component is identical with the <b>Transform Functions</b> component, which is crazy and awesome, all that thanks to the <b>DOMMatrix</b> API built into our modern browsers.
|
method we're storing the values from previous animations to have them ready and available for the next chained animation.</li>
|
||||||
If that's not good enough, the API will automatically switch from <code>matrix3d</code> to <code>matrix</code> and vice-versa whenever needed to save power. Neat?</li>
|
<li>The performance of this component is identical with the <b>Transform Functions</b> component, which is crazy and awesome, all that thanks to the <b>DOMMatrix</b> API built into our modern browsers.
|
||||||
<li>The <code>rotate3d</code> property makes alot more sense for this component since the <b>DOMMatrix</b> <code>rotate(angleX,angleY,angleZ)</code> method works exactly the same, while the
|
If that's not good enough, the API will automatically switch from <code>matrix3d</code> to <code>matrix</code> and vice-versa whenever needed to save power. Neat?</li>
|
||||||
<code>rotate3d(vectorX,vectorY,vectorZ,angle)</code> function is a thing of the past, according to <a href="https://css-tricks.com/">Chris Coyier</a> nobody use it.</li>
|
<li>The <code>rotate3d</code> property makes alot more sense for this component since the <b>DOMMatrix</b> <code>rotate(angleX,angleY,angleZ)</code> method works exactly the same, while the
|
||||||
<li>Since the component fully utilize the <b>DOMMatrix</b> API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers
|
<code>rotate3d(vectorX,vectorY,vectorZ,angle)</code> function is a thing of the past, according to <a href="https://css-tricks.com/">Chris Coyier</a> nobody use it.</li>
|
||||||
like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.</li>
|
<li>Since the component fully utilize the <b>DOMMatrix</b> API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers
|
||||||
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> distribution file.</li>
|
like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.</li>
|
||||||
|
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> distribution file.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
2
dist/polyfill.js
vendored
2
dist/polyfill.js
vendored
|
@ -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
|
* Copyright 2015-2020 © thednp
|
||||||
* Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
|
2
dist/polyfill.min.js
vendored
2
dist/polyfill.min.js
vendored
|
@ -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";
|
"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)});
|
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)});
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "kute.js",
|
"name": "kute.js",
|
||||||
"version": "2.0.7",
|
"version": "2.0.8",
|
||||||
"description": "JavaScript animation engine of the future is called KUTE.js.",
|
"description": "JavaScript animation engine of the future is called KUTE.js.",
|
||||||
"main": "dist/kute.min.js",
|
"main": "dist/kute.min.js",
|
||||||
"module": "dist/kute.esm.js",
|
"module": "dist/kute.esm.js",
|
||||||
|
@ -24,7 +24,8 @@
|
||||||
"build-base-min": "rollup --environment DIST:base,MIN:true,FORMAT:umd -c",
|
"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": "rollup --environment DIST:extra,MIN:false,FORMAT:umd -c",
|
||||||
"build-extra-min": "rollup --environment DIST:extra,MIN:true,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",
|
"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-unminified": "rollup --environment MIN:false -c rollup.polyfill.js",
|
||||||
"polyfill-minified": "rollup --environment MIN:true -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",
|
"homepage": "http://thednp.github.io/kute.js",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cubic-bezier-easing": "^1.0.2",
|
"cubic-bezier-easing": "^1.0.2",
|
||||||
"minifill": "^0.0.8",
|
"minifill": "^0.0.12",
|
||||||
"shorter-js": "^0.1.0"
|
"shorter-js": "^0.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -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 MIN = process.env.MIN === 'true' // true/false|unset
|
||||||
const FORMAT = 'esm' // umd|iife|esm|cjs
|
const FORMAT = 'esm' // umd|iife|esm|cjs
|
||||||
|
|
||||||
const INPUTFILE = './src/util/polyfill.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 OUTPUTFILE = process.env.OUTPUTFILE ? process.env.OUTPUTFILE : 'dist/polyfill'+(MIN?'.min':'')+'.js'
|
||||||
|
|
||||||
const OUTPUT = {
|
const OUTPUT = {
|
||||||
file: OUTPUTFILE,
|
file: OUTPUTFILE,
|
||||||
|
|
|
@ -13,7 +13,7 @@ import {onStartColors} from './colorPropertiesBase.js'
|
||||||
const supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']
|
const supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']
|
||||||
const defaultColors = {}
|
const defaultColors = {}
|
||||||
|
|
||||||
supportedColors.forEach(tweenProp => {
|
supportedColors.map(tweenProp => {
|
||||||
defaultColors[tweenProp] = '#000'
|
defaultColors[tweenProp] = '#000'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -11,6 +11,7 @@ import skew from '../interpolation/skew.js'
|
||||||
import {onStartTransform} from './transformFunctionsBase.js'
|
import {onStartTransform} from './transformFunctionsBase.js'
|
||||||
|
|
||||||
// const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
|
// 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
|
// Component Functions
|
||||||
function getTransform(tweenProperty,value){
|
function getTransform(tweenProperty,value){
|
||||||
|
@ -19,31 +20,36 @@ function getTransform(tweenProperty,value){
|
||||||
}
|
}
|
||||||
function prepareTransform(prop,obj){
|
function prepareTransform(prop,obj){
|
||||||
let prepAxis = ['X', 'Y', 'Z'], // coordinates
|
let prepAxis = ['X', 'Y', 'Z'], // coordinates
|
||||||
translateArray = [], rotateArray = [], skewArray = [],
|
|
||||||
transformObject = {},
|
transformObject = {},
|
||||||
|
translateArray = [], rotateArray = [], skewArray = [],
|
||||||
arrayFunctions = ['translate3d','translate','rotate3d','skew']
|
arrayFunctions = ['translate3d','translate','rotate3d','skew']
|
||||||
|
|
||||||
for (const x in obj) {
|
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)) {
|
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] )
|
||||||
: [pv[0]||0, pv[1]||0,pv[2]||0] // translate3d | rotate3d
|
: 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) ) {
|
} else if ( /[XYZ]/.test(x) ) {
|
||||||
const fn = x.replace(/[XYZ]/,'');
|
let fn = x.replace(/[XYZ]/,''),
|
||||||
const fnId = fn === 'skew' ? fn : `${fn}3d`;
|
fnId = fn === 'skew' ? fn : `${fn}3d`,
|
||||||
const fnArray = fn === 'translate' ? translateArray
|
fnLen = fn === 'skew' ? 2 : 3,
|
||||||
: fn === 'rotate' ? rotateArray
|
fnArray = fn === 'translate' ? translateArray
|
||||||
: fn === 'skew' ? skewArray : {}
|
: fn === 'rotate' ? rotateArray
|
||||||
for (let fnIndex = 0; fnIndex < 3; fnIndex++) {
|
: fn === 'skew' ? skewArray : {}
|
||||||
|
for (let fnIndex = 0; fnIndex < fnLen; fnIndex++) {
|
||||||
const fnAxis = prepAxis[fnIndex];
|
const fnAxis = prepAxis[fnIndex];
|
||||||
fnArray[fnIndex] = (`${fn}${fnAxis}` in obj) ? parseInt(obj[`${fn}${fnAxis}`]) : 0;
|
fnArray[fnIndex] = (`${fn}${fnAxis}` in obj) ? parseInt(obj[`${fn}${fnAxis}`]) : 0;
|
||||||
}
|
}
|
||||||
transformObject[fnId] = fnArray;
|
transformObject[fnId] = fnArray;
|
||||||
} else { // scale | rotate | perspective
|
} else if (x==='rotate') { // rotate
|
||||||
transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : parseInt(obj[x])
|
transformObject['rotate3d'] = [0,0,pv]
|
||||||
|
} else { // scale | perspective
|
||||||
|
transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : pv
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return transformObject;
|
return transformObject;
|
||||||
|
|
|
@ -16,9 +16,7 @@ export function onStartTransform(tweenProp){
|
||||||
elem.style[tweenProp] =
|
elem.style[tweenProp] =
|
||||||
(a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '') // one side might be 0
|
(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.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.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.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
|
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0
|
||||||
}
|
}
|
||||||
|
|
134
src/components/transformLegacy.js
Normal file
134
src/components/transformLegacy.js
Normal 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
56
src/components/transformLegacyBase.js
Normal 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
|
|
@ -4,21 +4,10 @@ import globalObject from '../objects/globalObject.js'
|
||||||
import Interpolate from '../objects/interpolate.js'
|
import Interpolate from '../objects/interpolate.js'
|
||||||
import onStart from '../objects/onStart.js'
|
import onStart from '../objects/onStart.js'
|
||||||
|
|
||||||
const Time = {}
|
// const Time = window.performance
|
||||||
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
const Time = {}
|
||||||
|
Time.now = self.performance.now.bind(self.performance)
|
||||||
// export {Time}
|
// export {Time}
|
||||||
|
|
||||||
let Tick = 0
|
let Tick = 0
|
||||||
|
|
|
@ -29,6 +29,7 @@ import HTMLAttributes from './components/htmlAttributes.js'
|
||||||
import OpacityProperty from './components/opacityProperty.js'
|
import OpacityProperty from './components/opacityProperty.js'
|
||||||
import TextWrite from './components/textWrite.js'
|
import TextWrite from './components/textWrite.js'
|
||||||
import TransformFunctions from './components/transformFunctions.js'
|
import TransformFunctions from './components/transformFunctions.js'
|
||||||
|
// import TransformFunctions from './components/transformLegacy.js'
|
||||||
import SVGDraw from './components/svgDraw.js'
|
import SVGDraw from './components/svgDraw.js'
|
||||||
import SVGMorph from './components/svgMorph.js'
|
import SVGMorph from './components/svgMorph.js'
|
||||||
|
|
||||||
|
|
21
src/process/getInlineStyleLegacy.js
Normal file
21
src/process/getInlineStyleLegacy.js
Normal 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;
|
||||||
|
}
|
|
@ -66,7 +66,7 @@ export default class TweenBase {
|
||||||
add(this);
|
add(this);
|
||||||
this.playing = true;
|
this.playing = true;
|
||||||
|
|
||||||
this._startTime = time || KUTE.Time();
|
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
|
||||||
this._startTime += this._delay;
|
this._startTime += this._delay;
|
||||||
|
|
||||||
if (!this._startFired) {
|
if (!this._startFired) {
|
||||||
|
|
20
src/util/polyfill-legacy.js
Normal file
20
src/util/polyfill-legacy.js
Normal 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,3 +1,4 @@
|
||||||
|
// IE10+
|
||||||
import 'minifill/src/Array.from.js'
|
import 'minifill/src/Array.from.js'
|
||||||
import 'minifill/src/Array.prototype.includes.js'
|
import 'minifill/src/Array.prototype.includes.js'
|
||||||
import 'minifill/src/String.prototype.includes.js'
|
import 'minifill/src/String.prototype.includes.js'
|
2
src/util/supportLegacyTransform.js
Normal file
2
src/util/supportLegacyTransform.js
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
import transformProperty from './transformProperty.js'
|
||||||
|
export default transformProperty in document.body.style
|
2
src/util/transformProperty.js
Normal file
2
src/util/transformProperty.js
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
import trueProperty from './trueProperty.js'
|
||||||
|
export default trueProperty('transform')
|
Loading…
Reference in a new issue