0.3.1 ā¢ Published 4 years ago
canvas-animations v0.3.1
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
- Light as a feather, zero dependency.
- JS framework free, can be used with any JS framework.
- Support 3 forms of spritesheet: spritesheet with multiple rows, spritesheet with single row, spritesheet with single column.
- Configurable animation speed, animation iteration count, autoplay mode.
- The canvas element generated would be automatically scale to match the dimension of
containerelement you have set.
š¦ How to use?
Step 1: Installation
Using npm:
npm install canvas-animationsUsing yarn:
yarn add canvas-animationsStep 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