jQuery.animateSprite 1.3.4

Sprite animations made simple

Run to the left
Run to the right

jQuery.animateSprite is a simple plugin to control sprite animations

Download plugin Visit Github page

How to install it

Use bower to install the extension using the following command 

bower install animatesprite


Or download the file from github

How it works

0.

Create or obtain a sprite, here is the one used on the example:

1.

Create an empty div and assign the sprite as a background, set the width and height so it displays the first frame

.scott {
    height: 140px;
    width: 108px;
    background-image: url(img/scottpilgrim.png);
}

2.

Call the plugin using the following options. On animations you can define as many animations as you need, specifying the frames per animation using an array.

jQuery.animateSprite will start playing the animation inmediately, using the first one defined.

On the example, 'walkLeft' frames are inverted since it's the whole row is a mirror from 'walkRight'

$(".scott").animateSprite({
    fps: 12,
    animations: {
        walkRight: [0, 1, 2, 3, 4, 5, 6, 7],
        walkLeft: [15, 14, 13, 12, 11, 10, 9, 8]
    },
    loop: true,
    complete: function(){
        // use complete only when you set animations with 'loop: false'
        alert("animation End");
    }
});

3.

Use the following methods to control the animation

$(".scott").animateSprite('play', 'walkLeft') $(".scott").animateSprite('play', 'walkRight') $(".scott").animateSprite('stop') $(".scott").animateSprite('resume') $(".scott").animateSprite('restart') $(".scott").animateSprite('frame', 3) $(".scott").animateSprite('fps', 3)