[WIP] Animation Utilities

packages/dsi-logo-maker/functions/easing/index.js

@@ -0,0 +1,78 @@
+// This file is for demo purposes on the deploy preview only
+// This will be deleted before the final PR review is happening
+//
+// TODO: DELETE
+import {
+  transition,
+  namedEasings,
+  namedDirections,
+} from "@mechanic-design/transition";
+
+export const handler = async ({ inputs, frame, done, getCanvas, drawLoop }) => {
+  const { width, height, easing, direction, iterationCount, duration } = inputs;
+
+  const { ctx } = getCanvas(width, height);
+  const w = transition({
+    from: 0,
+    to: width,
+    duration: duration,
+    easing: easing,
+    iterationCount: iterationCount,
+    direction: direction
+  });
+
+  drawLoop(({ timestamp }) => {
+    ctx.clearRect(0, 0, width, height);
+
+    ctx.fillStyle = "blue";
+    ctx.fillRect(0, 0, w(timestamp), height);
+
+    if (timestamp < 10) {
+      frame();
+    } else {
+      done();
+    }
+  });
+};
+
+export const inputs = {
+  width: {
+    type: "number",
+    default: 500
+  },
+  height: {
+    type: "number",
+    default: 500
+  },
+  easing: {
+    type: "text",
+    options: namedEasings,
+    default: namedEasings[0]
+  },
+  direction: {
+    type: "text",
+    options: namedDirections,
+    default: namedDirections[0]
+  },
+  iterationCount: {
+    type: "number",
+    default: 1,
+    min: 1,
+    max: 1000,
+    slider: true,
+  },
+  duration: {
+    type: "number",
+    label: "Animation Iteration Duration (in seconds)",
+    min: 0,
+    max: 10,
+    slider: true,
+    step: 0.05,
+    default: 1,
+  }
+};
+
+export const settings = {
+  engine: require("@mechanic-design/engine-canvas"),
+  animated: true
+};

packages/dsi-logo-maker/package.json

@@ -39,6 +39,7 @@
     "@babel/runtime": "^7.14.6",
     "@mechanic-design/cli": "^2.0.0-beta.10",
     "@mechanic-design/core": "^2.0.0-beta.10",
+    "@mechanic-design/transition": "^2.0.0-beta.10",
     "@mechanic-design/engine-canvas": "^2.0.0-beta.10",
     "@mechanic-design/engine-react": "^2.0.0-beta.10",
     "opentype.js": "^1.3.4"

packages/transition/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased
+
+### Added
+
+- First release of the Mechanic transition helpers

packages/transition/README.md

@@ -0,0 +1,64 @@
+# @mechanic-design/transition
+
+Helper functions to make animation easier.
+
+## Usage
+
+```js
+import { transition } from "@mechanic-design/transition";
+
+export const handler = ({ inputs, frame, done, drawLoop }) => {
+  const xPos = transition({
+    from: 0,
+    to: 100,
+    // These can be frames or seconds, depending on what
+    // you pass as the tick in the next step
+    duration: 10,
+    delay: 1,
+
+    // Allows to set how often the transition should run
+    // Defaults to 1
+    iterationCount: 10,
+
+    // Defines the direction of the animation
+    // forward (0 -> 1)
+    // runs the animation in the specified direction
+    //
+    // reverse (1 -> 0)
+    // runs the animation in the reversed direction 
+    //
+    // alternate (0 -> 1 -> 0 -> 1 -> ...)
+    // runs the animation in alternating directions, starting
+    // with a forwards run.
+    //
+    // alternateReverse (1 -> 0 -> -> 0 -> ...)
+    // runs the animation in alternating directions, starting
+    // with a reversed run.
+    //
+    // Defaults to forward
+    direction: 'alternate',
+
+    // Sets the easing curve of the transition. Accepts a custom
+    // function or a string referring to one of the predefined
+    // easing curves. See `src/easings.js` for a list of all
+    // predefined easings.
+    //
+    // Defaults to linear
+    easing: 'easeInOutExpo',
+  });
+
+  drawLoop({ frameCount, timestamp }) => {
+    ctx.fillRect(
+      // If you pass the timestamp here, duration and delay
+      // will be treated as seconds.
+      //
+      // If you passed frameCount, duration and delay would
+      // be considered as frame offsets.
+      xPos(timestamp),
+      0,
+      100,
+      100,
+    );
+  });
+};
+```

packages/transition/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@mechanic-design/transition",
+  "version": "2.0.0-beta.10",
+  "description": "A collection of utilities to help with transitions for animations",
+  "license": "MIT",
+  "homepage": "https://github.com/designsystemsinternational/mechanic#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/designsystemsinternational/mechanic",
+    "directory": "packages/transition"
+  },
+  "bugs": {
+    "url": "https://github.com/designsystemsinternational/mechanic/issues",
+    "email": "i@designsystems.international"
+  },
+  "author": {
+    "name": "Rune Skjoldborg Madsen",
+    "email": "i@designsystems.international",
+    "url": "https://designsystems.international"
+  },
+  "contributors": [
+    {
+      "name": "Fernando Florenzano Hernández",
+      "email": "i@designsystems.international",
+      "url": "https://designsystems.international"
+    },
+    {
+      "name": "Martin Bravo",
+      "email": "i@designsystems.international",
+      "url": "https://designsystems.international"
+    },
+    {
+      "name": "Lucas Dino Nolte",
+      "email": "lucas@designsystems.international",
+      "url": "https://designsystems.international"
+    }
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "dependencies": {
+    "@mechanic-design/core": "^2.0.0-beta.10"
+  },
+  "engines": {
+    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+  }
+}

packages/transition/src/direction.js

@@ -0,0 +1,63 @@
+/**
+ * Pre-configured collection of direction functions. A direction function
+ * gets the current timestamp and the duration of the transition as
+ * its input and repeats a noramlized t value between 0 and 1.
+ */
+export const DirectionFunctions = {
+  // Runs the transition once forward
+  forward: (current, duration, iterationCount) => {
+    const curIteration = Math.floor(current / duration);
+    if (curIteration >= iterationCount) return 1;
+
+    return (current % duration) / duration;
+  },
+
+  // Alternates the transition between forwards and
+  // backwards execution
+  alternate: (current, duration, iterationCount) => {
+    const curIteration = Math.floor(current / duration);
+    const t = (current % duration) / duration;
+
+    if (curIteration >= iterationCount) {
+      return iterationCount % 2 === 0 ? 0 : 1;
+    } else {
+      return curIteration % 2 === 0 ? t : 1 - t;
+    }
+  },
+
+  // Reverses the transition
+  reverse: (current, duration, iterationCount) => {
+    const curIteration = Math.floor(current / duration);
+    if (curIteration >= iterationCount) return 0;
+    return 1 - (current % duration) / duration;
+  },
+
+  // Alternates the transition, starting from the
+  // reversed transition
+  alternateReverse: (current, duration, iterationCount) => {
+    const curIteration = Math.floor(current / duration);
+    const t = (current % duration) / duration;
+
+    if (curIteration >= iterationCount) {
+      return iterationCount % 2 === 0 ? 1 : 0;
+    } else {
+      return curIteration % 2 === 0 ? 1 - t : t;
+    }
+  }
+};
+
+/**
+ * Looks up the user specified animation direction and returns
+ * the matching function.
+ *
+ * @params{string} direction
+ */
+export const resolveDirection = direction => {
+  if (DirectionFunctions[direction]) return DirectionFunctions[direction];
+
+  throw new Error(
+    `Unexpected direction (${direction}) passed to transition function. Direction should be one of the pre-built values: ${Object.keys(
+      DirectionFunctions
+    ).join(", ")}.`
+  );
+};