From 086bf0a45325fc528a23eaa3235e6415ab24c8d2 Mon Sep 17 00:00:00 2001
From: Frank Weindel <6070611+frank-weindel@users.noreply.github.com>
Date: Wed, 20 Dec 2023 13:15:10 -0500
Subject: [PATCH] Fix issue that caused animations not to finish all the way

---
 examples/tests/animation.ts          | 31 ++++++++++++++++------------
 src/core/animations/CoreAnimation.ts | 13 ++++++++++--
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/examples/tests/animation.ts b/examples/tests/animation.ts
index 4d372b6e..e1f57cbc 100644
--- 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
index 9235ff3c..bd479357 100644
--- 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', {});
+    }
   }
 }