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