Class CanvasAnimation

A helper class providing utility methods for PIXI Canvas animation

Properties

animations

Accessors

STATES ticker

Methods

animate getAnimation terminateAnimation easeInOutCosine easeOutCircle easeInCircle #animateFrame #updateAttribute

Properties

Static animations

animations: Record<string, CanvasAnimationData> = {}

Track an object of active animations by name, context, and function This allows a currently playing animation to be referenced and terminated

Accessors

Static STATES

  • get STATES(): Readonly<{
        FAILED: -2;
        TERMINATED: -1;
        WAITING: 0;
        RUNNING: 1;
        COMPLETED: 2;
    }>

  • The possible states of an animation.

    Returns Readonly<{
        FAILED: -2;
        TERMINATED: -1;
        WAITING: 0;
        RUNNING: 1;
        COMPLETED: 2;
    }>

Static ticker

  • get ticker(): Ticker

  • The ticker used for animations.

    Returns Ticker

Methods

Static animate

  • animate(attributes, options?): Promise<boolean>

  • Apply an animation from the current value of some attribute to a new value Resolve a Promise once the animation has concluded and the attributes have reached their new target

    Parameters

    Returns Promise<boolean>

    A Promise which resolves to true once the animation has concluded or false if the animation was prematurely terminated

    Example: Animate Token Position

    let animation = [
      {
        parent: token,
        attribute: "x",
        to: 1000
      },
      {
        parent: token,
        attribute: "y",
        to: 2000
      }
    ];
    CanvasAnimation.animate(attributes, {duration:500});

Static getAnimation

  • getAnimation(name): CanvasAnimationData

  • Retrieve an animation currently in progress by its name

    Parameters

    • name: string

      The animation name to retrieve

    Returns CanvasAnimationData

    The animation data, or undefined

Static terminateAnimation

  • terminateAnimation(name): void

  • If an animation using a certain name already exists, terminate it

    Parameters

    • name: string

      The animation name to terminate

    Returns void

Static easeInOutCosine

  • easeInOutCosine(pt): number

  • Cosine based easing with smooth in-out.

    Parameters

    • pt: number

      The proportional animation timing on [0,1]

    Returns number

    The eased animation progress on [0,1]

Static easeOutCircle

  • easeOutCircle(pt): number

  • Shallow ease out.

    Parameters

    • pt: number

      The proportional animation timing on [0,1]

    Returns number

    The eased animation progress on [0,1]

Static easeInCircle

  • easeInCircle(pt): number

  • Shallow ease in.

    Parameters

    • pt: number

      The proportional animation timing on [0,1]

    Returns number

    The eased animation progress on [0,1]

Static Private #animateFrame

  • #animateFrame(deltaTime, animation): void

  • Generic ticker function to implement the animation. This animation wrapper executes once per frame for the duration of the animation event. Once the animated attributes have converged to their targets, it resolves the original Promise. The user-provided ontick function runs each frame update to apply additional behaviors.

    Parameters

    • deltaTime: number

      The incremental time which has elapsed

    • animation: CanvasAnimationData

      The animation which is being performed

    Returns void

Static Private #updateAttribute

  • #updateAttribute(attribute, percentage): void

  • Update a single attribute according to its animation completion percentage

    Parameters

    Returns void

Settings

Member Visibility

Theme

On This Page

animationsSTATEStickeranimategetAnimationterminateAnimationeaseInOutCosineeaseOutCircleeaseInCircle#animateFrame#updateAttribute