fix edge cases in animation state management util

Author: g-harel

internal/animate/state.ts

@@ -74,15 +74,19 @@ export const renderFramesAt = (input: RenderInput): RenderOutput => {
 
     // Use and cache prepared points for current interpolation.
     let preparedStartPoints: Point[] | undefined =
-        renderCache[startKeyframe.id].preparedStartPoints;
-    let preparedEndPoints: Point[] | undefined = renderCache[endKeyframe.id].preparedEndPoints;
+        renderCache[startKeyframe.id]?.preparedStartPoints;
+    let preparedEndPoints: Point[] | undefined = renderCache[endKeyframe.id]?.preparedEndPoints;
     if (!preparedStartPoints || !preparedEndPoints) {
         [preparedStartPoints, preparedEndPoints] = prepare(
             startKeyframe.initialPoints,
             endKeyframe.initialPoints,
             {rawAngles: false, divideRatio: 1},
         );
+
+        renderCache[startKeyframe.id] = renderCache[startKeyframe.id] || {};
         renderCache[startKeyframe.id].preparedStartPoints = preparedStartPoints;
+
+        renderCache[endKeyframe.id] = renderCache[endKeyframe.id] || {};
         renderCache[endKeyframe.id].preparedEndPoints = preparedEndPoints;
     }
 
@@ -91,12 +95,15 @@ export const renderFramesAt = (input: RenderInput): RenderOutput => {
         (input.timestamp - startKeyframe.timestamp) /
         (endKeyframe.timestamp - startKeyframe.timestamp);
 
+    // Keep progress withing expected range (ex. division by 0).
+    const clampedProgress = Math.max(0, Math.min(1, progress));
+
     // Apply timing function of end frame.
-    const adjustedProgress = endKeyframe.timingFunction(progress);
+    const adjustedProgress = endKeyframe.timingFunction(clampedProgress);
 
     return {
         renderCache,
-        lastFrameId: startKeyframe.id,
+        lastFrameId: clampedProgress === 1 ? endKeyframe.id : startKeyframe.id,
         points: interpolateBetween(adjustedProgress, preparedStartPoints, preparedEndPoints),
     };
 };
@@ -115,6 +122,22 @@ export const transitionFrames = <T extends Keyframe>(
 
     // Add current state as initial frame.
     const currentState = renderFramesAt(input);
+    if (currentState.lastFrameId === null) {
+        // If there is currently no shape being rendered, use a point in the
+        // center of the next frame as the initial point.
+        const firstShape = input.shapeGenerator(input.newFrames[0]);
+        let firstShapeCenterPoint: Point = {
+            x: 0,
+            y: 0,
+            handleIn: {angle: 0, length: 0},
+            handleOut: {angle: 0, length: 0},
+        };
+        for (const point of firstShape) {
+            firstShapeCenterPoint.x += point.x / firstShape.length;
+            firstShapeCenterPoint.y += point.y / firstShape.length;
+        }
+        currentState.points = [firstShapeCenterPoint, firstShapeCenterPoint, firstShapeCenterPoint];
+    }
     newInternalFrames.push({
         id: genId(),
         initialPoints: currentState.points,

internal/animate/timing.ts

@@ -27,6 +27,8 @@ const elasticOut = (s: number): TimingFunc => (p) => {
 };
 
 // https://www.desmos.com/calculator/fqisoq1kuw
+// TODO lower magnitude/amount of bounce.
+// TODO Rename in/out to avoid confusion (out is out from point before).
 export const timingFunctions = {
     linear,
     easeIn,

public/animate.ts

@@ -88,67 +88,3 @@ export const canvasPath = (): CanvasAnimation => {
 
     return {renderFrame, transition};
 };
-
-/////////////
-// example //
-/////////////
-
-// TODO remove
-const blobs2Animate = {canvasPath};
-
-const canvas = document.getElementById("canvas") as any;
-const ctx = canvas.getContext("2d");
-
-const animation = blobs2Animate.canvasPath();
-window.requestAnimationFrame(() => {
-    ctx.fill(animation.renderFrame());
-});
-
-const loop = () => {
-    animation.transition(
-        {
-            duration: 2000,
-            blobOptions: {
-                extraPoints: 3,
-                randomness: 3,
-                seed: "blob1",
-                size: 200,
-            },
-        },
-        {
-            duration: 2000,
-            callback: loop,
-            blobOptions: {
-                extraPoints: 3,
-                randomness: 3,
-                seed: "blob2",
-                size: 200,
-            },
-        },
-    );
-};
-
-animation.transition({
-    duration: 0,
-    callback: loop,
-    blobOptions: {
-        extraPoints: 3,
-        randomness: 3,
-        seed: "start",
-        size: 200,
-    },
-});
-
-const button = document.getElementById("button") as any;
-button.onclick(() => {
-    animation.transition({
-        duration: 100,
-        callback: loop,
-        blobOptions: {
-            extraPoints: 3,
-            randomness: 7,
-            seed: "onClick",
-            size: 200,
-        },
-    });
-});