@curiousmedia/canvas-animator

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

Param	Type	Default	Description
element	Canvas		Required: The canvas element to display the animation on
data	Object		Required: The JSON Array data from Animate CC
framerate	Number	24	Optional: Framerate to run the animation at Default: 24
loop	Bool	true	Optional: Does the animation loop or play once and stop Default: true

canvasAnimator.framerate - GETTER

Get the framerate our animation is playing at

canvasAnimator.framerate - SETTER

Set the framerate to play the animation at

Param	Type	Description
rate	Number	FPS for the animation to run at

canvasAnimator.loop - GETTER

Get the loop property

canvasAnimator.loop - SETTER

Set the loop property to be true or false

Param	Type
bool	Bool

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

Param	Type
dataFrame	Object

canvasAnimator.play()

Play the animation

canvasAnimator.pause()

Pause the animation

canvasAnimator.gotoAndPlay(frame)

Go to the specific frame number

Param	Type	Description
frame	Number	frame number to go to

canvasAnimator.render()

Request Animation Frame

canvasAnimator.on(type, listener, useCapture)

Shortcut to add event listeners for the canvas element

Param	Type	Default	Description
type	String		Required. A String that specifies the name of the event.
listener	function		Required. Specifies the function to run when the event occurs.
useCapture	Bool	false	Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

canvasAnimator.off(type, listener, useCapture)

Shortcut to remove event listeners for the canvas element

Param	Type	Default	Description
type	String		Required. A String that specifies the name of the event.
listener	function		Required. Specifies the function to run when the event occurs.
useCapture	Bool	false	Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

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