JQuery Sprite Animation Plugin

Since our team uses animation a lot for creating JavaScript games, we decided to encapsulate one of our frequently used JavaScript classes "spriteAnimation" and have it available for other users. One option was to have it as a jQuery plugin since jQuery is widely used and many developers are comfortable working with it. Creating the plugin was easy since it uses JavaScript extendability features which we have already used before in our internal classes. The plugin is now published at jQuery.com in the Plugins section under the name of "jamalm12" that is Me! and here is what the plugin does.


jQuery.spriteAnimation-0.1.0.js
jQuery.spriteAnimation-0.1.0.min.js
Demo

Overview

Create quick sprite animation by applying an image and sprite options. You can specify sprite's options like "frameWidth", "startFrame", "endFrame", "direction" and others. The animation is applied to an element by one line of code. You can use this plugin as an alternative to the "gif" animation, using this plugin you can control your animation behavior from your JaveScript code, like defining the animation delay, having an infinite loop animation or you can specify the number of loops.

Usage

To create a sprite animation using jQuery Sprite Animation you need first to creat
an image that contains the frames of the the animation like the image below.

Have a DIV element in your page and assign the sprite image as background to it.

<div id="sprite1" style="height:85px;width:85px;background-image:url('http://fs.hyzonia.com/hyz.islands/PopNDrop/common/css/arrows.png')"></div>
 

Call the $().spriteAnimation() function for the DIV.

$(document).ready(function() {
       $('#sprite1').spriteAnimation({
                numberOfLoops: -1,
                direction: 'ltr',
                startFrame: 0,
                endFrame: 36,
                interval: 20
       });
});

Options

numberOfLoops

Specify the number of times the animation will be repeated. This attribute is optional, the defualt value is -1 (infinite loop).

imageSrc

If imageSrc was defined in the options object, the plugin assign the background-image
automatically to the element. Otherwise the plugin trys to create the animation
with the current background image.

direction

Specify the direction in which the frames will be moved. This attribute is optional,
the default value is "ltr".

frameWidth

Specify the offset that we apply on each timer tick to create the movement feeling.
This is usualy the width of a single frame of the total frames that makes up the
animation image. This attribute is optional, if it was not specifyed automatically
detect the container element width and assign it as frame Width.

startFrame

The startFrame value is set to -1 as default. This value indecated the frame that
the animation will start from.

endFrame

The endFrame value is set to -1 as default, this value is expected to be set always
and not to be left to default.

interval

The time delay between the frames, This attribute is optional, the default value
is 50 (20 Hertz). Note to stop the animation call the function without parameters.
i.e. $('#sprite1').spriteAnimation()