State-owned animation

Move a circle with a machine-owned animation task that completes into the next state.

APIs demonstrated

defineMachine from @pibbl/core/machines
useMachine from @pibbl/core/machines
playAnimation from @pibbl/core/machines/animation
MachineAnimationOptions from @pibbl/core/machines/animation
MachineAnimationProgramFactory from @pibbl/core/machines/animation

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import { pibbl, Circle, signal, drive, tween } from "@pibbl/core";
import { defineMachine, useMachine } from "@pibbl/core/machines";
import {
  playAnimation,
  type MachineAnimationOptions,
  type MachineAnimationProgramFactory,
} from "@pibbl/core/machines/animation";
const x = signal(25);
type Event = { type: "REPLAY" };
const program: MachineAnimationProgramFactory<{}, Event, undefined> = () =>
  drive(x, tween({ from: 25, to: 280, duration: 1000 }));
const options: MachineAnimationOptions = { debugName: "slide" };
const definition = defineMachine<{}, Event>({
  initial: "moving",
  context: {},
  states: {
    moving: {
      invoke: { task: playAnimation(program, options), onDone: "done" },
    },
    done: { on: { REPLAY: "moving" } },
  },
});
function Scene() {
  useMachine(definition, { input: undefined });
  return <Circle style={{ left: x, top: 45, radius: 18, fill: "#087e8b" }} />;
}
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 90;
document.body.append(canvas);
const app = pibbl(canvas, <Scene />);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

Usage notes

Uses public package imports. Browser resources are released on pagehide.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.