rename timing funcs for clarity + remove and adjust elastic funcs

Author: g-harel

index.animated.html

@@ -100,7 +100,7 @@
             // Generate a keyframe with overridable default values.
             const genFrame = (overrides) => ({
                 duration: 4000,
-                timingFunction: "easeInOut",
+                timingFunction: "ease",
                 callback: loopAnimation,
                 blobOptions: {
                     extraPoints: 3,
@@ -119,7 +119,7 @@
 
             // Quickly animate to a new frame when canvas is clicked.
             canvas.onclick = () => {
-                animation.transition(genFrame({duration: 400, timingFunction: "elasticIn0"}));
+                animation.transition(genFrame({duration: 400, timingFunction: "elasticEnd0"}));
             };
         </script>
     </body>

internal/animate/state.ts

@@ -3,8 +3,6 @@ import {RenderCache, InternalKeyframe, renderFramesAt, transitionFrames, Keyfram
 import {typeCheck, error} from "../errors";
 import {timingFunctions} from "./timing";
 
-// TODO make sure recursive callbacks don't fill up the stack.
-
 interface CallbackKeyframe extends Keyframe {
     callback?: () => void;
 }

internal/animate/testing/script.ts

@@ -259,53 +259,65 @@ const loopBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
     }
 };
 
-const genAnimation = (speed: number): blobs2Animate.CanvasAnimation => {
+const genAnimation = (speed: number, offset: number, timing: blobs2Animate.CanvasKeyframe["timingFunction"]) => {
     const animation = blobs2Animate.canvasPath();
 
     const loopAnimation = () => {
         animation.transition(
             {
                 duration: speed,
                 delay: speed,
-                timingFunction: "easeInOut",
+                timingFunction: "ease",
                 blobOptions: {
                     extraPoints: 3,
                     randomness: 4,
                     seed: Math.random(),
                     size: 200,
                 },
+                canvasOptions: {
+                    offsetX: offset,
+                },
             },
             {
                 duration: speed,
-                timingFunction: "easeInOut",
+                timingFunction: "ease",
                 blobOptions: {
                     extraPoints: 3,
                     randomness: 4,
                     seed: Math.random(),
                     size: 200,
                 },
+                canvasOptions: {
+                    offsetX: offset,
+                },
             },
             {
                 duration: speed,
                 delay: speed,
-                timingFunction: "easeInOut",
+                timingFunction: "ease",
                 blobOptions: {
                     extraPoints: 3,
                     randomness: 4,
                     seed: Math.random(),
                     size: 200,
                 },
+                canvasOptions: {
+                    offsetX: offset,
+                },
             },
             {
                 duration: speed,
                 callback: loopAnimation,
-                timingFunction: "easeInOut",
+                timingFunction: "ease",
                 blobOptions: {
                     extraPoints: 39,
                     randomness: 2,
                     seed: Math.random(),
                     size: 200,
                 },
+                canvasOptions: {
+                    offsetX: offset,
+                },
             },
         );
     };
@@ -319,21 +331,26 @@ const genAnimation = (speed: number): blobs2Animate.CanvasAnimation => {
             seed: 0,
             size: 200,
         },
+        canvasOptions: {
+            offsetX: offset,
+        },
     });
 
+    const oldOnclick = interact.onclick || (() => 0);
     interact.onclick = () => {
+        oldOnclick();
         animation.transition({
-            duration: 400,
+            duration: speed,
             callback: loopAnimation,
-            timingFunction: "elasticIn0",
+            timingFunction: timing,
             blobOptions: {
-                extraPoints: 3,
+                extraPoints: 30,
                 randomness: 8,
                 seed: Math.random(),
                 size: 180,
             },
             canvasOptions: {
-                offsetX: 10,
+                offsetX: 10 + offset,
                 offsetY: 10,
             },
         });
@@ -345,7 +362,12 @@ const genAnimation = (speed: number): blobs2Animate.CanvasAnimation => {
 (() => {
     let percentage = animationStart;
 
-    const animation = genAnimation(1000);
+    const animations = [
+        genAnimation(1000, 0, "elasticEnd0"),
+        genAnimation(1000, 200, "elasticEnd1"),
+        genAnimation(1000, 400, "elasticEnd2"),
+        genAnimation(1000, 600, "elasticEnd3"),
+    ];
 
     const renderFrame = () => {
         clear(ctx);
@@ -362,7 +384,9 @@ const genAnimation = (speed: number): blobs2Animate.CanvasAnimation => {
         testPrepPointsD(percentage);
         testPrepLetters(percentage);
 
-        ctx.fill(animation.renderFrame());
+        for (const animation of animations) {
+            ctx.fill(animation.renderFrame());
+        }
 
         percentage += animationSpeed / 1000;
         percentage = mod(percentage, 1);

internal/animate/timing.ts

@@ -6,42 +6,32 @@ const linear: TimingFunc = (p) => {
     return p;
 };
 
-const easeIn: TimingFunc = (p) => {
+const easeEnd: TimingFunc = (p) => {
     return 1 - (p - 1) ** 2;
 };
 
-const easeOut: TimingFunc = (p) => {
-    return 1 - easeIn(1 - p);
+const easeStart: TimingFunc = (p) => {
+    return 1 - easeEnd(1 - p);
 };
 
-const easeInOut: TimingFunc = (p) => {
+const ease: TimingFunc = (p) => {
     return 0.5 + 0.5 * Math.sin(Math.PI * (p + 1.5));
 };
 
-const elasticIn = (s: number): TimingFunc => (p) => {
+const elasticEnd = (s: number): TimingFunc => (p) => {
     return Math.pow(2, -10 * p) * Math.sin(((p - s / 4) * (2 * Math.PI)) / s) + 1;
 };
 
-const elasticOut = (s: number): TimingFunc => (p) => {
-    return 1 - elasticIn(s)(1 - 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,
-    easeOut,
-    easeInOut,
-    elasticIn0: elasticIn(1),
-    elasticIn1: elasticIn(0.16),
-    elasticIn2: elasticIn(0.09),
-    elasticIn3: elasticIn(0.05),
-    elasticOut0: elasticOut(1),
-    elasticOut1: elasticOut(0.16),
-    elasticOut2: elasticOut(0.09),
-    elasticOut3: elasticOut(0.05),
+    easeEnd,
+    easeStart,
+    ease,
+    elasticEnd0: elasticEnd(1),
+    elasticEnd1: elasticEnd(0.64),
+    elasticEnd2: elasticEnd(0.32),
+    elasticEnd3: elasticEnd(0.16),
 };
 
 // @ts-ignore: Type assertion.

public/animate.ts

@@ -10,17 +10,13 @@ export interface CanvasKeyframe {
     duration: number;
     timingFunction?:
         | "linear"
-        | "easeIn"
-        | "easeOut"
-        | "easeInOut"
-        | "elasticIn0"
-        | "elasticIn1"
-        | "elasticIn2"
-        | "elasticIn3"
-        | "elasticOut0"
-        | "elasticOut1"
-        | "elasticOut2"
-        | "elasticOut3";
+        | "easeEnd"
+        | "easeStart"
+        | "ease"
+        | "elasticEnd0"
+        | "elasticEnd1"
+        | "elasticEnd2"
+        | "elasticEnd3";
     callback?: () => void;
     blobOptions: {
         seed: number | string;
@@ -43,6 +39,7 @@ const canvasBlobGenerator = (keyframe: CanvasKeyframe): Point[] => {
 };
 
 // Only need to check properties unique to the canvas animation generator.
+// TODO test bad inputs.
 const canvasKeyframeChecker = (keyframe: CanvasKeyframe, index: number) => {
     typeCheck(`keyframe[${index}].canvasOptions`, keyframe.canvasOptions, ["object", "undefined"]);
     if (keyframe.canvasOptions) {