smooth out initial wiggle animation

g-harel · Sep 28, 2023 · f38431d · f38431d
1 parent 71265e3
commit f38431d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 25 deletions.
diff --git a/demo/content.ts b/demo/content.ts
@@ -925,27 +925,8 @@ addCanvas(
 addCanvas(1.8, (ctx, width, height, animate) => {
     const size = Math.min(width, height) * 0.8;
     const center: Coord = {x: width * 0.5, y: height * 0.5};
-    const trailLength = 40;
-
-    const canvasPointGenerator = (keyframe: CanvasKeyframe | CanvasCustomKeyframe): Point[] => {
-        let points: Point[];
-        if ("points" in keyframe) {
-            points = keyframe.points;
-        } else {
-            points = genFromOptions(keyframe.blobOptions);
-        }
-        return mapPoints(points, ({curr}) => {
-            curr.x += center.x - size / 2;
-            curr.y += center.y - size / 2;
-            return curr;
-        });
-    };
 
-    const animation = statefulAnimationGenerator(
-        canvasPointGenerator,
-        (points: Point[]) => points as any,
-        () => {},
-    )(Date.now);
+    const animation = canvasPath();
 
     wigglePreset(
         animation,
@@ -955,7 +936,10 @@ addCanvas(1.8, (ctx, width, height, animate) => {
             seed: Math.random(),
             size,
         },
-        {},
+        {
+            offsetX: center.x - size / 2,
+            offsetY: center.y - size / 2,
+        },
         {
             speed: 2,
         },

diff --git a/demo/example.ts b/demo/example.ts
@@ -84,7 +84,7 @@ const genFrame = (overrides: any = {}): CanvasKeyframe => {
 // Callback for every frame which starts transition to a new frame.
 const loopAnimation = (): void => {
     extraPoints = 0;
-    genWiggle(2000);
+    genWiggle(5000);
 };
 
 // Quickly animate to a new frame when canvas is clicked.

diff --git a/public/animate.ts b/public/animate.ts
@@ -13,6 +13,7 @@ import {BlobOptions, CanvasOptions} from "./blobs";
 import {noise} from "../internal/rand";
 import {interpolateBetween} from "../internal/animate/interpolate";
 import {prepare} from "../internal/animate/prepare";
+import {timingFunctions} from "../internal/animate/timing";
 
 interface Keyframe {
     // Duration of the keyframe animation in milliseconds.
@@ -145,11 +146,11 @@ export const wigglePreset = (
 ) => {
     // Interval at which a new sample is taken.
     // Multiple of 16 to do work every N frames.
-    const intervalMs = 16 * 5;
+    const intervalMs = 16 * 10;
     const leapSize = 0.01 * wiggleOptions.speed;
     const noiseField = noise(String(blobOptions.seed));
 
-    const transitionFrameCount = 1 + Math.min((wiggleOptions.initialTransition || 0) / intervalMs);
+    const transitionFrameCount = Math.min((wiggleOptions.initialTransition || 0) / intervalMs);
     let transitionStartFrame = animation.renderPoints();
 
     let count = 0;
@@ -172,7 +173,7 @@ export const wigglePreset = (
                     divideRatio: 1,
                 },
             );
-            const progress = 1 / (transitionFrameCount - count);
+            const progress = Math.min(1, 2 / (transitionFrameCount - count));
             const targetPoints = interpolateBetween(
                 progress,
                 preparedStartPoints,