Speeding up keyframe pregeneration

motiondivision · Feb 24, 2023 · bd69eea · bd69eea
1 parent ec15b0c
commit bd69eea
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/framer-motion/src/animation/legacy-popmotion/index.ts b/packages/framer-motion/src/animation/legacy-popmotion/index.ts
@@ -195,9 +195,21 @@ export function animateValue<V = number>({
          * animate() can't yet be sampled for time, instead it
          * consumes time. So to sample it we have to run a low
          * temporal-resolution version.
+         *
+         * isControlled should be set to true if sample is being run within
+         * a loop. This indicates that we're not arbitrarily sampling
+         * the animation but running it one step after another. Therefore
+         * we don't need to run a low-res version here. This is a stop-gap
+         * until a rewrite can sample for time.
          */
-        sample: (t: number) => {
+        sample: (t: number, isControlled: boolean = false) => {
             elapsed = initialElapsed
+
+            if (isControlled) {
+                update(t)
+                return state
+            }
+
             const sampleResolution =
                 duration && typeof duration === "number"
                     ? Math.max(duration * 0.5, 50)

diff --git a/packages/framer-motion/src/animation/waapi/create-accelerated-animation.ts b/packages/framer-motion/src/animation/waapi/create-accelerated-animation.ts
@@ -69,7 +69,7 @@ export function createAcceleratedAnimation(
          */
         let t = 0
         while (!state.done && t < 20000) {
-            state = sampleAnimation.sample(t)
+            state = sampleAnimation.sample(t, true)
             pregeneratedKeyframes.push(state.value)
             t += sampleDelta
         }

diff --git a/packages/framer-motion/src/frameloop/types.ts b/packages/framer-motion/src/frameloop/types.ts
@@ -17,13 +17,7 @@ export interface Step {
     process: (frame: FrameData) => void
 }
 
-export type StepId =
-    | "read"
-    | "update"
-    | "postUpdate"
-    | "preRender"
-    | "render"
-    | "postRender"
+export type StepId = "read" | "update" | "preRender" | "render" | "postRender"
 
 export type Sync = {
     [key in StepId]: Schedule