# @curiousmedia/canvas-animator

> Generate AnimateCC spritesheets and display them in a canvas element

Latest version **1.1.2** (published 2019-05-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @curiousmedia/canvas-animator
pnpm add @curiousmedia/canvas-animator
yarn add @curiousmedia/canvas-animator
bun add @curiousmedia/canvas-animator
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2019-05-17 |
| First published | 2019-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 976.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shane Coates |
| Maintainers | cm-gregory, curiousjason, eaglstun, ishoa, kyfoote |

## Links

- npm: https://www.npmjs.com/package/@curiousmedia/canvas-animator
- npm.io page: https://npm.io/package/@curiousmedia/canvas-animator

## Recent versions

- 1.1.2 (latest) — 2019-05-17
- 1.1.1 — 2019-05-17
- 1.1.0 — 2019-05-17
- 1.0.1 — 2019-05-16
- 1.0.0 — 2019-05-16

## README

<a name="CanvasAnimator"></a>

## CanvasAnimator
Generate AnimateCC spritesheets and display them in a canvas element

* [CanvasAnimator](#CanvasAnimator)
    * [Generate Sprite Sheet](#generate)
    * [Usage](#usage)
    * [Event Listener](#event-listener)
    * [Constructor](#constructor)
    * [.framerate Getter](#framerate-getter)
    * [.framerate Setter](#framerate-setter)
    * [.loop Getter](#loop-getter)
    * [.loop Setter](#loop-setter)
    * [.handleImageLoaded()](#handle-image-loaded)
    * [.drawFrame(dataFrame)](#draw-frame)
    * [.play()](#play)
    * [.pause()](#pause)
    * [.gotoAndPlay(frame)](#gotoAndPlay)
    * [.render()](#render)
    * [.on(type, listener, useCapture)](#on-listener)
    * [.off(type, listener, useCapture)](#off-listener)
    * [Events](#events)

<a name="generate"></a>

## 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**

<a name="usage"></a>

## 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
);
```

<a name="event-listener"></a>

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

<a name="constructor"></a>

### new CanvasAnimator(element, data, framerate, loop)

Constructor

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

<a name="framerate-getter"></a>

### canvasAnimator.framerate - GETTER

Get the framerate our animation is playing at

<a name="framerate-setter"></a>

### canvasAnimator.framerate - SETTER

Set the framerate to play the animation at

| Param | Type | Description |
| --- | --- | --- |
| rate | <code>Number</code> | FPS for the animation to run at |

<a name="loop-getter"></a>

### canvasAnimator.loop - GETTER

Get the loop property

<a name="loop-setter"></a>

### canvasAnimator.loop - SETTER

Set the loop property to be true or false

| Param | Type |
| --- | --- |
| bool | <code>Bool</code> | 

<a name="handle-image-loaded"></a>

### canvasAnimator.handleImageLoaded()

Image onload handler called when the image is done loading

<a name="draw-frame"></a>

### canvasAnimator.drawFrame(dataFrame)

Draw the image based on data from the JSON data array

| Param | Type |
| --- | --- |
| dataFrame | <code>Object</code> | 

<a name="play"></a>

### canvasAnimator.play()

Play the animation

<a name="pause"></a>

### canvasAnimator.pause()

Pause the animation

<a name="gotoAndPlay"></a>

### canvasAnimator.gotoAndPlay(frame)

Go to the specific frame number

| Param | Type | Description |
| --- | --- | --- |
| frame | <code>Number</code> | frame number to go to |

<a name="render"></a>

### canvasAnimator.render()

Request Animation Frame

<a name="on-listener"></a>

### canvasAnimator.on(type, listener, useCapture)

Shortcut to add event listeners for the canvas element

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

<a name="off-listener"></a>

### canvasAnimator.off(type, listener, useCapture)

Shortcut to remove event listeners for the canvas element

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

<a name="events"></a>

### 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`

---
_Source: https://npm.io/package/@curiousmedia/canvas-animator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._