Generate AnimateCC spritesheets and display them in a canvas element
npm install @curiousmedia/canvas-animator* 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
Choose from available export options.
Verify Data Format is set to JSON-Array and click Export
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
);
animation.on('complete', function(event){
console.log(event.frame);
});
$3
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 |
$3
Get the framerate our animation is playing at
$3
Set the framerate to play the animation at
| Param | Type | Description |
| --- | --- | --- |
| rate | Number | FPS for the animation to run at |
$3
Get the loop property
$3
Set the loop property to be true or false
| Param | Type |
| --- | --- |
| bool | Bool |
$3
Image onload handler called when the image is done loading
$3
Draw the image based on data from the JSON data array
| Param | Type |
| --- | --- |
| dataFrame | Object |
$3
Play the animation
$3
Pause the animation
$3
Go to the specific frame number
| Param | Type | Description |
| --- | --- | --- |
| frame | Number | frame number to go to |
$3
Request Animation Frame
$3
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. |
$3
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. |
$3
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