@infinityfx/lively
Version:
Feature complete, lightweight react animation library.
3 lines (2 loc) • 3.15 kB
JavaScript
import{StyleCache as t}from"./cache.js";import{lengthToOffset as e}from"./utils.js";class s{constructor(e,s,i){this.playing=0,this.active=[],this.queue=[],this.paused=!1,this.scale=[1,1],this.corrected={borderRadius:"",boxShadow:""},this.element=e,this.deform=s,this.cache=new t(e,i)}push(t){t.onfinish=this.next.bind(this),this.playing&&"none"===t.composite?(this.queue.push(t),t.animation.pause()):(this.active.push(t),"none"===t.composite&&this.playing++,this.paused&&t.animation.pause())}next(){this.cache.update(),--this.playing>0||(this.active=this.queue.length?this.queue.splice(0,1):[],this.playing=this.active.length,this.pause(!1))}clear(t){this.active.forEach((e=>{e.onfinish=null;try{t?e.commit||"combine"===e.composite||e.animation.cancel():e.animation.finish()}catch(t){e.animation.cancel()}})),t||(this.active=[],this.queue=[],this.playing=0),this.deform||(this.element.style.borderRadius="",this.element.style.boxShadow="",this.corrected.borderRadius=this.cache.data.borderRadius=this.cache.computed.borderRadius,this.corrected.boxShadow=this.cache.data.boxShadow=this.cache.computed.boxShadow,this.scale=[1,1])}pause(t){for(const e of this.active)e.animation[t?"pause":"play"]();this.paused=t}step(t){for(const e of this.active)e.step(t);!this.paused&&this.active.length&&this.correct()}transition(t,e){this.clear(!0);const s=this.cache.difference(null==t?void 0:t.cache.data,e);this.cache.update(),null==t||t.clear(),null==t||t.cache.update(),s.forEach((t=>t.play(this,{commit:!1})))}apply(t,s){const i="strokeLength"===t;this.element.style[i?"strokeDashoffset":t]=i?e(s):s}decomposeScale(){const[t,e]=this.cache.computed.scale.split(" ");let s=Math.max(parseFloat(t)||1,1e-5);/%$/.test(t)&&(s/=100);let i=e?Math.max(parseFloat(e)||1,1e-5):s;return/%$/.test(e)&&(i/=100),[s,i]}correct(){if(this.deform)return;const t=this.cache.computed,e=t.borderRadius.split(/\s*\/\s*/);e.length<2&&(e[1]=e[0]);const s=t.boxShadow.split(/(?<=px),\s?/),[i,a]=s[0].split(/(?<=\))\s/),o=t.borderRadius!==this.corrected.borderRadius?[1,1]:this.scale,h=t.boxShadow!==this.corrected.boxShadow?[1,1]:this.scale,[c,r]=this.scale=this.decomposeScale();if(this.element.style.borderRadius=e.map(((t,e)=>t.split(" ").map((t=>{var s;return parseFloat(t)*o[e]/this.scale[e]+((null===(s=t.match(/[^\d\.]+$/))||void 0===s?void 0:s[0])||"px")})).join(" "))).join("/"),this.corrected.borderRadius=t.borderRadius,a){const e=a.split(" ").map(parseFloat),s=+(c<r),o=s?r:c,l=Math.max(...h),n=new Array(3).fill([e[0]*h[0]/c,e[1]*h[1]/r,e[2]*l/o,e[3]*l/o]);n[1][0]-=s?1/c:0,n[1][1]-=s?0:1/r,n[2][0]+=s?1/c:0,n[2][1]+=s?0:1/r,this.element.style.boxShadow=n.map((t=>`${i} ${t.map((t=>`${t}px`)).join(" ")}`)).join(", "),this.corrected.boxShadow=t.boxShadow}for(let t=0;t<this.element.children.length;t++){const e=this.element.children[t],s=e.offsetLeft,i=e.offsetTop,a=e.offsetWidth,o=e.offsetHeight,[h,l]=getComputedStyle(e).translate.split(" ").map(parseFloat);e.style.transform=`translate(${-h||0}px, ${-l||0}px) scale(${1/c}, ${1/r}) translate(${s*(1-c)+a/2*(1-c)+(h||0)}px, ${i*(1-r)+o/2*(1-r)+(l||0)}px)`}}}export{s as default};
//# sourceMappingURL=track.js.map