remove cleaning funs that are no longer required if transitions are abrupt

Author: g-harel

internal/animate/state.ts

@@ -14,7 +14,8 @@ export interface InternalKeyframe {
     timestamp: number;
     timingFunction: TimingFunc;
     initialPoints: Point[];
-    transitionSourceFrameIndex: number | null;
+    transitionSourceFrameIndex: number;
+    isSynthetic: boolean;
 }
 
 export interface RenderCache {
@@ -43,34 +44,12 @@ export interface TransitionInput<T extends Keyframe> extends RenderInput {
 
 export interface TransitionOutput {
     newFrames: InternalKeyframe[];
-    renderCache: RenderCache;
 }
 
 const genId = (): string => {
     return String(Math.random()).substr(2);
 };
 
-export const removeStaleFrames = (
-    keyframes: InternalKeyframe[],
-    timestamp: number,
-): InternalKeyframe[] => {
-    if (keyframes.length <= 1) return keyframes;
-    const staleCount = keyframes.filter((k) => k.timestamp < timestamp).length;
-    // Keep a single stale frame for the current transition.
-    return keyframes.slice(staleCount - 1);
-};
-
-export const cleanRenderCache = (
-    keyframes: InternalKeyframe[],
-    renderCache: RenderCache,
-): RenderCache => {
-    const newCache: RenderCache = {};
-    for (const frame of keyframes) {
-        newCache[frame.id] = renderCache[frame.id];
-    }
-    return newCache;
-}
-
 export const renderFramesAt = (input: RenderInput): RenderOutput => {
     const {renderCache, currentFrames} = input;
 
@@ -123,13 +102,14 @@ export const renderFramesAt = (input: RenderInput): RenderOutput => {
 
 // TODO generate internal frames. Delayed frames can just copy the previous one.
 // TODO store current shape when interrupts happen to use as source.
-// TODO don't remove any frames.
+// TODO defend against "bad" keyframes like negative timing.
+// TODO copy keyframes as soon as possible to make sure they aren't modified afterwards.
 export const transitionFrames = <T extends Keyframe>(input: TransitionInput<T>): TransitionOutput => {
-    const {renderCache, timestamp, newFrames} = input;
+    const {timestamp, newFrames} = input;
 
     // Wipe animation when given no keyframes.
     if (input.newFrames.length === 0) {
-        return {renderCache: input.renderCache, newFrames: []};
+        return {newFrames: []};
     }
 
     // Add current state as initial frame.
@@ -140,7 +120,8 @@ export const transitionFrames = <T extends Keyframe>(input: TransitionInput<T>):
             initialPoints: currentState.points,
             timestamp: timestamp,
             timingFunction: (p) => p,
-            transitionSourceFrameIndex: null,
+            transitionSourceFrameIndex: -1,
+            isSynthetic: true,
         },
     ];
 
@@ -151,5 +132,5 @@ export const transitionFrames = <T extends Keyframe>(input: TransitionInput<T>):
         }
     }
 
-    return {renderCache, newFrames: internalFrames};
+    return {newFrames: internalFrames};
 };

public/animate.ts

@@ -8,16 +8,10 @@ import {
     renderFramesAt,
     transitionFrames,
     Keyframe,
-    removeStaleFrames,
     RenderCache,
-    cleanRenderCache,
 } from "../internal/animate/state";
 
-// TODO copy keyframes as soon as possible to make sure they aren't modified afterwards.
-// TODO make sure callbacks don't fill up the stack.
-// TODO defend against "bad" keyframes like negative timing.
-// TODO keyframe callbacks
-
+// TODO make sure recursive callbacks don't fill up the stack.
 interface CallbackKeyframe extends Keyframe {
     callback?: () => void;
 }
@@ -38,17 +32,6 @@ interface CallbackStore {
     [frameId: string]: () => void;
 }
 
-const removeExpiredFrameCallbacks = (
-    frames: InternalKeyframe[],
-    oldStore: CallbackStore,
-): CallbackStore => {
-    const newStore: CallbackStore = {};
-    for (const frame of frames) {
-        newStore[frame.id] = oldStore[frame.id];
-    }
-    return newStore;
-};
-
 const canvasBlobGenerator = (keyframe: CanvasKeyframe): Point[] => {
     return mapPoints(genFromOptions(keyframe.blobOptions), ({curr}) => {
         curr.x += keyframe?.canvasOptions?.offsetX || 0;
@@ -63,38 +46,39 @@ export const canvasPath = (): CanvasAnimation => {
     let callbackStore: CallbackStore = {};
 
     const renderFrame: CanvasAnimation["renderFrame"] = () => {
-        const renderTime = Date.now();
-        internalFrames = removeStaleFrames(internalFrames, renderTime);
         const renderOutput = renderFramesAt({
             renderCache: renderCache,
-            timestamp: renderTime,
+            timestamp: Date.now(),
             currentFrames: internalFrames,
         });
+
+        // Update render cache with returned value.
         renderCache = renderOutput.renderCache;
+
+        // Invoke callback if defined and the first time the frame is reached.
         if (renderOutput.lastFrameId && callbackStore[renderOutput.lastFrameId]) {
             callbackStore[renderOutput.lastFrameId]();
             delete callbackStore[renderOutput.lastFrameId];
         }
+
         return renderPath2D(renderOutput.points);
     };
 
     const transition: CanvasAnimation["transition"] = (...keyframes) => {
-        const transitionTime = Date.now();
         const transitionOutput = transitionFrames<CanvasKeyframe>({
             renderCache: renderCache,
-            timestamp: transitionTime,
+            timestamp:  Date.now(),
             currentFrames: internalFrames,
             newFrames: keyframes,
             shapeGenerator: canvasBlobGenerator,
         });
-        renderCache = transitionOutput.renderCache;
-        internalFrames = transitionOutput.newFrames;
 
-        // Cleanup stored data that is no longer associated with a known frame.
-        callbackStore = removeExpiredFrameCallbacks(internalFrames, callbackStore);
-        renderCache = cleanRenderCache(internalFrames, renderCache);
+        // Reset internal state..
+        internalFrames = transitionOutput.newFrames;
+        callbackStore = {};
+        renderCache = {};
 
-        // Populate the callback using returned frame ids.
+        // Populate callback store using returned frame ids.
         for (const newFrame of internalFrames) {
             if (newFrame.transitionSourceFrameIndex === null) continue;
             const {callback} = keyframes[newFrame.transitionSourceFrameIndex];