npm - @ue-too/animate - Versions diffs - 0.7.3 → 0.9.0 - Mend

@ue-too/animate 0.7.3 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/index.js CHANGED Viewed

@@ -1,907 +1,897 @@
-import { PointCal } from '@ue-too/math';
-const 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;
-    }
+// 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;
+  }
 };
 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;
-    }
+  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;
+  }
 }
-const 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;
-    }
+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;
-    }
+  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;
+  }
 }
-const stringHelperFunctions = {
-    lerp: (ratio, start, end) => {
-        const percentageScale = (ratio - start.percentage) / (end.percentage - start.percentage);
-        // if percentageScale is negative that means it's before the start value just return start value
-        // if percentageScale is more than 1 that means it's after the end value just return the end value
-        // if percentageScale is less than 0.5 return the start value else return the end value
-        return percentageScale < 0 || percentageScale < 0.5 ? start.value : end.value;
-    }
+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);
-        // if percentageScale is negative that means it's before the start value just return start value
-        // if percentageScale is more than 1 that means it's after the end value just return the end value
-        // if percentageScale is less than 0.5 return the start value else return the end value
-        return percentageScale < 0 || percentageScale < 0.5 ? start.value : end.value;
-    }
+  constructor() {}
+  lerp(ratio, start, end) {
+    const percentageScale = (ratio - start.percentage) / (end.percentage - start.percentage);
+    return percentageScale < 0 || percentageScale < 0.5 ? start.value : end.value;
+  }
 }
-const integerHelperFunctions = {
-    lerp: (ratio, start, end) => {
-        const percentageScale = (ratio - start.percentage) / (end.percentage - start.percentage);
-        // if percentageScale is negative that means it's before the start value just return start value
-        // if percentageScale is more than 1 that means it's after the end value just return the end value
-        // if percentageScale is less than 0.5 return the start value else return the end value
-        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);
-        // if percentageScale is negative that means it's before the start value just return start value
-        // if percentageScale is more than 1 that means it's after the end value just return the end value
-        // if percentageScale is less than 0.5 return the start value else return the end value
-        return percentageScale < 0 || percentageScale < 0.5 ? start.value : end.value;
-    }
+  constructor() {}
+  lerp(ratio, start, end) {
+    const percentageScale = (ratio - start.percentage) / (end.percentage - start.percentage);
+    return percentageScale < 0 || percentageScale < 0.5 ? start.value : end.value;
+  }
 }
-const 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;
-    }
+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;
-    }
+  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;
+  }
 }
-const linear = (percentage) => {
-    return percentage;
+// src/composite-animation.ts
+var linear = (percentage) => {
+  return percentage;
 };
 class CompositeAnimation {
-    constructor(animations = new Map(), loop = false, parent = undefined, setupFn = () => { }, tearDownFn = () => { }) {
-        this.endCallbacks = [];
-        this.startCallbacks = [];
-        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);
+  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.reverse = false;
-        this.playedTime = 0;
-    }
-    toggleReverse(reverse) {
-        if (this.reverse == reverse) {
-            return;
-        }
-        this.reverse = reverse;
-        this.animations.forEach((animation) => {
-            animation.animator.toggleReverse(reverse);
+      });
+    }
+    this.animateChildren(deltaTime);
+    this.checkTerminalAndLoop();
+  }
+  checkTerminalAndLoop() {
+    if (this.localTime >= this._duration + this._delayTime + this._dragTime) {
+      this.playedTime += 1;
+      this.endCallbacks.forEach((callback) => {
+        queueMicrotask(() => {
+          callback();
         });
-    }
-    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) {
-            // console.log("composite animation start");
-            this.startCallbacks.forEach((callback) => {
-                queueMicrotask(() => { callback(); });
-            });
-        }
-        this.animateChildren(deltaTime);
-        this.checkTerminalAndLoop();
-    }
-    checkTerminalAndLoop() {
-        if (this.localTime >= this._duration + this._delayTime + this._dragTime) {
-            // console.log("composite animation end");
-            this.playedTime += 1;
-            this.endCallbacks.forEach((callback) => {
-                queueMicrotask(() => { callback(); });
-            });
-            if (!this.loops || (this.maxLoopCount != undefined && this.playedTime >= this.maxLoopCount)) {
-                // this.onGoing = false;
-                this.stop();
-            }
-            else {
-                // if loop is true and current loop is not the last loop, then prepare to start the animations again
-                // this.onGoing = true;
-                // this.localTime = 0;
-                // this.animations.forEach((animation) => {
-                //     if(animation.animator.loops){
-                //         animation.animator.startAnimation();
-                //     }
-                // });
-                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: name }, prevLocalTime);
-                return;
-            }
-            if (prevLocalTime - this._delayTime < animation.startTime) {
-                animation.animator.animate(this.localTime - this._delayTime - animation.startTime);
-            }
-            else {
-                animation.animator.animate(deltaTime);
-            }
+      });
+      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);
         });
-    }
-    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) {
-            // console.log("wrap up", animation.name);
-            // console.log("time remaining", animation.startTime + animation.animator.duration - (prevLocalTime - this._delayTime));
-            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);
+      }
+    }
+    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);
         });
-        this.calculateDuration();
-        if (this.parent != undefined) {
-            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 newDuration = animation.animator.duration * scale;
-            animation.animator.nonCascadingDuration(newDuration);
-        });
-        this.calculateDuration();
-    }
-    resetAnimationState() {
-        this.onGoing = false;
-        this.animations.forEach((animation) => {
-            animation.animator.resetAnimationState();
+      }
+    }
+    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();
         });
-    }
-    getTrueDuration() {
-        return this._duration;
-    }
-    setUp() {
-        this.setUpFn();
-        this.animations.forEach((animation) => {
-            animation.animator.setUp();
+      });
+    }
+    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();
+          });
         });
-    }
-    tearDown() {
-        this.tearDownFn();
-        this.animations.forEach((animation) => {
-            animation.animator.tearDown();
+        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();
+          });
         });
-    }
-    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: 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 != undefined) {
-            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 != undefined) {
-            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 != undefined) {
-            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((animation) => {
-                if (animation.startTime == undefined) {
-                    animation.startTime = 0;
-                }
-                animation.startTime += pushOver;
-            });
-        }
-        this.calculateDuration();
-        if (this.parent != undefined) {
-            this.parent.updateDuration();
-        }
-    }
-    removeAnimation(name) {
-        let animation = this.animations.get(name);
-        let deleted = this.animations.delete(name);
-        if (deleted) {
-            if (animation != undefined) {
-                animation.animator.detachParent();
-            }
-            this.calculateDuration();
-            if (this.parent != undefined) {
-                this.parent.updateDuration();
-            }
-        }
-    }
-    set delay(delayTime) {
-        this._delayTime = delayTime;
-        if (this.parent != undefined) {
-            this.parent.updateDuration();
-        }
-    }
-    get delay() {
-        return this._delayTime;
-    }
-    set drag(dragTime) {
-        this._dragTime = dragTime;
-        if (this.parent != undefined) {
-            this.parent.updateDuration();
-        }
-    }
-    get drag() {
-        return this._dragTime;
-    }
-    removeDelay() {
-        this._delayTime = 0;
-        if (this.parent != undefined) {
-            this.parent.updateDuration();
-        }
-    }
-    removeDrag() {
-        this._dragTime = 0;
-        if (this.parent != undefined) {
-            this.parent.updateDuration();
-        }
-    }
-    updateDuration() {
-        if (this.checkCyclicChildren()) {
-            return;
-        }
-        this.calculateDuration();
-        if (this.parent != undefined) {
-            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 {
-    constructor(keyFrames, applyAnimationValue, animatableAttributeHelper, duration = 1000, loop = false, parent = undefined, setUpFn = () => { }, tearDownFn = () => { }, easeFn = linear) {
-        this.delayTime = 0;
-        this.dragTime = 0;
-        this.reverse = false;
-        this.endCallbacks = [];
-        this.startCallbacks = [];
-        this.startAfterDelayCallbacks = [];
-        this._fillMode = 'none';
-        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.applyAnimationValue(this.zeroPercentageValue);
-        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;
-        // console.log("--------------------");
-        // console.log("local time", this.localTime);
-        // console.log("delta time", deltaTime);
-        if (this.localTime - deltaTime <= 0 && deltaTime > 0) {
-            // console.log("--------------------");
-            // console.log("current localtime", this.localTime);
-            // console.log("current delta time", deltaTime);
-            // console.log("previous local time", this.localTime - deltaTime);
-            // console.log("animation start");
-            // console.log(`the animation has been played ${this.playedTime} times`);
-            // console.log(`the animation is now playing for the ${this.playedTime + 1} time`);
-            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)) {
-            // console.log("local time", this.localTime);
-            // console.log("duration", this.duration);
-            // console.log("local time would trigger end", this.localTime >= this._duration + this.delayTime + this.dragTime);
-            // console.log("delta time", deltaTime);
-            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;
-            // console.log("currentKeyframeIndex", this.currentKeyframeIndex, "length", this.keyFrames.length);
-            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) {
-                // console.log("animation should end");
-                this.playedTime += 1;
-                this.endCallbacks.forEach((callback) => {
-                    queueMicrotask(() => { callback(); });
-                });
-                if (!this.loops || (this._maxLoopCount != undefined && this.playedTime >= (this.maxLoopCount ?? 0))) {
-                    // this.onGoing = false;
-                    // console.log("animation should stop after ", this.playedTime, " loops");
-                    this.stop();
-                }
-                else {
-                    // console.log("animation should restart");
-                    this.onGoing = true;
-                    this.localTime = 0;
-                    this.currentKeyframeIndex = 0;
-                    this.start();
-                }
-            }
-            // if((this.localTime >= this._duration + this.delayTime + this.dragTime) && this.loop){
-            //     // this.startAnimation();
-            //     this.localTime = 0;
-            //     this.onGoing = true;
-            //     this.currentKeyframeIndex = 0;
-            // }
-        }
-    }
-    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) {
-            // excceding the keyframes
-            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, keyframes[left - 1], keyframes[left]);
-        return animatableAttributeHelper.lerp(valuePercentage, interpolateStartFrame, interplateEndFrame);
-    }
-    setUp() {
-        // this.applyAnimationValue(this.keyframes[0].value);
-        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 != undefined) {
-            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 != undefined) {
-            this.parent.updateDuration();
-        }
-    }
-    get drag() {
-        return this.dragTime;
-    }
-    set drag(dragTime) {
-        this.dragTime = dragTime;
-        if (this.parent != undefined) {
-            this.parent.updateDuration();
-        }
-    }
-    get trueDuration() {
-        return this._duration;
-    }
-    set trueDuration(duration) {
-        this._duration = duration;
-        if (this.parent != undefined) {
-            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;
-    }
+        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 {
-    constructor() {
-        this._keyframes = [];
-    }
-    get keyframes() {
-        return this._keyframes;
-    }
-    from(value) {
-        if (this._keyframes.length == 0) {
-            this._keyframes.push({ percentage: 0, value: value });
-        }
-        else {
-            if (this._keyframes[0].percentage == 0) {
-                this._keyframes[0].value = value;
-            }
-            else {
-                this._keyframes.unshift({ percentage: 0, value: value });
-            }
-        }
-        return this;
-    }
-    to(value) {
-        if (this._keyframes.length == 0) {
-            this._keyframes.push({ percentage: 1, value: 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: value });
-            }
-        }
-        return this;
-    }
-    insertAt(percentage, value) {
-        this._keyframes.push({ percentage: percentage, value: value });
-    }
-    clearFrames() {
-        this._keyframes = [];
-    }
+  _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
+};
-export { Animation, CompositeAnimation, IntegerAnimationHelper, KeyFramesContiner, NumberAnimationHelper, PointAnimationHelper, RGBAnimationHelper, StringAnimationHelper, integerHelperFunctions, linear, numberHelperFunctions, pointHelperFunctions, rgbHelperFunctions, stringHelperFunctions };
-//# sourceMappingURL=index.js.map
+//# debugId=67B42D141857372864756E2164756E21