Merge pull request #70 from cmgriffing/fix/reuse-pause-frames

fix: reuse pause frames
cmgriffing · Nov 14, 2024 · e64398c · e64398c
2 parents 24dabd0 + b34714e
commit e64398c
Showing 1 changed file with 27 additions and 22 deletions.
diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx
@@ -173,30 +173,12 @@ export default function Editor(props: EditorProps) {
         return fontSize && fontFamily
       })
 
-      const loopedFrames = []
-      const middleFrames = []
-
-      for (let i = 0; i < animationFrames; i++) {
-        middleFrames.push(i)
-      }
-
       const pauseFrameLength = 60
-      const firstFrames = new Array(pauseFrameLength).fill(0)
-      const lastFrames = new Array(pauseFrameLength).fill(animationFrames)
 
-      loopedFrames.push(
-        ...firstFrames,
-        ...middleFrames,
-        ...lastFrames,
-        ...middleFrames.toReversed(),
-      )
-
-      for (let frame = 0; frame < loopedFrames.length; frame++) {
-        const actualFrame = loopedFrames[frame]
-
-        const canvas = await createAnimationFrame(
+      const wrappedCreateAnimationFrame = async (frame: number) => {
+        return createAnimationFrame(
           magicMoveElements(),
-          actualFrame,
+          frame,
           maxContainerDimensions()?.width || 100,
           maxContainerDimensions()?.height || 100,
           {
@@ -223,10 +205,33 @@ export default function Editor(props: EditorProps) {
             },
           },
         )
+      }
+
+      const firstFrameCanvas = await wrappedCreateAnimationFrame(0)
+      for (let frame = 0; frame < pauseFrameLength; frame++) {
+        canvasFrames.push(firstFrameCanvas)
+      }
+
+      const middleFrameNumbers = []
+
+      for (let i = 0; i < animationFrames; i++) {
+        middleFrameNumbers.push(i)
+      }
+
+      let middleFrames = []
+      for (let frame = 0; frame < middleFrameNumbers.length; frame++) {
+        const canvas = await wrappedCreateAnimationFrame(middleFrameNumbers[frame])
+        middleFrames.push(canvas)
+      }
+      canvasFrames.push(...middleFrames)
 
-        canvasFrames.push(canvas)
+      const lastFrameCanvas = await wrappedCreateAnimationFrame(animationFrames)
+      for (let frame = 0; frame < pauseFrameLength; frame++) {
+        canvasFrames.push(lastFrameCanvas)
       }
 
+      canvasFrames.push(...middleFrames.toReversed())
+
       const blob = await encode({
         workerUrl,
         format: 'blob',