Options
All
  • Public
  • Public/Protected
  • All
Menu

A helper class providing utility methods for PIXI Canvas animation

Hierarchy

  • CanvasAnimation

Index

Constructors

Accessors

  • get ticker(): any
  • Returns any

Properties

animations: Object = {}

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

Methods

  • 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

    example

    Animate Token Position

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

    Parameters

    Returns Promise<any>

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

  • Retrieve an animation currently in progress by its name

    Parameters

    • name: string

      The animation name to retrieve

    Returns CanvasAnimationOptions

    The animation data, or undefined

  • terminateAnimation(name: string): void
  • If an animation using a certain name already exists, terminate it

    Parameters

    • name: string

      The animation name to terminate

    Returns void

  • easeInOutCosine(pt: number): 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]

  • easeOutCircle(pt: number): number
  • Shallow ease out.

    Parameters

    • pt: number

      The proportional animation timing on [0,1]

    Returns number

    The eased animation progress on [0,1]

  • easeInCircle(pt: number): number
  • Shallow ease in.

    Parameters

    • pt: number

      The proportional animation timing on [0,1]

    Returns number

    The eased animation progress on [0,1]

  • 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: CanvasAnimationOptions

      The animation which is being performed

    Returns void