gfx/animate

The animation framework.

import * as animate from "./gfx/animate";
animate.after(ms)

A helper function to resolve a Promise after a specified delay.

Arguments:
  • ms (number) – The delay in milliseconds.
Returns:

Promise –
animate.tween(target, properties, options)

Add a tween to the default clock (and start the clock if applicable).

Arguments:
  • target (Object) – The object whose properties to tween.
  • properties (Object) – A (nested) dictionary of property values to tween to.
  • options (Object) – Other options for the tween. See tween().
animate.infinite(updater, options)

Add an infinite tween to the default clock.

Arguments:
  • updater (function) – The update function. See InfiniteTween().
  • options (Object) –
animate.addUpdateListener(f)

Add a callback that is fired every animation tick.

Useful to trigger a re-render whenever an animation updates.

Arguments:
  • f (function) – The function to be called.
class animate.Easing()

A set of easing functions.

Examples:

animate.tween(view, { pos: { x: 0 } }, {
    duration: 500,
    easing: animate.Easing.Linear,
});
class animate.Easing.Quadratic()

Quadratic tweens.

animate.Easing.Quadratic.In()

An ease-in tween.

class animate.Easing.Cubic()

Cubic tweens.

class animate.Easing.Exponential()

Exponential tweens.

animate.Easing.Color(easing, src, dst)

Interpolate between colors in the CIELAB color space (so it looks more natural than directly tweening RGB values).

Right now this easing is not automatically applied. To tween a color, pass the final color as the target value and additionally specify the source and target colors to this easing function, passing the return value as the easing option.

Arguments:
  • easing (function) – The underlying easing function to use.
  • src (String) – The start color.
  • dst (String) – The final color.
Returns:

function – The easing function.

Examples:

// Use linear interpolation underneath
animate.tween(view, { color: "#000" }, {
    duration: 500,
    easing: animate.Easing.Color(animate.Easing.Linear, view.color, "#000"),
});

// Use cubic interpolation underneath
animate.tween(view, { color: "#000" }, {
    duration: 500,
    easing: animate.Easing.Color(animate.Easing.Cubic.In, view.color, "#000"),
});

More explanation written in reST.

animate.Easing.Projectile()

Parabolic projectile trajectory tween. Used similarly to Color().

class animate.Clock()

An animation loop and tween manager.

animate.Clock.addTween(tween)

Directly add a tween to this clock.

Starts the clock if paused.

Arguments:
animate.Clock.cancelAll()

Cancel all tweens on this clock and stop the clock.

animate.Clock.scale

A global scale factor applied to tween durations. This is dynamic, i.e. instead of statically changing the durations of new tweens, this value is multiplied by the delta time used to update tweens. Thus, changing this affects animations in progress. However, it will not dynamically affect animate.after(), which does scale its duration according to this, but does not readjust its duration afterwards.

animate.Clock.start()

Start the clock, if paused.

animate.Clock.tick(t)

Update all tweens by the given delta time. If any tweens are still running, automatically requests a new animation frame, otherwise pauses the clock. This helps save CPU cycles and battery power when no animations are running.

animate.Clock.tween(target, properties, options)

Add a InterpolateTween() tween to this clock.

Arguments:
  • target (Object) – The object whose properties should be tweened.
  • properties (Object) – A dictionary of property values to be tweened. The RHS should be the final value of the property. It can also be a list, where in order, the list (optionally) contains the start value, the final value, and an easing function to use for just that property. Properties can be nested, e.g. passing { pos: { x: 0 }} will tween target.pos.x to 0.
  • options (Object) – Various options for the tween. Any options not described here are passed to the tween constructor—see animate.InterpolateTween().
  • options.duration (number) – The duration of the tween.
  • options.easing (function) – The default easing function to use.
  • options.restTime (number) – If given, an amount of time to wait before decrementing the animating counter on target. Some views use this counter to avoid performing layout on children that are being animated, so that the animation is not overridden by the view.
  • options.setAnimatingFlag (boolean) – Don’t set the animating counter.
Returns:

animate.InterpolateTween – The tween object.
class animate.Tween()

The base class for a tween.

animate.Tween.completed()

Force this tween to mark itself as completed.

animate.Tween.delay(ms)

Pause this tween and resume execution after a specified delay.

Arguments:
  • ms (number) –
Returns:

The tween itself.
animate.Tween.promise

The underlying Promise object of this tween, which is resolved when the tween finishes.

animate.Tween.then(cb1, cb2)

A convenience function to register a callback for when the tween finishes.

Returns:Promise –
class animate.InterpolateTween()

A tween that interpolates from a start value to an end value.

animate.InterpolateTween.undo(animated)

Resets properties affected back to their initial value.

class animate.InfiniteTween(clock, updater)

A tween that continues running until explicitly stopped.

Arguments:
  • clock –
  • updater (function) – A function that is called on every tick with the delta-time value. It can return true to stop running.
animate.InfiniteTween.stop()

Stop running this infinite tween.

animate.clock

The default clock.

Examples:

// clock example

Built-in Effects

This module ships with a number of handy effects, accessible through animate.fx.

fx.splosion(stage, pos, options)

An explosion effect.