@curiousmedia/canvas-animator v1.1.2

CanvasAnimator

Generate AnimateCC spritesheets and display them in a canvas element

• CanvasAnimator
  • Generate Sprite Sheet
  • Usage
  • Event Listener
  • Constructor
  • .framerate Getter
  • .framerate Setter
  • .loop Getter
  • .loop Setter
  • .handleImageLoaded()
  • .drawFrame(dataFrame)
  • .play()
  • .pause()
  • .gotoAndPlay(frame)
  • .render()
  • .on(type, listener, useCapture)
  • .off(type, listener, useCapture)
  • Events

How to generate a Sprite Sheet from Animate CC for use with Canvas Animator:

Right click on the symbol you want to export and choose Generate Sprite Sheet...

Choose from available export options.

Verify Data Format is set to JSON-Array and click Export

Usage:

Load and Parse the JSON-Array data that was exported from AnimateCC

Make a new instance of CanvasAnimator:

let animation = new CanvasAnimator(
    document.querySelector('canvas'),
    jsonData,
    60,
    false
);

Event Listeners

    animation.on('complete', function(event){
        console.log(event.frame);
    });

new CanvasAnimator(element, data, framerate, loop)

Constructor

canvasAnimator.framerate - GETTER

Get the framerate our animation is playing at

canvasAnimator.framerate - SETTER

Set the framerate to play the animation at

canvasAnimator.loop - GETTER

Get the loop property

canvasAnimator.loop - SETTER

Set the loop property to be true or false

canvasAnimator.handleImageLoaded()

Image onload handler called when the image is done loading

canvasAnimator.drawFrame(dataFrame)

Draw the image based on data from the JSON data array

canvasAnimator.play()

Play the animation

canvasAnimator.pause()

Pause the animation

canvasAnimator.gotoAndPlay(frame)

Go to the specific frame number

canvasAnimator.render()

Request Animation Frame

canvasAnimator.on(type, listener, useCapture)

Shortcut to add event listeners for the canvas element

canvasAnimator.off(type, listener, useCapture)

Shortcut to remove event listeners for the canvas element

Events

Start

Called when the image is loaded and the RequestAnimationFrame begins

Change

Called when a new frame in the animation is rendered

Complete

Called when the last frame of the animation has played and the animation is returning to Frame 0 unless loop = false