@pixerate/editor 0.59.0 → 0.60.0

package/dist/animation-editor/index.js

@@ -74,6 +74,7 @@ var MOTION_COMMAND_TYPES = [
   "wait"
 ];
 var MOTION_ENTER_STYLES = ["fade", "pop", "grow", "slide", "draw", "zoom", "rise", "wipe", "iris", "split"];
+var MOTION_BLENDS = ["replace", "add"];
 var MOTION_REPEAT_MODES = ["loop", "mirror", "offset"];
 var MOTION_EXIT_STYLES = ["fade", "shrink", "slide", "undraw", "wipe"];
 var MOTION_IRIS_SHAPES = ["circle", "box"];
@@ -209,18 +210,18 @@ var COMMAND_KEYS = {
   enter: [...BASE_KEYS, "style", "direction", "distance", "scale", "shape", "orientation"],
   exit: [...BASE_KEYS, "style", "direction", "distance"],
   draw: [...BASE_KEYS, "from", "to"],
-  move: [...BASE_KEYS, "by", "to"],
-  rotate: [...BASE_KEYS, "by", "to"],
-  scale: [...BASE_KEYS, "to", "geometric"],
+  move: [...BASE_KEYS, "by", "to", "blend"],
+  rotate: [...BASE_KEYS, "by", "to", "blend"],
+  scale: [...BASE_KEYS, "to", "geometric", "blend"],
   fade: [...BASE_KEYS, "to"],
   style: [...BASE_KEYS, "fill", "stroke", "strokeWidth"],
   morph: [...BASE_KEYS, "into"],
   follow: [...BASE_KEYS, "path", "rotate", "from", "to"],
-  pulse: [...BASE_KEYS, "amount", "count"],
-  shake: [...BASE_KEYS, "amount", "count", "axis"],
-  teeter: [...BASE_KEYS, "angle", "count"],
-  wave: [...BASE_KEYS, "amount", "count"],
-  wiggle: [...BASE_KEYS, "amount", "frequency", "octaves", "rotate", "seed"],
+  pulse: [...BASE_KEYS, "amount", "count", "blend"],
+  shake: [...BASE_KEYS, "amount", "count", "axis", "blend"],
+  teeter: [...BASE_KEYS, "angle", "count", "blend"],
+  wave: [...BASE_KEYS, "amount", "count", "blend"],
+  wiggle: [...BASE_KEYS, "amount", "frequency", "octaves", "rotate", "seed", "blend"],
   "color-pulse": [...BASE_KEYS, "color", "paint", "count"],
   effect: [...BASE_KEYS, "effect", "param", "to"],
   wait: ["type", "duration", "with", "note"]
@@ -264,6 +265,7 @@ function commandShapeProblems(command2, where) {
     if (type === "enter" || type === "exit") p(`"repeat" is not for ${type} (it brings things in or out once); repeat an emphasis or a move instead.`);
     else if (!(Number.isInteger(command2.repeat) && command2.repeat >= 1 && command2.repeat <= 1e3)) p(`"repeat" must be a whole number from 1 to 1000.`);
   }
+  if (command2.blend !== void 0 && !MOTION_BLENDS.includes(command2.blend)) p(`"blend" must be "replace" (the change takes over) or "add" (a layer on top).`);
   if (command2.repeatMode !== void 0 && !MOTION_REPEAT_MODES.includes(command2.repeatMode)) p(`"repeatMode" must be one of ${MOTION_REPEAT_MODES.join(", ")}.`);
   if (command2.steps !== void 0 && !(isNum(command2.steps) && command2.steps > 0 && command2.steps <= 120)) p(`"steps" must be frames per second from above 0 to 120 (12 holds each pose for two frames at 24 fps).`);
   switch (type) {
@@ -595,6 +597,20 @@ function trackValue(track, time, raw = false) {
   return first.from;
 }
 var motionTrackKey = (node, property) => `${node}\0${property}`;
+var motionAddTrackKey = (node, property) => `${node}\0${property}\0add`;
+var MOTION_ADDITIVE_PROPERTIES = ["x", "y", "rotation", "scaleX", "scaleY"];
+function withMotionLayers(timeline, node, property, base, time, raw = false) {
+  const layers = timeline.tracks.get(motionAddTrackKey(node, property));
+  if (!layers) return base;
+  const scale = property === "scaleX" || property === "scaleY";
+  let v = base;
+  for (const layer of layers) {
+    if (layer.start > time) continue;
+    const x = Number(segmentValue(layer, time, raw));
+    if (Number.isFinite(x)) v = scale ? v * x : v + x;
+  }
+  return v;
+}
 function fitMotionRect(rect, aspect) {
   const cx = rect.x + rect.width / 2;
   const cy = rect.y + rect.height / 2;
@@ -698,7 +714,7 @@ function compileMotionScene(scene) {
     return v ?? motionRestValue(nodes.get(node), property, artwork);
   };
   const push = (segment) => {
-    const key = motionTrackKey(segment.node, segment.property);
+    const key = segment.blend === "add" ? motionAddTrackKey(segment.node, segment.property) : motionTrackKey(segment.node, segment.property);
     let track = tracks.get(key);
     if (!track) tracks.set(key, track = []);
     track.push(segment);
@@ -837,18 +853,26 @@ function compileMotionScene(scene) {
           dx = target.x - (entry.center.x + num("x"));
           dy = target.y - (entry.center.y + num("y"));
         }
-        seg("x", num("x") + dx, e);
-        seg("y", num("y") + dy, e);
+        if (command2.blend === "add") {
+          seg("x", dx, e, start, end, { from: 0, blend: "add" });
+          seg("y", dy, e, start, end, { from: 0, blend: "add" });
+        } else {
+          seg("x", num("x") + dx, e);
+          seg("y", num("y") + dy, e);
+        }
         break;
       }
-      case "rotate":
-        seg("rotation", command2.to ?? num("rotation") + (command2.by ?? 0), ease ?? MOTION_EASE_IN_OUT);
+      case "rotate": {
+        const e = ease ?? MOTION_EASE_IN_OUT;
+        if (command2.blend === "add") seg("rotation", command2.to !== void 0 ? command2.to - num("rotation") : command2.by ?? 0, e, start, end, { from: 0, blend: "add" });
+        else seg("rotation", command2.to ?? num("rotation") + (command2.by ?? 0), e);
         break;
+      }
       case "scale": {
         const to = typeof command2.to === "number" ? { x: command2.to, y: command2.to } : command2.to;
-        const geometric = command2.geometric ? { geometric: true } : {};
-        seg("scaleX", to.x, ease ?? MOTION_EASE_IN_OUT, start, end, geometric);
-        seg("scaleY", to.y, ease ?? MOTION_EASE_IN_OUT, start, end, geometric);
+        const extra = { ...command2.geometric ? { geometric: true } : {}, ...command2.blend === "add" ? { from: 1, blend: "add" } : {} };
+        seg("scaleX", to.x, ease ?? MOTION_EASE_IN_OUT, start, end, extra);
+        seg("scaleY", to.y, ease ?? MOTION_EASE_IN_OUT, start, end, extra);
         break;
       }
       case "fade":
@@ -866,30 +890,31 @@ function compileMotionScene(scene) {
         seg("follow", command2.to ?? 1, ease ?? MOTION_EASE_IN_OUT, start, end, { from: command2.from ?? 0, path: command2.path, rotate: command2.rotate ?? false });
         break;
       // Emphasis: a change toward a peak that a behaviour swings round (as Flair's primitives do).
-      case "pulse": {
-        const behavior = { type: "pulse", count: command2.count ?? 1 };
-        const k = 1 + (command2.amount ?? 0.15);
-        seg("scaleX", num("scaleX") * k, ease ?? "linear", start, end, { behavior });
-        seg("scaleY", num("scaleY") * k, ease ?? "linear", start, end, { behavior });
-        break;
-      }
-      case "shake": {
-        const p = command2.axis === "vertical" ? "y" : "x";
-        seg(p, num(p) + (command2.amount ?? 8), ease ?? "linear", start, end, { behavior: { type: "oscillate", count: command2.count ?? 3, decay: 1 } });
-        break;
-      }
+      case "pulse":
+      case "shake":
       case "teeter":
-        seg("rotation", num("rotation") + (command2.angle ?? 8), ease ?? "linear", start, end, { behavior: { type: "oscillate", count: command2.count ?? 3, decay: 1 } });
-        break;
       case "wave":
-        seg("y", num("y") - (command2.amount ?? 6), ease ?? "linear", start, end, { behavior: { type: "oscillate", count: command2.count ?? 2 } });
-        break;
       case "wiggle": {
-        const behavior = { type: "wriggle", frequency: command2.frequency ?? 3, octaves: command2.octaves ?? 2, seed: command2.seed || motionSeedFromId(node) };
-        const amount = command2.amount ?? 6;
-        seg("x", num("x") + amount, ease ?? "linear", start, end, { behavior, index: 0 });
-        seg("y", num("y") + amount, ease ?? "linear", start, end, { behavior, index: 1 });
-        if (command2.rotate) seg("rotation", num("rotation") + command2.rotate, ease ?? "linear", start, end, { behavior, index: 2 });
+        const add = (command2.blend ?? "add") === "add";
+        const swing = (p, by, extra) => {
+          const scale = p === "scaleX" || p === "scaleY";
+          if (add) seg(p, by, ease ?? "linear", start, end, { from: scale ? 1 : 0, blend: "add", ...extra });
+          else seg(p, scale ? num(p) * by : num(p) + by, ease ?? "linear", start, end, extra);
+        };
+        if (command2.type === "pulse") {
+          const behavior = { type: "pulse", count: command2.count ?? 1 };
+          swing("scaleX", 1 + (command2.amount ?? 0.15), { behavior });
+          swing("scaleY", 1 + (command2.amount ?? 0.15), { behavior });
+        } else if (command2.type === "shake") swing(command2.axis === "vertical" ? "y" : "x", command2.amount ?? 8, { behavior: { type: "oscillate", count: command2.count ?? 3, decay: 1 } });
+        else if (command2.type === "teeter") swing("rotation", command2.angle ?? 8, { behavior: { type: "oscillate", count: command2.count ?? 3, decay: 1 } });
+        else if (command2.type === "wave") swing("y", -(command2.amount ?? 6), { behavior: { type: "oscillate", count: command2.count ?? 2 } });
+        else {
+          const behavior = { type: "wriggle", frequency: command2.frequency ?? 3, octaves: command2.octaves ?? 2, seed: command2.seed || motionSeedFromId(node) };
+          const amount = command2.amount ?? 6;
+          swing("x", amount, { behavior, index: 0 });
+          swing("y", amount, { behavior, index: 1 });
+          if (command2.rotate) swing("rotation", command2.rotate, { behavior, index: 2 });
+        }
         break;
       }
       case "color-pulse":
@@ -1001,9 +1026,9 @@ function followAt(entry, timeline, nodes, time) {
 function motionNodeOffset(entry, timeline, time, nodes = indexMotionNodes([entry.node]), raw = false, follow = true) {
   const read = (p, rest) => {
     const v = trackValue(timeline.tracks.get(motionTrackKey(entry.node.id, p)), time, raw);
-    return typeof v === "number" ? v : rest;
+    return withMotionLayers(timeline, entry.node.id, p, typeof v === "number" ? v : rest, time, raw);
   };
-  if (!TRANSFORM_PROPS.some((p) => (follow || p !== "follow") && timeline.tracks.has(motionTrackKey(entry.node.id, p)))) return null;
+  if (!TRANSFORM_PROPS.some((p) => (follow || p !== "follow") && (timeline.tracks.has(motionTrackKey(entry.node.id, p)) || timeline.tracks.has(motionAddTrackKey(entry.node.id, p))))) return null;
   const dx = read("x", 0);
   const dy = read("y", 0);
   const rotation = read("rotation", 0);
@@ -1261,6 +1286,7 @@ function checkMotionScene(scene) {
     });
   });
   for (const [key, track] of timeline.tracks) {
+    if (key.endsWith("\0add")) continue;
     for (let i = 1; i < track.length; i++) {
       const a = track[i - 1];
       const b = track[i];
@@ -1610,7 +1636,7 @@ function toFlairSvgMotion(scene, options = {}) {
     if (timeline.tracks.has(motionTrackKey(id, "opacity")))
       channels.push({ id, kind: "attr", attr: "opacity", segments: [...track(id, "opacity")], exact: plays, value: (t) => round2(Math.min(1, Math.max(0, Number(trackValue(track(id, "opacity"), t))))) });
     const followed = follows.some((x) => x.id === id);
-    const transformSegments = TRANSFORM_PROPS2.flatMap((p) => followed && p === "follow" ? [] : track(id, p));
+    const transformSegments = TRANSFORM_PROPS2.flatMap((p) => followed && p === "follow" ? [] : [...track(id, p), ...timeline.tracks.get(motionAddTrackKey(id, p)) ?? []]);
     if (transformSegments.length) {
       const base = node.transform ? ` matrix(${node.transform.map(f).join(" ")})` : "";
       const c = entry.center;
@@ -2269,6 +2295,11 @@ var BASE = {
   repeatMode: { type: "string", enum: [...MOTION_REPEAT_MODES], description: "loop (default) restarts each cycle, mirror plays every other one backwards, offset carries on from where the last ended (rotate by 90 with repeat 4 makes a full turn)." },
   steps: { type: "number", exclusiveMinimum: 0, maximum: 120, description: `Stepped time: hold on a grid of this many frames per second (12 = "on twos"). Default: the scene's steps, else smooth.` }
 };
+var BLEND = (fallback) => ({
+  type: "string",
+  enum: [...MOTION_BLENDS],
+  description: `"add" makes it a layer over the pose that stacks with other changes (a shake on a slide); "replace" makes it a change the next one takes over from (default ${fallback}).`
+});
 var command = (type, description, extra = {}, required = []) => object({ type: { const: type, description }, ...BASE, ...extra }, ["type", "targets", ...required], description);
 var MOTION_COMMAND_SCHEMA = {
   description: `A command (one of ${MOTION_COMMAND_TYPES.join(", ")}). Commands in a shot play one after another unless "with": "previous".`,
@@ -2291,9 +2322,9 @@ var MOTION_COMMAND_SCHEMA = {
       distance: { type: "number", description: "For slide: document units (default 40)." }
     }),
     command("draw", "Draws strokes on (or off) to a fraction of their length.", { to: FRACTION("Fraction drawn at the end (default 1)."), from: FRACTION("Fraction drawn at the start (default: what is drawn now).") }),
-    command("move", "Moves targets by an offset or so their centre lands on a point.", { by: POINT("Offset in document units."), to: POINT("Point (document coordinates) for the centre.") }),
-    command("rotate", "Turns targets about their centre (degrees, clockwise).", { by: { type: "number", description: "Degrees to turn by." }, to: { type: "number", description: "Angle to turn to, in degrees from rest." } }),
-    command("scale", "Scales targets about their centre (1 = rest size).", { to: { description: "A factor, or { x, y } factors.", anyOf: [{ type: "number" }, POINT("Factors per axis.")] }, geometric: { type: "boolean", description: "Grow by a steady factor, which reads as an even zoom (default false)." } }, ["to"]),
+    command("move", "Moves targets by an offset or so their centre lands on a point.", { blend: BLEND("replace"), by: POINT("Offset in document units."), to: POINT("Point (document coordinates) for the centre.") }),
+    command("rotate", "Turns targets about their centre (degrees, clockwise).", { blend: BLEND("replace"), by: { type: "number", description: "Degrees to turn by." }, to: { type: "number", description: "Angle to turn to, in degrees from rest." } }),
+    command("scale", "Scales targets about their centre (1 = rest size).", { blend: BLEND("replace"), to: { description: "A factor, or { x, y } factors.", anyOf: [{ type: "number" }, POINT("Factors per axis.")] }, geometric: { type: "boolean", description: "Grow by a steady factor, which reads as an even zoom (default false)." } }, ["to"]),
     command("fade", "Changes opacity.", { to: FRACTION("Opacity at the end (0\u20131).") }, ["to"]),
     command("style", "Blends solid fill / stroke colours (in OKLab) and stroke width. On a group it changes every path in it.", {
       fill: { type: "string", description: "CSS colour (hex, rgb(), rgba())." },
@@ -2307,15 +2338,17 @@ var MOTION_COMMAND_SCHEMA = {
       from: FRACTION("Where to start along the path (default 0)."),
       to: FRACTION("Where to end along the path (default 1).")
     }, ["path"]),
-    command("pulse", "Scales up and back to draw the eye.", { amount: { type: "number", description: "Extra scale at the peak (default 0.15)." }, count: { type: "integer", minimum: 1, description: "Pulses (default 1)." } }),
+    command("pulse", "Scales up and back to draw the eye.", { blend: BLEND("add"), amount: { type: "number", description: "Extra scale at the peak (default 0.15)." }, count: { type: "integer", minimum: 1, description: "Pulses (default 1)." } }),
     command("shake", "Shakes side to side (or up and down), settling.", {
+      blend: BLEND("add"),
       amount: { type: "number", description: "Document units (default 8)." },
       count: { type: "integer", minimum: 1, description: "Shakes (default 3)." },
       axis: { type: "string", enum: ["horizontal", "vertical"], description: "Default horizontal." }
     }),
-    command("teeter", "Rocks about the centre either way, settling.", { angle: { type: "number", description: "Degrees either way (default 8)." }, count: { type: "integer", minimum: 1, description: "Rocks (default 3)." } }),
-    command("wave", "Bobs up and down without settling, like something floating (default 1000 ms).", { amount: { type: "number", description: "Height in document units (default 6)." }, count: { type: "integer", minimum: 1, description: "Bobs (default 2)." } }),
+    command("teeter", "Rocks about the centre either way, settling.", { blend: BLEND("add"), angle: { type: "number", description: "Degrees either way (default 8)." }, count: { type: "integer", minimum: 1, description: "Rocks (default 3)." } }),
+    command("wave", "Bobs up and down without settling, like something floating (default 1000 ms).", { blend: BLEND("add"), amount: { type: "number", description: "Height in document units (default 6)." }, count: { type: "integer", minimum: 1, description: "Bobs (default 2)." } }),
     command("wiggle", "Wanders about its place as smooth seeded noise, easing out of and back to rest (default 1500 ms). The same seed always wanders the same way.", {
+      blend: BLEND("add"),
       amount: { type: "number", description: "Up to about this far, in document units (default 6)." },
       frequency: { type: "number", exclusiveMinimum: 0, description: "Wanders per second, in Hz (default 3)." },
       octaves: { type: "integer", minimum: 1, maximum: 8, description: "Layers of finer detail (default 2)." },
@@ -2821,6 +2854,7 @@ Commands
 - enter also has zoom (settles from larger) and rise (rises a short way, overshooting a touch); pop and zoom take a starting "scale".
 - morph turns a shape into another node's shape (keep the target hidden); follow moves along a path node (with "rotate", moves made meanwhile turn with the path).
 - Emphasis draws the eye and returns to rest: pulse (swell), shake (side to side, or "axis": "vertical"), teeter (rock), wave (bob, no settling), wiggle (seeded wander; the same seed wanders the same way) and color-pulse (tint and back).
+- Emphasis stacks on other motion: a shake during a slide shakes as it slides. Give move, rotate or scale "blend": "add" to stack them too (what they add stays); "blend": "replace" makes a change take over instead.
 - Any command but enter and exit can "repeat" (loop, mirror back and forth, or offset to carry on: rotate by 90, repeat 4 is a full turn); "duration" is one cycle.
 - Springs ("spring-gentle", "spring-quick", "spring-bouncy", "spring-slow" or { "type": "spring", \u2026 }) feel physical; leave "duration" out and the spring sets it.
 - "steps": 12 (on a command, or for the whole scene with set_animation_settings) holds poses "on twos" for a hand-drawn look. "geometric": true on scale or a camera zooms at an even rate.
@@ -2839,6 +2873,8 @@ export {
   AnimationEditorController,
   FLAIR_EASES,
   FLAIR_EXPORT_VERSION,
+  MOTION_ADDITIVE_PROPERTIES,
+  MOTION_BLENDS,
   MOTION_CAMERA_MS,
   MOTION_COMMAND_SCHEMA,
   MOTION_COMMAND_TYPES,
@@ -2880,6 +2916,7 @@ export {
   interpolateMotionValue,
   isMotionCommand,
   isMotionShot,
+  motionAddTrackKey,
   motionClipAttrs,
   motionCommandDuration,
   motionCommandRepeat,
@@ -2912,6 +2949,7 @@ export {
   toFlairSvgMotion,
   toFlairVectorEffect,
   trackValue,
+  withMotionLayers,
   withViewBox
 };
 //# sourceMappingURL=index.js.map