EnvironmentAnimationRuntime

The animation engine behind one canvas environment: presence, keyframe tracks and step dispatch.

@internote/canvas-sdkClass
On this page
import { EnvironmentAnimationRuntime } from '@internote/canvas-sdk';

Every cue construct lives inside the environment it animates and acts only within it; two environments synchronise only by anchoring to the same step indices, so a runtime never sees beyond its own node. The host builds one per mounted environment and exposes it as ctx.animation. Headless by construction: no React, no DOM.

Reading attributes at this moment on the timeline:

  • attrValues() resolves the environment node's own attributes, and attrValue(name) one of them.
  • attrValuesOf(node) resolves any node's attributes, memoised per node per moment, so a surface may call it for every mark on every render.
  • attrTransition(node, name) gives a keyframed attribute's current move, from, to and eased progress, for a surface whose in-betweens are richer than the interpolators, or null for an attribute with no track.

Presence:

  • visibleChildren() lists the environment's body elements present right now, cue-wrapped children per their anchors.
  • nodeVisible(node) answers for any node carrying in: or out: anchors, and cueVisible(cue) for a cue node.
  • presenceAnimates(node) says whether a node's arrival or departure is happening now and should animate, or is over and should render finished.

Time:

  • anchorWindow(anchor, durationMs) gives progress through a window that opened at an anchor: whether it has fired, and 0 to 1 across the duration.
  • pendingTimeWork() says whether anything still moves with the clock alone, which a render host uses to keep its frame loop alive.
  • anchorLive(anchor, ms) says whether an anchor fired on the live step within the last ms, and firedFrames(track) lists a track's fired keyframes in the order they take effect.
  • paused() says whether the scene clock is frozen.

Moments, which is how an environment moves without a clock of its own:

  • at(sceneMs) reads the environment as it stood at another moment.
  • liveWindow() gives the live step's latest change, or null when nothing is live — only a step entered forwards is.
  • glideWindow(ms) gives an eased glide across ms from that change. useGlide in the React layer builds on it.

dispose() detaches the runtime from the step controller.

#Signature

typeof EnvironmentAnimationRuntime

#Example

const attrs = ctx.animation.attrValuesOf(mark);
const radius = numberAttr(attrs, 'radius', 4);
const shown = ctx.animation.visibleChildren().filter((node) => node.identifier === 'point');

Declared in packages/canvas-sdk/src/animation/EnvironmentAnimationRuntime.ts:173.

Last updated