AnimationManager API

About 2 min

AnimationManager API

AnimationManager is the animation engine: lifecycle and frame updates. This page also covers animation utilities.

AnimationManager

Access via mapcadLayer.animationManager.

add(id, callback, options?)

Parameter	Type	Description
id	`string`	Unique id
callback	`AnimationCallback`	`(deltaTime: number) => void`, called each frame
options	`AnimationItemOptions`	Optional `{ maxFps?: number }`, default 30

mapcadLayer.animationManager.add('rotate', (dt) => {
  angle += dt * 0.001;
  entity.rotation = angle * 180 / Math.PI;
  entity.styleChanged();
}, { maxFps: 60 });

remove(id)

Remove one animation.

removeAll()

Remove all animations.

pause(id) / resume(id)

Pause or resume an animation.

Types

type AnimationCallback = (deltaTime: number) => void;
interface AnimationItemOptions { maxFps?: number; }

Easing functions

Easing exposes many easing functions, each (t: number) => number with t in [0, 1].

Available functions

Category	Functions
Linear	`easeLinear`
Quadratic	`easeInQuad`, `easeOutQuad`, `easeInOutQuad`
Cubic	`easeInCubic`, `easeOutCubic`, `easeInOutCubic`
Quartic	`easeInQuart`, `easeOutQuart`, `easeInOutQuart`
Sine	`easeInSine`, `easeOutSine`, `easeInOutSine`
Exponential	`easeInExpo`, `easeOutExpo`, `easeInOutExpo`
Circular	`easeInCirc`, `easeOutCirc`, `easeInOutCirc`
Back	`easeInBack`, `easeOutBack`, `easeInOutBack`
Bounce	`easeInBounce`, `easeOutBounce`, `easeInOutBounce`
Elastic	`easeInElastic`, `easeOutElastic`, `easeInOutElastic`

const { Easing, easeOutBounce } = vjmapext;
const value = easeOutBounce(0.5); // 0~1

createTween(options)

Tween between two numbers over time.

TweenOptions

Property	Type	Description
from	`number`	Start
to	`number`	End
duration	`number`	Duration in ms
easing	`EasingFunction`	Optional easing
onUpdate	`(value: number) => void`	Per-frame callback
onComplete	`() => void`	Optional completion

Returns: { stop(): void } to stop early.

const { createTween, easeOutCubic } = vjmapext;
const tween = createTween({
  from: 0, to: 100,
  duration: 2000,
  easing: easeOutCubic,
  onUpdate(val) { circle.radius = val; circle.changed(); },
  onComplete() { console.log('done'); }
});

PathAnimator

Moves an entity along a polyline.

Constructor

new PathAnimator(options: PathAnimatorOptions)

PathAnimatorOptions

Property	Type	Description
entity	`EntityBase`	Entity to move
path	`Point2D[]`	Path vertices
duration	`number`	Duration in ms
loop	`boolean`	Optional loop
easing	`EasingFunction`	Optional easing
onUpdate	`(progress: number) => void`	Optional progress callback
onComplete	`() => void`	Optional completion

Methods

Method	Description
`start(animManager)`	Start; pass `AnimationManager`
`stop()`	Stop
`pause()`	Pause
`resume()`	Resume

TrailEffect

Motion trail effect.

TrailEffectOptions

Property	Type	Description
entity	`EntityBase`	Target
maxPoints	`number`	Optional max trail points
fadeColor	`number`	Optional fade color
trailWidth	`number`	Optional trail width

SpringAnimator

Spring physics animation.

SpringOptions

Property	Type	Description
stiffness	`number`	Optional stiffness
damping	`number`	Optional damping
mass	`number`	Optional mass
onUpdate	`(value: number) => void`	Per-frame callback
onComplete	`() => void`	Optional completion

KeyframeAnimator

Keyframe sequence animation.

Types

interface Keyframe {
  time: number;    // normalized 0~1
  value: number;
  easing?: EasingFunction;
}

interface KeyframeOptions {
  keyframes: Keyframe[];
  duration: number;  // ms
  loop?: boolean;
  onUpdate(value: number): void;
}

LineReveal

Progressive line drawing.

LineRevealOptions

Property	Type	Description
entity	`EntityBase`	Line or polyline
duration	`number`	Duration in ms
easing	`EasingFunction`	Optional easing

BlinkEffect

Blink / alarm effect.

BlinkEffectOptions

Property	Type	Description
entity	`EntityBase`	Target
onColor	`number`	Bright color (hex)
offColor	`number`	Dim color (hex)
interval	`number`	Blink interval in ms
mode	`BlinkMode`	Optional `'toggle'` or `'breath'`

Color interpolation

lerpColor(color1, color2, t)

Interpolate between two colors.

Parameter	Type	Description
color1	`number`	Start (e.g. `0xff0000`)
color2	`number`	End
t	`number`	Factor `[0, 1]`
Returns	`number`	Result color

lerpColorHex(hex1, hex2, t)

Same as lerpColor but '#rrggbb' strings.