Fix issue that caused animations not to finish all the way

lightning-js · Dec 20, 2023 · 086bf0a · 086bf0a
1 parent f9e82ea
commit 086bf0a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/examples/tests/animation.ts b/examples/tests/animation.ts
@@ -86,30 +86,39 @@ export default async function ({ renderer, testRoot }: ExampleSettings) {
     'ease-in-out-back',
     'cubic-bezier(0,1.35,.99,-0.07)',
     'cubic-bezier(.41,.91,.99,-0.07)',
-    'loopReverse',
+    'loopStopMethodReverse',
+    'loopStopMethodReset',
+    'loop',
   ];
 
   let animationIndex = 0;
   let currentAnimation: IAnimationController;
 
-  const animationSettings: Partial<AnimationExampleSettings> = {
-    duration: 2000,
-    loop: false,
-    stopMethod: false,
-    easing: 'linear',
-  };
-
   const execEasing = (index = 0): void => {
     const easing = easings[index] ?? 'linear';
     easingLabel.text = `Easing demo: ${easing}`;
+    const animationSettings: Partial<AnimationExampleSettings> = {
+      duration: 2000,
+      loop: false,
+      stopMethod: false,
+      easing: 'linear',
+    };
     animationSettings.easing = easing;
 
     // restore x position before start of every animation
     animatableNode.x = 0;
 
-    if (easing === 'loopReverse') {
+    if (easing === 'loopStopMethodReverse') {
+      animationSettings.easing = 'linear';
       animationSettings.loop = true;
       animationSettings.stopMethod = 'reverse';
+    } else if (easing === 'loopStopMethodReset') {
+      animationSettings.easing = 'linear';
+      animationSettings.loop = true;
+      animationSettings.stopMethod = 'reset';
+    } else if (easing === 'loop') {
+      animationSettings.easing = 'linear';
+      animationSettings.loop = true;
     } else {
       animationSettings.loop = false;
       animationSettings.stopMethod = false;
@@ -136,10 +145,6 @@ export default async function ({ renderer, testRoot }: ExampleSettings) {
     if (e.key === 'ArrowLeft') {
       animationIndex--;
     }
-    if (e.key === 'ArrowUp') {
-      const s = animationSettings.stopMethod;
-      animationSettings.stopMethod = !s ? 'reverse' : false;
-    }
 
     // wrap around
     animationIndex =

diff --git a/src/core/animations/CoreAnimation.ts b/src/core/animations/CoreAnimation.ts
@@ -98,7 +98,7 @@ export class CoreAnimation extends EventEmitter {
   }
 
   update(dt: number) {
-    const { duration, loop, easing } = this.settings;
+    const { duration, loop, easing, stopMethod } = this.settings;
     if (!duration) {
       this.emit('finished', {});
       return;
@@ -108,7 +108,13 @@ export class CoreAnimation extends EventEmitter {
 
     if (this.progress > 1) {
       this.progress = loop ? 0 : 1;
-      return this.emit('finished', {});
+      if (stopMethod) {
+        // If there's a stop method emit finished so the stop method can be applied.
+        // TODO: We should probably reevaluate how stopMethod is implemented as currently
+        // stop method 'reset' does not work when looping.
+        this.emit('finished', {});
+        return;
+      }
     }
 
     for (let i = 0; i < this.propsList.length; i++) {
@@ -156,5 +162,8 @@ export class CoreAnimation extends EventEmitter {
       this.node[propName] =
         startValue + (endValue - startValue) * this.progress;
     }
+    if (this.progress === 1) {
+      this.emit('finished', {});
+    }
   }
 }