@ue-too/animate 0.14.1 → 0.16.0

package/index.js

@@ -1,5 +1,912 @@
-import{PointCal as J}from"@ue-too/math";var H={lerp:(q,p,x)=>{let K=(q-p.percentage)/(x.percentage-p.percentage),E=K;if(p.easingFn)E=p.easingFn(K);return J.addVector(p.value,J.multiplyVectorByScalar(J.subVector(x.value,p.value),E))}};class W{constructor(){}lerp(q,p,x){let K=(q-p.percentage)/(x.percentage-p.percentage),E=K;if(p.easingFn)E=p.easingFn(K);return J.addVector(p.value,J.multiplyVectorByScalar(J.subVector(x.value,p.value),E))}}var S={lerp:(q,p,x)=>{let K=(q-p.percentage)/(x.percentage-p.percentage),E=K;if(p.easingFn)E=p.easingFn(K);return p.value+E*(x.value-p.value)}};class X{constructor(){}lerp(q,p,x){let K=(q-p.percentage)/(x.percentage-p.percentage),E=K;if(p.easingFn)E=p.easingFn(K);return p.value+E*(x.value-p.value)}}var I={lerp:(q,p,x)=>{let K=(q-p.percentage)/(x.percentage-p.percentage);return K<0||K<0.5?p.value:x.value}};class Y{constructor(){}lerp(q,p,x){let K=(q-p.percentage)/(x.percentage-p.percentage);return K<0||K<0.5?p.value:x.value}}var N={lerp:(q,p,x)=>{let K=(q-p.percentage)/(x.percentage-p.percentage);return K<0||K<0.5?p.value:x.value}};class Z{constructor(){}lerp(q,p,x){let K=(q-p.percentage)/(x.percentage-p.percentage);return K<0||K<0.5?p.value:x.value}}var R={lerp:(q,p,x)=>{return{r:p.value.r+(q-p.percentage)/(x.percentage-p.percentage)*(x.value.r-p.value.r),g:p.value.g+(q-p.percentage)/(x.percentage-p.percentage)*(x.value.g-p.value.g),b:p.value.b+(q-p.percentage)/(x.percentage-p.percentage)*(x.value.b-p.value.b)}}};class _{constructor(){}lerp(q,p,x){return{r:p.value.r+(q-p.percentage)/(x.percentage-p.percentage)*(x.value.r-p.value.r),g:p.value.g+(q-p.percentage)/(x.percentage-p.percentage)*(x.value.g-p.value.g),b:p.value.b+(q-p.percentage)/(x.percentage-p.percentage)*(x.value.b-p.value.b)}}}var $=(q)=>{return q};class V{animations;localTime;_duration;onGoing;loop;playedTime;setUpFn;tearDownFn;_dragTime;_delayTime;parent;_maxLoopCount;endCallbacks=[];startCallbacks=[];reverse;constructor(q=new Map,p=!1,x=void 0,K=()=>{},E=()=>{}){this.animations=q,this._duration=0,this.calculateDuration(),this.localTime=-1,this.onGoing=!1,this.loop=p,this.setUpFn=K,this.tearDownFn=E,this._delayTime=0,this._dragTime=0,this.parent=x,this.animations.forEach((z)=>{z.animator.setParent(this)}),this.reverse=!1,this.playedTime=0}toggleReverse(q){if(this.reverse==q)return;this.reverse=q,this.animations.forEach((p)=>{p.animator.toggleReverse(q)})}setParent(q){this.parent=q}detachParent(){this.parent=void 0}animate(q){if(!this.onGoing||this.localTime>this._duration+this._delayTime+this._dragTime||this.localTime<0||this.animations.size==0)return;if(this.localTime+=q,this.localTime-q<=0&&q>0)this.startCallbacks.forEach((p)=>{queueMicrotask(()=>{p()})});this.animateChildren(q),this.checkTerminalAndLoop()}checkTerminalAndLoop(){if(this.localTime>=this._duration+this._delayTime+this._dragTime)if(this.playedTime+=1,this.endCallbacks.forEach((q)=>{queueMicrotask(()=>{q()})}),!this.loops||this.maxLoopCount!=null&&this.playedTime>=this.maxLoopCount)this.stop();else this.start()}animateChildren(q){let p=this.localTime-q;if(this.localTime<this._delayTime)return;this.animations.forEach((x,K)=>{if(x.startTime==null)x.startTime=0;if(!this.childShouldAnimate(x,p)){this.wrapUpAnimator({animator:x.animator,startTime:x.startTime,name:K},p);return}if(p-this._delayTime<x.startTime)x.animator.animate(this.localTime-this._delayTime-x.startTime);else x.animator.animate(q)})}childShouldAnimate(q,p){if(q.startTime==null)q.startTime=0;if(this.localTime-this._delayTime>=q.startTime&&this.localTime-this._delayTime<=q.startTime+q.animator.duration)return!0;return!1}wrapUpAnimator(q,p){if(q.startTime==null)q.startTime=0;if(this.localTime-this._delayTime>q.startTime+q.animator.duration&&p-this._delayTime<q.startTime+q.animator.duration)q.animator.animate(q.startTime+q.animator.duration-(p-this._delayTime))}pause(){this.onGoing=!1,this.animations.forEach((q)=>{q.animator.pause()})}resume(){this.onGoing=!0,this.animations.forEach((q)=>{q.animator.resume()})}start(){this.onGoing=!0,this.setUp(),this.localTime=0,this.animations.forEach((q)=>{q.animator.start()})}stop(){this.onGoing=!1,this.playedTime=0,this.localTime=this._duration+0.1,this.animations.forEach((q)=>{q.animator.stop()}),this.tearDown()}get duration(){return this._duration+this._delayTime+this._dragTime}set duration(q){if(q<0)return;let p=this._duration+this._delayTime+this._dragTime,x=q/p,K=this._delayTime*x,E=this._dragTime*x;if(this._delayTime=K,this._dragTime=E,this.animations.forEach((z)=>{if(z.startTime==null)z.startTime=0;z.startTime*=x;let j=z.animator.duration*x;z.animator.nonCascadingDuration(j)}),this.calculateDuration(),this.parent!=null)this.parent.updateDuration()}nonCascadingDuration(q){if(q<0)return;let p=this._duration+this._delayTime+this._dragTime,x=q/p,K=this._delayTime*x,E=this._dragTime*x;this._delayTime=K,this._dragTime=E,this.animations.forEach((z)=>{if(z.startTime==null)z.startTime=0;z.startTime*=x;let j=z.animator.duration*x;z.animator.nonCascadingDuration(j)}),this.calculateDuration()}resetAnimationState(){this.onGoing=!1,this.animations.forEach((q)=>{q.animator.resetAnimationState()})}getTrueDuration(){return this._duration}setUp(){this.setUpFn(),this.animations.forEach((q)=>{q.animator.setUp()})}tearDown(){this.tearDownFn(),this.animations.forEach((q)=>{q.animator.tearDown()})}addAnimation(q,p,x=0,K=()=>{}){if(this.animations.has(q))return;if(this.parent!==void 0&&this.parent.containsAnimation(p))return;if(this.animations.set(q,{animator:p,startTime:x}),p.setParent(this),this.localTime>x)p.animate(this.localTime-x);let E=x+p.duration;if(this._duration=Math.max(this._duration,E),this.parent!=null)this.parent.updateDuration()}addAnimationAfter(q,p,x,K=0){let E=this.animations.get(x);if(E==null)return;if(E.startTime==null)E.startTime=0;let z=E.startTime+E.animator.duration;if(z+=K,this.addAnimation(q,p,z),this.calculateDuration(),this.parent!=null)this.parent.updateDuration()}addAnimationAdmist(q,p,x,K){let E=this.animations.get(x);if(E==null)return;if(E.startTime==null)E.startTime=0;let z=E.startTime+K;if(this.addAnimation(q,p,z),this.calculateDuration(),this.parent!=null)this.parent.updateDuration()}addAnimationBefore(q,p,x,K=0){let E=this.animations.get(x);if(E==null)return;if(E.startTime==null)E.startTime=0;let z=E.startTime;if(z-=K,this.addAnimation(q,p,z),z<0){let j=0-z;this.animations.forEach((M)=>{if(M.startTime==null)M.startTime=0;M.startTime+=j})}if(this.calculateDuration(),this.parent!=null)this.parent.updateDuration()}removeAnimation(q){let p=this.animations.get(q);if(this.animations.delete(q)){if(p!=null)p.animator.detachParent();if(this.calculateDuration(),this.parent!=null)this.parent.updateDuration()}}set delay(q){if(this._delayTime=q,this.parent!=null)this.parent.updateDuration()}get delay(){return this._delayTime}set drag(q){if(this._dragTime=q,this.parent!=null)this.parent.updateDuration()}get drag(){return this._dragTime}removeDelay(){if(this._delayTime=0,this.parent!=null)this.parent.updateDuration()}removeDrag(){if(this._dragTime=0,this.parent!=null)this.parent.updateDuration()}updateDuration(){if(this.checkCyclicChildren())return;if(this.calculateDuration(),this.parent!=null)this.parent.updateDuration()}calculateDuration(){this._duration=0,this.animations.forEach((q)=>{if(q.startTime==null)q.startTime=0;let p=q.startTime+q.animator.duration;this._duration=Math.max(this._duration,p)})}get loops(){return this.loop}set loops(q){this.loop=q}checkCyclicChildren(){let q=[];q.push(this);let p=new Set;while(q.length>0){let x=q.pop();if(x==null)continue;if(p.has(x))return!0;if(p.add(x),x instanceof V)x.animations.forEach((K)=>{q.push(K.animator)})}return!1}forceToggleLoop(q){this.loop=!0,this.animations.forEach((p)=>{p.animator.loops=!0})}containsAnimation(q){if(this.parent!==void 0)return this.parent.containsAnimation(q);let p=[];p.push(this);let x=new Set;while(p.length>0){let K=p.pop();if(K==null)continue;if(K==q)return!0;if(x.has(K))continue;if(x.add(K),K instanceof V)K.animations.forEach((E)=>{p.push(E.animator)})}return!1}onEnd(q){return this.endCallbacks.push(q),()=>{this.endCallbacks=this.endCallbacks.filter((p)=>p!=q)}}onStart(q){return this.startCallbacks.push(q),()=>{this.startCallbacks=this.startCallbacks.filter((p)=>p!=q)}}clearOnEnd(){this.endCallbacks=[]}clearOnStart(){this.startCallbacks=[]}get playing(){return this.onGoing}get maxLoopCount(){return this._maxLoopCount}set maxLoopCount(q){this._maxLoopCount=q}}class B{localTime;_duration;keyframes;animatableAttributeHelper;applyAnimationValue;easeFn;onGoing;currentKeyframeIndex;loop;playedTime;setUpFn;tearDownFn;parent;delayTime=0;dragTime=0;reverse=!1;endCallbacks=[];startCallbacks=[];startAfterDelayCallbacks=[];zeroPercentageValue;_maxLoopCount;_fillMode="none";constructor(q,p,x,K=1000,E=!1,z=void 0,j=()=>{},M=()=>{},Q=$){this._duration=K,this.keyframes=q,this.animatableAttributeHelper=x,this.applyAnimationValue=p,this.easeFn=Q,this.onGoing=!1,this.localTime=K+0.1,this.currentKeyframeIndex=0,this.loop=E,this.setUpFn=j,this.tearDownFn=M,this.parent=z,this.playedTime=0,this.zeroPercentageValue=this.findValue(0,q,x)}toggleReverse(q){this.reverse=q}start(){this.localTime=0,this.currentKeyframeIndex=0,this.onGoing=!0,this.setUp()}stop(){this.onGoing=!1,this.localTime=this._duration+this.dragTime+this.delayTime+0.1,this.playedTime=0,this.tearDown()}pause(){this.onGoing=!1}resume(){this.onGoing=!0}get playing(){return this.onGoing}animate(q){if(this.onGoing!=!0||this.localTime<0)return;if(q==0)return;if(this.localTime+=q,this.localTime-q<=0&&q>0)this.startCallbacks.forEach((p)=>{queueMicrotask(()=>{p()})});if(this.localTime>=this.delayTime&&(this.localTime<=this.delayTime+this._duration+this.dragTime||this.localTime-q<=this.delayTime+this._duration+this.dragTime)){if(this.localTime-q<=this.delayTime&&this.delayTime!==0&&q>0)this.startAfterDelayCallbacks.forEach((E)=>{queueMicrotask(()=>{E()})}),this.applyAnimationValue(this.zeroPercentageValue);let p=(this.localTime-this.delayTime)/this._duration,x=this.easeFn(p);if(p>1)x=this.easeFn(1);let K;if(this.currentKeyframeIndex<this.keyframes.length&&this.currentKeyframeIndex>=0&&(this.reverse?1-this.keyframes[this.currentKeyframeIndex].percentage==x:this.keyframes[this.currentKeyframeIndex].percentage==x))K=this.keyframes[this.currentKeyframeIndex].value;else K=this.findValue(x,this.keyframes,this.animatableAttributeHelper);if(this.reverse)while(this.currentKeyframeIndex>=0&&1-this.keyframes[this.currentKeyframeIndex].percentage<=x)this.currentKeyframeIndex-=1;else while(this.currentKeyframeIndex<this.keyframes.length&&this.keyframes[this.currentKeyframeIndex].percentage<=x)this.currentKeyframeIndex+=1;if(this.applyAnimationValue(K),this.localTime>=this._duration+this.dragTime+this.delayTime)if(this.playedTime+=1,this.endCallbacks.forEach((E)=>{queueMicrotask(()=>{E()})}),!this.loops||this._maxLoopCount!=null&&this.playedTime>=(this.maxLoopCount??0))this.stop();else this.onGoing=!0,this.localTime=0,this.currentKeyframeIndex=0,this.start()}}findValue(q,p,x){if(q>1){if(this.reverse)return x.lerp(q,p[1],p[0]);return x.lerp(q,p[p.length-2],p[p.length-1])}if(q<0){if(this.reverse)return x.lerp(q,p[p.length-2],p[p.length-1]);return x.lerp(q,p[1],p[0])}let K=0,E=p.length-1;while(K<=E){let M=K+Math.floor((E-K)/2),Q=this.reverse?1-p[M].percentage:p[M].percentage;if(Q==q)return p[M].value;else if(Q<q)if(this.reverse)E=M-1;else K=M+1;else if(this.reverse)K=M+1;else E=M-1}if(K>p.length-1)K=p.length-1;let z=this.reverse?{percentage:1-p[K].percentage,value:p[K].value}:p[K-1],j=this.reverse?{percentage:1-p[K-1].percentage,value:p[K-1].value}:p[K];return x.lerp(q,z,j)}setUp(){this.setUpFn()}tearDown(){this.tearDownFn()}get loops(){return this.loop}set loops(q){this.loop=q}get duration(){return this._duration+this.delayTime+this.dragTime}set duration(q){if(q<0)return;let p=this._duration+this.delayTime+this.dragTime,x=q/p,K=this.delayTime*x,E=this.dragTime*x;if(this.delayTime=K,this.dragTime=E,this._duration=this._duration*x,this.parent!=null)this.parent.updateDuration()}nonCascadingDuration(q){if(q<0)return;let p=this._duration+this.delayTime+this.dragTime,x=q/p,K=this.delayTime*x,E=this.dragTime*x;this.delayTime=K,this.dragTime=E,this._duration=q}resetAnimationState(){this.onGoing=!1,this.applyAnimationValue(this.keyframes[0].value),this.currentKeyframeIndex=0,this.setUp()}wrapUp(){this.onGoing=!1,this.localTime=this._duration+this.dragTime+this.delayTime+0.1,this.currentKeyframeIndex=0}get delay(){return this.delayTime}set delay(q){if(this.delayTime=q,this.parent!=null)this.parent.updateDuration()}get drag(){return this.dragTime}set drag(q){if(this.dragTime=q,this.parent!=null)this.parent.updateDuration()}get trueDuration(){return this._duration}set trueDuration(q){if(this._duration=q,this.parent!=null)this.parent.updateDuration()}setParent(q){this.parent=q}detachParent(){this.parent=void 0}set keyFrames(q){this.keyframes=q,this.zeroPercentageValue=this.findValue(0,q,this.animatableAttributeHelper)}get keyFrames(){return this.keyframes}get easeFunction(){return this.easeFn}set easeFunction(q){this.easeFn=q}onEnd(q){return this.endCallbacks.push(q),()=>{this.endCallbacks=this.endCallbacks.filter((p)=>p!=q)}}onStart(q){return this.startCallbacks.push(q),()=>{this.startCallbacks=this.startCallbacks.filter((p)=>p!=q)}}onStartAfterDelay(q){return this.startAfterDelayCallbacks.push(q),()=>{this.startAfterDelayCallbacks=this.startAfterDelayCallbacks.filter((p)=>p!=q)}}clearOnEnd(){this.endCallbacks=[]}clearOnStart(){this.startCallbacks=[]}get maxLoopCount(){return this._maxLoopCount}set maxLoopCount(q){this._maxLoopCount=q}}class O{_keyframes;constructor(){this._keyframes=[]}get keyframes(){return this._keyframes}from(q){if(this._keyframes.length==0)this._keyframes.push({percentage:0,value:q});else if(this._keyframes[0].percentage==0)this._keyframes[0].value=q;else this._keyframes.unshift({percentage:0,value:q});return this}to(q){if(this._keyframes.length==0)this._keyframes.push({percentage:1,value:q});else if(this._keyframes[this._keyframes.length-1].percentage==1)this._keyframes[this._keyframes.length-1].value=q;else this._keyframes.push({percentage:1,value:q});return this}insertAt(q,p){this._keyframes.push({percentage:q,value:p})}clearFrames(){this._keyframes=[]}}export{I as stringHelperFunctions,R as rgbHelperFunctions,H as pointHelperFunctions,S as numberHelperFunctions,$ as linear,N as integerHelperFunctions,Y as StringAnimationHelper,_ as RGBAnimationHelper,W as PointAnimationHelper,X as NumberAnimationHelper,O as KeyFramesContiner,Z as IntegerAnimationHelper,V as CompositeAnimation,B as Animation};
+// src/animatable-attribute.ts
+import { PointCal } from "@ue-too/math";
+var pointHelperFunctions = {
+  lerp: (ratio, start, end) => {
+    const inbetweenRatio = (ratio - start.percentage) / (end.percentage - start.percentage);
+    let transformed = inbetweenRatio;
+    if (start.easingFn) {
+      transformed = start.easingFn(inbetweenRatio);
+    }
+    const res = PointCal.addVector(start.value, PointCal.multiplyVectorByScalar(PointCal.subVector(end.value, start.value), transformed));
+    return res;
+  }
+};
 
-//# debugId=A64492CFE695240C64756E2164756E21
+class PointAnimationHelper {
+  constructor() {}
+  lerp(ratio, start, end) {
+    const inbetweenRatio = (ratio - start.percentage) / (end.percentage - start.percentage);
+    let transformed = inbetweenRatio;
+    if (start.easingFn) {
+      transformed = start.easingFn(inbetweenRatio);
+    }
+    const res = PointCal.addVector(start.value, PointCal.multiplyVectorByScalar(PointCal.subVector(end.value, start.value), transformed));
+    return res;
+  }
+}
+var numberHelperFunctions = {
+  lerp: (ratio, start, end) => {
+    const inbetweenRatio = (ratio - start.percentage) / (end.percentage - start.percentage);
+    let transformed = inbetweenRatio;
+    if (start.easingFn) {
+      transformed = start.easingFn(inbetweenRatio);
+    }
+    const res = start.value + transformed * (end.value - start.value);
+    return res;
+  }
+};
+
+class NumberAnimationHelper {
+  constructor() {}
+  lerp(ratio, start, end) {
+    const inbetweenRatio = (ratio - start.percentage) / (end.percentage - start.percentage);
+    let transformed = inbetweenRatio;
+    if (start.easingFn) {
+      transformed = start.easingFn(inbetweenRatio);
+    }
+    const res = start.value + transformed * (end.value - start.value);
+    return res;
+  }
+}
+var stringHelperFunctions = {
+  lerp: (ratio, start, end) => {
+    const percentageScale = (ratio - start.percentage) / (end.percentage - start.percentage);
+    return percentageScale < 0 || percentageScale < 0.5 ? start.value : end.value;
+  }
+};
+
+class StringAnimationHelper {
+  constructor() {}
+  lerp(ratio, start, end) {
+    const percentageScale = (ratio - start.percentage) / (end.percentage - start.percentage);
+    return percentageScale < 0 || percentageScale < 0.5 ? start.value : end.value;
+  }
+}
+var integerHelperFunctions = {
+  lerp: (ratio, start, end) => {
+    const percentageScale = (ratio - start.percentage) / (end.percentage - start.percentage);
+    return percentageScale < 0 || percentageScale < 0.5 ? start.value : end.value;
+  }
+};
+
+class IntegerAnimationHelper {
+  constructor() {}
+  lerp(ratio, start, end) {
+    const percentageScale = (ratio - start.percentage) / (end.percentage - start.percentage);
+    return percentageScale < 0 || percentageScale < 0.5 ? start.value : end.value;
+  }
+}
+var rgbHelperFunctions = {
+  lerp: (ratio, start, end) => {
+    const res = {
+      r: start.value.r + (ratio - start.percentage) / (end.percentage - start.percentage) * (end.value.r - start.value.r),
+      g: start.value.g + (ratio - start.percentage) / (end.percentage - start.percentage) * (end.value.g - start.value.g),
+      b: start.value.b + (ratio - start.percentage) / (end.percentage - start.percentage) * (end.value.b - start.value.b)
+    };
+    return res;
+  }
+};
+
+class RGBAnimationHelper {
+  constructor() {}
+  lerp(ratio, start, end) {
+    const res = {
+      r: start.value.r + (ratio - start.percentage) / (end.percentage - start.percentage) * (end.value.r - start.value.r),
+      g: start.value.g + (ratio - start.percentage) / (end.percentage - start.percentage) * (end.value.g - start.value.g),
+      b: start.value.b + (ratio - start.percentage) / (end.percentage - start.percentage) * (end.value.b - start.value.b)
+    };
+    return res;
+  }
+}
+// src/composite-animation.ts
+var linear = (percentage) => {
+  return percentage;
+};
+
+class CompositeAnimation {
+  animations;
+  localTime;
+  _duration;
+  onGoing;
+  loop;
+  playedTime;
+  setUpFn;
+  tearDownFn;
+  _dragTime;
+  _delayTime;
+  parent;
+  _maxLoopCount;
+  endCallbacks = [];
+  startCallbacks = [];
+  reverse;
+  constructor(animations = new Map, loop = false, parent = undefined, setupFn = () => {}, tearDownFn = () => {}) {
+    this.animations = animations;
+    this._duration = 0;
+    this.calculateDuration();
+    this.localTime = -1;
+    this.onGoing = false;
+    this.loop = loop;
+    this.setUpFn = setupFn;
+    this.tearDownFn = tearDownFn;
+    this._delayTime = 0;
+    this._dragTime = 0;
+    this.parent = parent;
+    this.animations.forEach((animation) => {
+      animation.animator.setParent(this);
+    });
+    this.reverse = false;
+    this.playedTime = 0;
+  }
+  toggleReverse(reverse) {
+    if (this.reverse == reverse) {
+      return;
+    }
+    this.reverse = reverse;
+    this.animations.forEach((animation) => {
+      animation.animator.toggleReverse(reverse);
+    });
+  }
+  setParent(parent) {
+    this.parent = parent;
+  }
+  detachParent() {
+    this.parent = undefined;
+  }
+  animate(deltaTime) {
+    if (!this.onGoing || this.localTime > this._duration + this._delayTime + this._dragTime || this.localTime < 0 || this.animations.size == 0) {
+      return;
+    }
+    this.localTime += deltaTime;
+    if (this.localTime - deltaTime <= 0 && deltaTime > 0) {
+      this.startCallbacks.forEach((callback) => {
+        queueMicrotask(() => {
+          callback();
+        });
+      });
+    }
+    this.animateChildren(deltaTime);
+    this.checkTerminalAndLoop();
+  }
+  checkTerminalAndLoop() {
+    if (this.localTime >= this._duration + this._delayTime + this._dragTime) {
+      this.playedTime += 1;
+      this.endCallbacks.forEach((callback) => {
+        queueMicrotask(() => {
+          callback();
+        });
+      });
+      if (!this.loops || this.maxLoopCount != null && this.playedTime >= this.maxLoopCount) {
+        this.stop();
+      } else {
+        this.start();
+      }
+    }
+  }
+  animateChildren(deltaTime) {
+    const prevLocalTime = this.localTime - deltaTime;
+    if (this.localTime < this._delayTime) {
+      return;
+    }
+    this.animations.forEach((animation, name) => {
+      if (animation.startTime == undefined) {
+        animation.startTime = 0;
+      }
+      if (!this.childShouldAnimate(animation, prevLocalTime)) {
+        this.wrapUpAnimator({
+          animator: animation.animator,
+          startTime: animation.startTime,
+          name
+        }, prevLocalTime);
+        return;
+      }
+      if (prevLocalTime - this._delayTime < animation.startTime) {
+        animation.animator.animate(this.localTime - this._delayTime - animation.startTime);
+      } else {
+        animation.animator.animate(deltaTime);
+      }
+    });
+  }
+  childShouldAnimate(animation, prevLocalTime) {
+    if (animation.startTime == undefined) {
+      animation.startTime = 0;
+    }
+    if (this.localTime - this._delayTime >= animation.startTime && this.localTime - this._delayTime <= animation.startTime + animation.animator.duration) {
+      return true;
+    }
+    return false;
+  }
+  wrapUpAnimator(animation, prevLocalTime) {
+    if (animation.startTime == undefined) {
+      animation.startTime = 0;
+    }
+    if (this.localTime - this._delayTime > animation.startTime + animation.animator.duration && prevLocalTime - this._delayTime < animation.startTime + animation.animator.duration) {
+      animation.animator.animate(animation.startTime + animation.animator.duration - (prevLocalTime - this._delayTime));
+    }
+  }
+  pause() {
+    this.onGoing = false;
+    this.animations.forEach((animation) => {
+      animation.animator.pause();
+    });
+  }
+  resume() {
+    this.onGoing = true;
+    this.animations.forEach((animation) => {
+      animation.animator.resume();
+    });
+  }
+  start() {
+    this.onGoing = true;
+    this.setUp();
+    this.localTime = 0;
+    this.animations.forEach((animation) => {
+      animation.animator.start();
+    });
+  }
+  stop() {
+    this.onGoing = false;
+    this.playedTime = 0;
+    this.localTime = this._duration + 0.1;
+    this.animations.forEach((animation) => {
+      animation.animator.stop();
+    });
+    this.tearDown();
+  }
+  get duration() {
+    return this._duration + this._delayTime + this._dragTime;
+  }
+  set duration(duration) {
+    if (duration < 0) {
+      return;
+    }
+    const originalDuration = this._duration + this._delayTime + this._dragTime;
+    const scale = duration / originalDuration;
+    const newDelayTime = this._delayTime * scale;
+    const newDragTime = this._dragTime * scale;
+    this._delayTime = newDelayTime;
+    this._dragTime = newDragTime;
+    this.animations.forEach((animation) => {
+      if (animation.startTime == undefined) {
+        animation.startTime = 0;
+      }
+      animation.startTime *= scale;
+      const newDuration = animation.animator.duration * scale;
+      animation.animator.nonCascadingDuration(newDuration);
+    });
+    this.calculateDuration();
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  nonCascadingDuration(newDuration) {
+    if (newDuration < 0) {
+      return;
+    }
+    const originalDuration = this._duration + this._delayTime + this._dragTime;
+    const scale = newDuration / originalDuration;
+    const newDelayTime = this._delayTime * scale;
+    const newDragTime = this._dragTime * scale;
+    this._delayTime = newDelayTime;
+    this._dragTime = newDragTime;
+    this.animations.forEach((animation) => {
+      if (animation.startTime == undefined) {
+        animation.startTime = 0;
+      }
+      animation.startTime *= scale;
+      const newDuration2 = animation.animator.duration * scale;
+      animation.animator.nonCascadingDuration(newDuration2);
+    });
+    this.calculateDuration();
+  }
+  resetAnimationState() {
+    this.onGoing = false;
+    this.animations.forEach((animation) => {
+      animation.animator.resetAnimationState();
+    });
+  }
+  getTrueDuration() {
+    return this._duration;
+  }
+  setUp() {
+    this.setUpFn();
+    this.animations.forEach((animation) => {
+      animation.animator.setUp();
+    });
+  }
+  tearDown() {
+    this.tearDownFn();
+    this.animations.forEach((animation) => {
+      animation.animator.tearDown();
+    });
+  }
+  addAnimation(name, animation, startTime = 0, endCallback = () => {}) {
+    if (this.animations.has(name)) {
+      return;
+    }
+    if (this.parent !== undefined && this.parent.containsAnimation(animation)) {
+      return;
+    }
+    this.animations.set(name, {
+      animator: animation,
+      startTime
+    });
+    animation.setParent(this);
+    if (this.localTime > startTime) {
+      animation.animate(this.localTime - startTime);
+    }
+    const endTime = startTime + animation.duration;
+    this._duration = Math.max(this._duration, endTime);
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  addAnimationAfter(name, animation, afterName, delay = 0) {
+    let afterAnimation = this.animations.get(afterName);
+    if (afterAnimation == undefined) {
+      return;
+    }
+    if (afterAnimation.startTime == undefined) {
+      afterAnimation.startTime = 0;
+    }
+    let startTime = afterAnimation.startTime + afterAnimation.animator.duration;
+    startTime += delay;
+    this.addAnimation(name, animation, startTime);
+    this.calculateDuration();
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  addAnimationAdmist(name, animation, admistName, delay) {
+    let admistAnimation = this.animations.get(admistName);
+    if (admistAnimation == undefined) {
+      return;
+    }
+    if (admistAnimation.startTime == undefined) {
+      admistAnimation.startTime = 0;
+    }
+    let startTime = admistAnimation.startTime + delay;
+    this.addAnimation(name, animation, startTime);
+    this.calculateDuration();
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  addAnimationBefore(name, animation, beforeName, aheadTime = 0) {
+    let beforeAnimation = this.animations.get(beforeName);
+    if (beforeAnimation == undefined) {
+      return;
+    }
+    if (beforeAnimation.startTime == undefined) {
+      beforeAnimation.startTime = 0;
+    }
+    let startTime = beforeAnimation.startTime;
+    startTime -= aheadTime;
+    this.addAnimation(name, animation, startTime);
+    if (startTime < 0) {
+      const pushOver = 0 - startTime;
+      this.animations.forEach((animation2) => {
+        if (animation2.startTime == undefined) {
+          animation2.startTime = 0;
+        }
+        animation2.startTime += pushOver;
+      });
+    }
+    this.calculateDuration();
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  removeAnimation(name) {
+    let animation = this.animations.get(name);
+    let deleted = this.animations.delete(name);
+    if (deleted) {
+      if (animation != null) {
+        animation.animator.detachParent();
+      }
+      this.calculateDuration();
+      if (this.parent != null) {
+        this.parent.updateDuration();
+      }
+    }
+  }
+  set delay(delayTime) {
+    this._delayTime = delayTime;
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  get delay() {
+    return this._delayTime;
+  }
+  set drag(dragTime) {
+    this._dragTime = dragTime;
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  get drag() {
+    return this._dragTime;
+  }
+  removeDelay() {
+    this._delayTime = 0;
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  removeDrag() {
+    this._dragTime = 0;
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  updateDuration() {
+    if (this.checkCyclicChildren()) {
+      return;
+    }
+    this.calculateDuration();
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  calculateDuration() {
+    this._duration = 0;
+    this.animations.forEach((animation) => {
+      if (animation.startTime == undefined) {
+        animation.startTime = 0;
+      }
+      const endTime = animation.startTime + animation.animator.duration;
+      this._duration = Math.max(this._duration, endTime);
+    });
+  }
+  get loops() {
+    return this.loop;
+  }
+  set loops(loop) {
+    this.loop = loop;
+  }
+  checkCyclicChildren() {
+    const allChildren = [];
+    allChildren.push(this);
+    const visited = new Set;
+    while (allChildren.length > 0) {
+      const current = allChildren.pop();
+      if (current == undefined) {
+        continue;
+      }
+      if (visited.has(current)) {
+        return true;
+      }
+      visited.add(current);
+      if (current instanceof CompositeAnimation) {
+        current.animations.forEach((animation) => {
+          allChildren.push(animation.animator);
+        });
+      }
+    }
+    return false;
+  }
+  forceToggleLoop(loop) {
+    this.loop = true;
+    this.animations.forEach((animation) => {
+      animation.animator.loops = true;
+    });
+  }
+  containsAnimation(animationInInterest) {
+    if (this.parent !== undefined) {
+      return this.parent.containsAnimation(animationInInterest);
+    }
+    const allChildren = [];
+    allChildren.push(this);
+    const visited = new Set;
+    while (allChildren.length > 0) {
+      const current = allChildren.pop();
+      if (current == undefined) {
+        continue;
+      }
+      if (current == animationInInterest) {
+        return true;
+      }
+      if (visited.has(current)) {
+        continue;
+      }
+      visited.add(current);
+      if (current instanceof CompositeAnimation) {
+        current.animations.forEach((animation) => {
+          allChildren.push(animation.animator);
+        });
+      }
+    }
+    return false;
+  }
+  onEnd(callback) {
+    this.endCallbacks.push(callback);
+    return () => {
+      this.endCallbacks = this.endCallbacks.filter((cb) => cb != callback);
+    };
+  }
+  onStart(callback) {
+    this.startCallbacks.push(callback);
+    return () => {
+      this.startCallbacks = this.startCallbacks.filter((cb) => cb != callback);
+    };
+  }
+  clearOnEnd() {
+    this.endCallbacks = [];
+  }
+  clearOnStart() {
+    this.startCallbacks = [];
+  }
+  get playing() {
+    return this.onGoing;
+  }
+  get maxLoopCount() {
+    return this._maxLoopCount;
+  }
+  set maxLoopCount(maxLoopCount) {
+    this._maxLoopCount = maxLoopCount;
+  }
+}
+
+class Animation {
+  localTime;
+  _duration;
+  keyframes;
+  animatableAttributeHelper;
+  applyAnimationValue;
+  easeFn;
+  onGoing;
+  currentKeyframeIndex;
+  loop;
+  playedTime;
+  setUpFn;
+  tearDownFn;
+  parent;
+  delayTime = 0;
+  dragTime = 0;
+  reverse = false;
+  endCallbacks = [];
+  startCallbacks = [];
+  startAfterDelayCallbacks = [];
+  zeroPercentageValue;
+  _maxLoopCount;
+  _fillMode = "none";
+  constructor(keyFrames, applyAnimationValue, animatableAttributeHelper, duration = 1000, loop = false, parent = undefined, setUpFn = () => {}, tearDownFn = () => {}, easeFn = linear) {
+    this._duration = duration;
+    this.keyframes = keyFrames;
+    this.animatableAttributeHelper = animatableAttributeHelper;
+    this.applyAnimationValue = applyAnimationValue;
+    this.easeFn = easeFn;
+    this.onGoing = false;
+    this.localTime = duration + 0.1;
+    this.currentKeyframeIndex = 0;
+    this.loop = loop;
+    this.setUpFn = setUpFn;
+    this.tearDownFn = tearDownFn;
+    this.parent = parent;
+    this.playedTime = 0;
+    this.zeroPercentageValue = this.findValue(0, keyFrames, animatableAttributeHelper);
+  }
+  toggleReverse(reverse) {
+    this.reverse = reverse;
+  }
+  start() {
+    this.localTime = 0;
+    this.currentKeyframeIndex = 0;
+    this.onGoing = true;
+    this.setUp();
+  }
+  stop() {
+    this.onGoing = false;
+    this.localTime = this._duration + this.dragTime + this.delayTime + 0.1;
+    this.playedTime = 0;
+    this.tearDown();
+  }
+  pause() {
+    this.onGoing = false;
+  }
+  resume() {
+    this.onGoing = true;
+  }
+  get playing() {
+    return this.onGoing;
+  }
+  animate(deltaTime) {
+    if (this.onGoing != true || this.localTime < 0) {
+      return;
+    }
+    if (deltaTime == 0) {
+      return;
+    }
+    this.localTime += deltaTime;
+    if (this.localTime - deltaTime <= 0 && deltaTime > 0) {
+      this.startCallbacks.forEach((callback) => {
+        queueMicrotask(() => {
+          callback();
+        });
+      });
+    }
+    if (this.localTime >= this.delayTime && (this.localTime <= this.delayTime + this._duration + this.dragTime || this.localTime - deltaTime <= this.delayTime + this._duration + this.dragTime)) {
+      if (this.localTime - deltaTime <= this.delayTime && this.delayTime !== 0 && deltaTime > 0) {
+        this.startAfterDelayCallbacks.forEach((callback) => {
+          queueMicrotask(() => {
+            callback();
+          });
+        });
+        this.applyAnimationValue(this.zeroPercentageValue);
+      }
+      let localTimePercentage = (this.localTime - this.delayTime) / this._duration;
+      let targetPercentage = this.easeFn(localTimePercentage);
+      if (localTimePercentage > 1) {
+        targetPercentage = this.easeFn(1);
+      }
+      let value;
+      if (this.currentKeyframeIndex < this.keyframes.length && this.currentKeyframeIndex >= 0 && (this.reverse ? 1 - this.keyframes[this.currentKeyframeIndex].percentage == targetPercentage : this.keyframes[this.currentKeyframeIndex].percentage == targetPercentage)) {
+        value = this.keyframes[this.currentKeyframeIndex].value;
+      } else {
+        value = this.findValue(targetPercentage, this.keyframes, this.animatableAttributeHelper);
+      }
+      if (this.reverse) {
+        while (this.currentKeyframeIndex >= 0 && 1 - this.keyframes[this.currentKeyframeIndex].percentage <= targetPercentage) {
+          this.currentKeyframeIndex -= 1;
+        }
+      } else {
+        while (this.currentKeyframeIndex < this.keyframes.length && this.keyframes[this.currentKeyframeIndex].percentage <= targetPercentage) {
+          this.currentKeyframeIndex += 1;
+        }
+      }
+      this.applyAnimationValue(value);
+      if (this.localTime >= this._duration + this.dragTime + this.delayTime) {
+        this.playedTime += 1;
+        this.endCallbacks.forEach((callback) => {
+          queueMicrotask(() => {
+            callback();
+          });
+        });
+        if (!this.loops || this._maxLoopCount != null && this.playedTime >= (this.maxLoopCount ?? 0)) {
+          this.stop();
+        } else {
+          this.onGoing = true;
+          this.localTime = 0;
+          this.currentKeyframeIndex = 0;
+          this.start();
+        }
+      }
+    }
+  }
+  findValue(valuePercentage, keyframes, animatableAttributeHelper) {
+    if (valuePercentage > 1) {
+      if (this.reverse) {
+        return animatableAttributeHelper.lerp(valuePercentage, keyframes[1], keyframes[0]);
+      }
+      return animatableAttributeHelper.lerp(valuePercentage, keyframes[keyframes.length - 2], keyframes[keyframes.length - 1]);
+    }
+    if (valuePercentage < 0) {
+      if (this.reverse) {
+        return animatableAttributeHelper.lerp(valuePercentage, keyframes[keyframes.length - 2], keyframes[keyframes.length - 1]);
+      }
+      return animatableAttributeHelper.lerp(valuePercentage, keyframes[1], keyframes[0]);
+    }
+    let left = 0;
+    let right = keyframes.length - 1;
+    while (left <= right) {
+      let mid = left + Math.floor((right - left) / 2);
+      const midPercentage = this.reverse ? 1 - keyframes[mid].percentage : keyframes[mid].percentage;
+      if (midPercentage == valuePercentage) {
+        return keyframes[mid].value;
+      } else if (midPercentage < valuePercentage) {
+        if (this.reverse) {
+          right = mid - 1;
+        } else {
+          left = mid + 1;
+        }
+      } else {
+        if (this.reverse) {
+          left = mid + 1;
+        } else {
+          right = mid - 1;
+        }
+      }
+    }
+    if (left > keyframes.length - 1) {
+      left = keyframes.length - 1;
+    }
+    const interpolateStartFrame = this.reverse ? {
+      percentage: 1 - keyframes[left].percentage,
+      value: keyframes[left].value
+    } : keyframes[left - 1];
+    const interplateEndFrame = this.reverse ? {
+      percentage: 1 - keyframes[left - 1].percentage,
+      value: keyframes[left - 1].value
+    } : keyframes[left];
+    return animatableAttributeHelper.lerp(valuePercentage, interpolateStartFrame, interplateEndFrame);
+  }
+  setUp() {
+    this.setUpFn();
+  }
+  tearDown() {
+    this.tearDownFn();
+  }
+  get loops() {
+    return this.loop;
+  }
+  set loops(loop) {
+    this.loop = loop;
+  }
+  get duration() {
+    return this._duration + this.delayTime + this.dragTime;
+  }
+  set duration(duration) {
+    if (duration < 0) {
+      return;
+    }
+    const originalDuration = this._duration + this.delayTime + this.dragTime;
+    const scale = duration / originalDuration;
+    const newDelayTime = this.delayTime * scale;
+    const newDragTime = this.dragTime * scale;
+    this.delayTime = newDelayTime;
+    this.dragTime = newDragTime;
+    this._duration = this._duration * scale;
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  nonCascadingDuration(newDuration) {
+    if (newDuration < 0) {
+      return;
+    }
+    const originalDuration = this._duration + this.delayTime + this.dragTime;
+    const scale = newDuration / originalDuration;
+    const newDelayTime = this.delayTime * scale;
+    const newDragTime = this.dragTime * scale;
+    this.delayTime = newDelayTime;
+    this.dragTime = newDragTime;
+    this._duration = newDuration;
+  }
+  resetAnimationState() {
+    this.onGoing = false;
+    this.applyAnimationValue(this.keyframes[0].value);
+    this.currentKeyframeIndex = 0;
+    this.setUp();
+  }
+  wrapUp() {
+    this.onGoing = false;
+    this.localTime = this._duration + this.dragTime + this.delayTime + 0.1;
+    this.currentKeyframeIndex = 0;
+  }
+  get delay() {
+    return this.delayTime;
+  }
+  set delay(delayTime) {
+    this.delayTime = delayTime;
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  get drag() {
+    return this.dragTime;
+  }
+  set drag(dragTime) {
+    this.dragTime = dragTime;
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  get trueDuration() {
+    return this._duration;
+  }
+  set trueDuration(duration) {
+    this._duration = duration;
+    if (this.parent != null) {
+      this.parent.updateDuration();
+    }
+  }
+  setParent(parent) {
+    this.parent = parent;
+  }
+  detachParent() {
+    this.parent = undefined;
+  }
+  set keyFrames(keyFrames) {
+    this.keyframes = keyFrames;
+    this.zeroPercentageValue = this.findValue(0, keyFrames, this.animatableAttributeHelper);
+  }
+  get keyFrames() {
+    return this.keyframes;
+  }
+  get easeFunction() {
+    return this.easeFn;
+  }
+  set easeFunction(easeFn) {
+    this.easeFn = easeFn;
+  }
+  onEnd(callback) {
+    this.endCallbacks.push(callback);
+    return () => {
+      this.endCallbacks = this.endCallbacks.filter((cb) => cb != callback);
+    };
+  }
+  onStart(callback) {
+    this.startCallbacks.push(callback);
+    return () => {
+      this.startCallbacks = this.startCallbacks.filter((cb) => cb != callback);
+    };
+  }
+  onStartAfterDelay(callback) {
+    this.startAfterDelayCallbacks.push(callback);
+    return () => {
+      this.startAfterDelayCallbacks = this.startAfterDelayCallbacks.filter((cb) => cb != callback);
+    };
+  }
+  clearOnEnd() {
+    this.endCallbacks = [];
+  }
+  clearOnStart() {
+    this.startCallbacks = [];
+  }
+  get maxLoopCount() {
+    return this._maxLoopCount;
+  }
+  set maxLoopCount(maxLoopCount) {
+    this._maxLoopCount = maxLoopCount;
+  }
+}
+
+class KeyFramesContiner {
+  _keyframes;
+  constructor() {
+    this._keyframes = [];
+  }
+  get keyframes() {
+    return this._keyframes;
+  }
+  from(value) {
+    if (this._keyframes.length == 0) {
+      this._keyframes.push({ percentage: 0, value });
+    } else {
+      if (this._keyframes[0].percentage == 0) {
+        this._keyframes[0].value = value;
+      } else {
+        this._keyframes.unshift({ percentage: 0, value });
+      }
+    }
+    return this;
+  }
+  to(value) {
+    if (this._keyframes.length == 0) {
+      this._keyframes.push({ percentage: 1, value });
+    } else {
+      if (this._keyframes[this._keyframes.length - 1].percentage == 1) {
+        this._keyframes[this._keyframes.length - 1].value = value;
+      } else {
+        this._keyframes.push({ percentage: 1, value });
+      }
+    }
+    return this;
+  }
+  insertAt(percentage, value) {
+    this._keyframes.push({ percentage, value });
+  }
+  clearFrames() {
+    this._keyframes = [];
+  }
+}
+export {
+  stringHelperFunctions,
+  rgbHelperFunctions,
+  pointHelperFunctions,
+  numberHelperFunctions,
+  linear,
+  integerHelperFunctions,
+  StringAnimationHelper,
+  RGBAnimationHelper,
+  PointAnimationHelper,
+  NumberAnimationHelper,
+  KeyFramesContiner,
+  IntegerAnimationHelper,
+  CompositeAnimation,
+  Animation
+};
+
+//# debugId=CA39ED3899929ABA64756E2164756E21
 
 //# sourceMappingURL=index.js.map