2a5bac2bb3
* major JSDoc write up * removed ESLint `no-bitwise` exception, it only applies to specific functions and not the entire code * the `SVGCubicMorph` component will remove un-necessary `Z` path commands when is the case for better out of the box animation * fixed a minor disambiguation with `filterEffects` and `drop-shadow` property and its `dropshadow` interpolation function * TypeScript strong: all files are modules, easy to implement in any third party app * updated `CubicBezier` and SVGPathCommander * code cleanup
3 lines
8.4 KiB
JavaScript
3 lines
8.4 KiB
JavaScript
// KUTE.js Base v2.2.0alpha2 | thednp © 2021 | MIT-License
|
|
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{},i={},o={},r="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:function(){return(new Date).getTime()},a={};a.now=r;var s=0,c=function(t){for(var n=0;n<e.length;)e[n].update(t)?n+=1:e.splice(n,1);s=requestAnimationFrame(c)};function u(){setTimeout((function(){!e.length&&s&&(cancelAnimationFrame(s),s=null,Object.keys(o).forEach((function(e){"function"==typeof o[e]?t[e]&&delete t[e]:Object.keys(o[e]).forEach((function(e){t[e]&&delete t[e]}))})),Object.keys(i).forEach((function(e){t[e]&&delete t[e]})))}),64)}var f={Tick:s,Ticker:c,Tweens:e,Time:a};Object.keys(f).forEach((function(e){t[e]||(t[e]="Time"===e?a.now:f[e])})),n._KUTE=t;var l={duration:700,delay:0,easing:"linear",repeat:0,repeatDelay:0,yoyo:!1,resetStart:!1,offset:0},h={},p={},d={defaultOptions:l,linkProperty:h,onStart:o,onComplete:p},y={},v={tween:null,processEasing:null},m={linear:function(t){return t},easingQuadraticIn:function(t){return t*t},easingQuadraticOut:function(t){return t*(2-t)},easingQuadraticInOut:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easingCubicIn:function(t){return t*t*t},easingCubicOut:function(t){var e=t-1;return e*e*e+1},easingCubicInOut:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easingCircularIn:function(t){return-(Math.sqrt(1-t*t)-1)},easingCircularOut:function(t){var e=t-1;return Math.sqrt(1-e*e)},easingCircularInOut:function(t){var e=2*t;return e<1?-.5*(Math.sqrt(1-e*e)-1):(e-=2,.5*(Math.sqrt(1-e*e)+1))},easingBackIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},easingBackOut:function(t){var e=1.70158,n=t-1;return n*n*((e+1)*n+e)+1},easingBackInOut:function(t){var e=2.5949095,n=2*t;return n<1?n*n*((e+1)*n-e)*.5:.5*((n-=2)*n*((e+1)*n+e)+2)}};v.processEasing=function(t){return"function"==typeof t?t:"function"==typeof m[t]?m[t]:m.linear};var g=function(t){return e.push(t)},E=function(t){var n=e.indexOf(t);-1!==n&&e.splice(n,1)},b={};function _(){var e=this;Object.keys(h).forEach((function(n){var i=h[n],o=b[n];Object.keys(i).forEach((function(n){"function"==typeof i[n]&&Object.keys(e.valuesEnd).some((function(t){return o&&o.includes(t)||"attr"===t&&Object.keys(e.valuesEnd[t]).some((function(t){return o&&o.includes(t)}))}))?t[n]||(t[n]=i[n]):Object.keys(e.valuesEnd).forEach((function(o){var r=e.valuesEnd[o];r instanceof Object&&Object.keys(r).forEach((function(e){"function"==typeof i[e]?t[e]||(t[e]=i[e]):Object.keys(i[n]).forEach((function(n){i[e]&&"function"==typeof i[e][n]&&(t[n]||(t[n]=i[e][n]))}))}))}))}))}))}var O={add:g,remove:E,getAll:function(){return e},removeAll:function(){e.length=0},stop:u,linkInterpolation:_};function k(t,e){try{var n,i;return e?(i=t instanceof Array&&t.every((function(t){return t instanceof Element})),n=t instanceof HTMLCollection||t instanceof NodeList||i?t:document.querySelectorAll(t)):n=t instanceof Element||t===window?t:document.querySelector(t),n}catch(e){throw TypeError("KUTE.js - Element(s) not found: "+t+".")}}var j=function(t){var e=t.component,n={onStart:o,onComplete:p},r=t.category,a=t.property;return this._=0,b[e]=t.properties||t.subProperties||t.property,t.defaultOptions&&Object.assign(l,t.defaultOptions),t.functions&&Object.keys(n).forEach((function(i){i in t.functions&&("function"==typeof t.functions[i]?(n[i][e]||(n[i][e]={}),n[i][e][r||a]||(n[i][e][r||a]=t.functions[i])):Object.keys(t.functions[i]).forEach((function(o){n[i][e]||(n[i][e]={}),n[i][e][o]||(n[i][e][o]=t.functions[i][o])})))})),t.Interpolate&&(Object.keys(t.Interpolate).forEach((function(e){var n=t.Interpolate[e];"function"!=typeof n||i[e]?Object.keys(n).forEach((function(t){"function"!=typeof n[t]||i[e]||(i[e]=n[t])})):i[e]=n})),h[e]=t.Interpolate),t.Util&&Object.keys(t.Util).forEach((function(e){y[e]||(y[e]=t.Util[e])})),{name:e}};function w(t,e,n,i){return"perspective("+(1e3*(t+(e-t)*i)>>0)/1e3+n+")"}function T(t,e,n,i){for(var o=[],r=0;r<3;r+=1)o[r]=(t[r]||e[r]?(1e3*(t[r]+(e[r]-t[r])*i)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function I(t,e,n,i){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*i)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*i)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*i)>>0)/1e3+n+")":""}function S(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function C(t,e,n,i){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*i)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*i)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}var x={component:"baseTransform",property:"transform",functions:{onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,i,o){t.style[e]=(n.perspective||i.perspective?w(n.perspective,i.perspective,"px",o):"")+(n.translate3d?T(n.translate3d,i.translate3d,"px",o):"")+(n.rotate3d?I(n.rotate3d,i.rotate3d,"deg",o):"")+(n.skew?C(n.skew,i.skew,"deg",o):"")+(n.scale||i.scale?S(n.scale,i.scale,o):"")})}},Interpolate:{perspective:w,translate3d:T,rotate3d:I,translate:function(t,e,n,i){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*i)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*i)>>0)/1e3)+n:"0","translate("+o.join(",")+")"},rotate:function(t,e,n,i){return"rotate("+(1e3*(t+(e-t)*i)>>0)/1e3+n+")"},scale:S,skew:C}};function U(t,e,n){return+t+(e-t)*n}function M(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,o){t.style[e]=(o>.99||o<.01?(10*U(n,i,o)>>0)/10:U(n,i,o)>>0)+"px"})}var q=["top","left","width","height"],A={};q.forEach((function(t){A[t]=M}));var F={component:"baseBoxModel",category:"boxModel",properties:q,Interpolate:{numbers:U},functions:{onStart:A}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:U},functions:{onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,o){t.style[e]=(1e3*U(n,i,o)>>0)/1e3})}}},D={Transform:new j(x),BoxModel:new j(F),Opacity:new j(B)};function K(){var t=this;Object.keys(o).forEach((function(e){"function"==typeof o[e]?o[e].call(t,e):Object.keys(o[e]).forEach((function(n){o[e][n].call(t,n)}))})),_.call(this)}var Q=function(e,n,i,r){var a=this;this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=i,this.valuesStart=n;var s=r||{};this._resetStart=s.resetStart||0,this._easing="function"==typeof s.easing?s.easing:v.processEasing(s.easing),this._duration=s.duration||l.duration,this._delay=s.delay||l.delay,Object.keys(s).forEach((function(t){var e="_"+t;e in a||(a[e]=s[t])}));var c=this._easing.name;return o[c]||(o[c]=function(e){t[e]||e!==this._easing.name||(t[e]=this._easing)}),this};Q.prototype.start=function(e){return g(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,this._startFired||(this._onStart&&this._onStart.call(this),K.call(this),this._startFired=!0),s||c(),this},Q.prototype.stop=function(){return this.playing&&(E(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},Q.prototype.close=function(){var t=this;Object.keys(p).forEach((function(e){Object.keys(p[e]).forEach((function(n){p[e][n].call(t,n)}))})),this._startFired=!1,u.call(this)},Q.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},Q.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.forEach((function(t){return t.stop()}))},Q.prototype.update=function(e){var n,i=this,o=void 0!==e?e:t.Time();if(o<this._startTime&&this.playing)return!0;n=(o-this._startTime)/this._duration,n=0===this._duration||n>1?1:n;var r=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(e){t[e](i.element,i.valuesStart[e],i.valuesEnd[e],r)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},v.tween=Q;var L=v.tween;return{Animation:j,Components:D,Tween:Q,fromTo:function(t,e,n,i){var o=i||{};return new L(k(t),e,n,o)},Objects:d,Easing:m,Util:y,Render:f,Interpolate:i,Internals:O,Selector:k,Version:"2.2.0alpha2"}}));
|