fix animation breakage when transitioning with more than one frame

Author: g-harel

internal/animate/interpolate.ts

@@ -20,6 +20,7 @@ const interpolateAngle = (percentage: number, a: number, b: number): number => {
 // Interpolates linearly between a and b. Can only interpolate between point lists that have the
 // same number of points. Easing effects can be applied to the percentage given to this function.
 // Percentages outside the 0-1 range are supported.
+// TODO handle length should continue animating?
 export const interpolateBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
     if (a.length !== b.length) throw new Error("must have equal number of points");
 

internal/animate/state.ts

@@ -67,7 +67,7 @@ export const renderFramesAt = (input: RenderInput): RenderOutput => {
     let startKeyframe = currentFrames[0];
     let endKeyframe = currentFrames[1];
     for (let i = 2; i < currentFrames.length; i++) {
-        if (endKeyframe.timestamp < input.timestamp) break;
+        if (endKeyframe.timestamp > input.timestamp) break;
         startKeyframe = currentFrames[i - 1];
         endKeyframe = currentFrames[i];
     }

internal/animate/testing/index.html

@@ -18,6 +18,11 @@
                 display: flex;
                 flex-direction: column;
             }
+
+            #interact {
+                margin-top: 20px;
+                padding: 10px;
+            }
         </style>
     </head>
 

internal/animate/testing/script.ts

@@ -262,52 +262,45 @@ const loopBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
 const animation = blobs2Animate.canvasPath();
 
 const loopAnimation = () => {
-    console.log("LOOP");
-
-    animation.transition(
-        {
-            duration: 2000,
-            blobOptions: {
-                extraPoints: 3,
-                randomness: 3,
-                seed: "blob1",
-                size: 200,
-            },
-        },
-        {
-            duration: 2000,
-            callback: loopAnimation,
-            blobOptions: {
-                extraPoints: 3,
-                randomness: 3,
-                seed: "blob2",
-                size: 200,
-            },
+    animation.transition({
+        duration: 2000 + 1000 * Math.random(),
+        callback: loopAnimation,
+        timingFunction: "easeInOut",
+        blobOptions: {
+            extraPoints: 3,
+            randomness: 4,
+            seed: Math.random(),
+            size: 200,
         },
-    );
+    });
 };
 
 animation.transition({
-    duration: 100,
+    duration: 0,
     callback: loopAnimation,
     blobOptions: {
-        extraPoints: 3,
-        randomness: 3,
-        seed: "start",
+        extraPoints: 1,
+        randomness: 0,
+        seed: 0,
         size: 200,
     },
 });
 
 interact.onclick = () => {
     animation.transition({
-        duration: 1000,
+        duration: 400,
         callback: loopAnimation,
+        timingFunction: "elasticIn0",
         blobOptions: {
             extraPoints: 3,
-            randomness: 7,
-            seed: "onClick",
-            size: 200,
+            randomness: 8,
+            seed: Math.random(),
+            size: 180,
         },
+        canvasOptions: {
+            offsetX: 10,
+            offsetY: 10,
+        }
     });
 };
 
@@ -329,11 +322,12 @@ interact.onclick = () => {
         testPrepPointsD(percentage);
         testPrepLetters(percentage);
 
+        ctx.fill(animation.renderFrame());
+
         percentage += animationSpeed / 1000;
         percentage = mod(percentage, 1);
         if (animationSpeed > 0) requestAnimationFrame(renderFrame);
 
-        ctx.fill(animation.renderFrame());
     };
     renderFrame();
 })();