canvas-animations

Canvas-Animations does one single thing; it turns a spritesheet into an animation. Meanwhile, it offers controls like fps, animationIteraionCount, play, stop, destroy to suit your particular needs, together with an optional onAnimationEnd handler.

🍾 Features

1. Light as a feather, zero dependency.
2. JS framework free, can be used with any JS framework.
3. Support 3 forms of spritesheet: spritesheet with multiple rows, spritesheet with single row, spritesheet with single column.
4. Configurable animation speed, animation iteration count, autoplay mode.
5. The canvas element generated would be automatically scale to match the dimension of container element you have set.

🔦 How to use?

Step 1: Installation

Using npm:

  npm install canvas-animations

Using yarn:

  yarn add canvas-animations

Step 2: Import helper setCanvasAnimation and pass down your config

import setCanvasAnimation from 'canvas-animations';

const config = {
  // config whatever you need
};
const anims = setCanvasAnimation(config);

⁉️ What can go in the config above 🧩?

| Property Name | Type | required | default | description | | --------------------------- | -------- | -------- | ------- | ------------------------------------------------------------------------- | | container | Object | Yes | - | the html element that the generated canvas animation would be appended to | | autoPlay | Boolean | No | true | whether to autoplay animation or not | | spriteSheet | String | Yes | - | the image url of your spritesheet | | totalFrameCounts | Number | Yes | - | the total frames of your spritesheet | | animationIterationCount | Number, string | No | 1 | iteration count for your spritesheet, 'infinite' for infinite loop | | width | Number | Yes | - | the width of each frame in your spritesheet | | height | Number | Yes | - | the height of each frame in your spritesheet | | fps | Number | No | 30 | the fps for your animation, valid range between 0 and 60 | | onAnimationEnd | Function | No | null | onAnimationEnd handler for your animation |

Step 3: Control your animation

anims.play(); // start to play your anims
anims.stop(); // stop your anims from playing
anims.destroy(); // destroy your animsonAnimationEnd

🍻 You're all set! Have fun animating 🍻