Easy Sprite Animation Using jQuery and Html5 Canvas - spriteAnimate

Just another jQuery Spritesheet Animation plugin used to animate a sprite sheet with linear or a grid of frames using HTML5 canvas and requestAnimationFrame.

How to use it:

1. Create an HTML5 canvas element for the Spritesheet Animation.

<canvas>
</canvas>

2. Put jQuery library and the jQuery spriteAnimate plugin at the bottom of the html page.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="sprite-animate.js"></script>

3. Call the plugin on the canvas element, specify the path to the sprite sheet, and set the height, width and number of sprite frames.

var $canvas = $('canvas');
$canvas.spriteAnimate({
  frameWidth: 150,
  frameHeight: 150,
  numberOfFrames: 4,
  imgSrc: "demo.png"
});

4. Start the sprite animation.

$canvas.spriteAnimate('play');

5. Full configuration options with default values.

frameWidth: null,
frameHeight: null,
numberOfFrames: null,
imgSrc: null,
fps: null,
loop: true,
jumpFrame: null,
debug: false,
onReady: function(){},
onFinish: function(){}

6. API methods.

// pause the animation
$canvas.spriteAnimate('pause');

// restart the animation
$canvas.spriteAnimate('restart');

// goto a specified frame
$canvas.spriteAnimate('goTo', 3);

// get the current frame
$canvas.spriteAnimate('getIndex');

Change log:

2016-07-28

• added onReady callback.

---

This awesome jQuery plugin is developed by augoisms. For more Advanced Usages, please check the demo page or visit the official website.