Playback

A playhead the machines of one animation share, so they play, pause, seek, change speed or run backwards together: make one, drive each machine through it, then pause, play, setSpeed or seek it. It's what createAnimate's playback controls run on.

import * as Machine from "@wardic/core/Machine"
import * as Playback from "@wardic/core/Playback"

const head = Playback.make()
const x = Machine.tween(0, 200, { duration: 1 }).pipe(Playback.drive(head))
Playback.setSpeed(head, 0.5) // slow motion
Playback.pause(head) // held where it is

Interfaces

Playhead

What the machines of one animation read each frame: its time, its speed, and whether it's paused. Each machine driven through it moves time as it steps; pause, play, setSpeed and seek control them all.

Extends

Pipeable
Inspectable

Properties

~@wardic/core/Playback

readonly "~@wardic/core/Playback": "~@wardic/core/Playback";

paused

readonly paused: boolean;

Whether the machines hold where they are.

speed

readonly speed: number;

Each tick's dt is scaled by it: 1 as given, 0 holds, below 0 plays backwards.

time

readonly time: number;

Seconds played, a delay included: each driven machine moves it as it steps. A seek moves it, then the machines start again.

Variables

drive

const drive: {
  (head): <F>(self) => Machine<F>;
  <F>(self, head): Machine<F>;
};

self driven through head:

It starts where head.time is, its first frame landing there, so a machine started after a seek starts at the seek's time.
Each frame's dt is scaled by head.speed, and the machine sets head.time as it goes, so machines started together keep one time.
While head.paused, it holds its last frame, with a velocity of 0.
Below speed 0, it runs backwards, and settles at 0.

It keeps self's span, and whether it settles.

Call Signature

(head): <F>(self) => Machine<F>;

Parameters

head

Playhead

Returns

<F>(self) => Machine<F>

Call Signature

<F>(self, head): Machine<F>;

Type Parameters

F

F extends Frame<unknown>

Parameters

Example

const driven = Machine.spring(1).pipe(Playback.drive(head))

seek

const seek: {
  (time): (head) => void;
  (head, time): void;
};

Moves head to time seconds, 0 at least: the machines driven through it start there when they're next started.

Call Signature

(time): (head) => void;

(head, time): void;

Playback.seek(head, 0.5) // then start the machines again

setSpeed

const setSpeed: {
  (speed): (head) => void;
  (head, speed): void;
};

Scales each tick's dt for the machines driven through head by speed: 1 as given, 0 holds, below 0 plays backwards.

Call Signature

(speed): (head) => void;

(head, speed): void;

Playback.setSpeed(head, 0.5) // slow motion

Functions

isPlayhead()

function isPlayhead(u): u is Playhead;

Whether u is a Playhead.

function make(): Playhead;

A playhead at 0, playing at speed 1.

Returns

Playhead

pause()

function pause(head): void;

Holds the machines driven through head where they are.

function play(head): void;

Plays the machines driven through head on from where they're held.