jQuery Animating Sprites Plugin - animateSprite
File Size: | 42.3 KB |
---|---|
Views Total: | 2606 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
animateSprite is a funny jQuery plugin that makes it easy to create animating sprites in a block element.
You might also like:
Basic Usage:
1. Include jQuery library and animateSprite.js on your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.animateSprite.js"></script>
2. Define a block element with width, height and background image
<div class="demo" style="width:400px; height:300px; background-image:url(demo.jpg)"></div>
3. Call the plugin with options
<script> $(".demo").animateSprite({ columns: 10, // The number of columns the sprite sheet has, default 10 totalFrames: 20, // Number of frames the animation has duration: 2000, // Time to complete the animation, in milliseconds loop: true, // If the animation has to loop complete: function(){ alert("Sprite animation complete!"); // Called after the animation has finished (not called if is loop) } }) </script>
4. Methods to control the animation
$("object").animateSprite("stopAnimation") // stops the animation $("object").animateSprite("resumeAnimation") // continues the animation from the point where it was stopped $("object").animateSprite("restartAnimation") // starts the animation from the beginning $("object").animateSprite("showFrame", n) // displays the frame number "n"
Change Log:
v1.3.5
- Fix image cache problem on IE7/8.
v1.3.4
- Swhicthing animations now restart frame counter
v1.3.3
- Added autoplay: false to prevent the animation from playing from the start
v1.3.2
- Restart animation if it's called again
v1.3.0
- Added support for bower. You can install now the plugin using bower install animatesprite.
- Fixed a leak when removing the DOM element, and added a new method to change FPS.
v1.2.0
- Fixed a problem setting the speed of the animation
- Added a new feature so you can specify a set of animations
v1.1.3
- Demo page and features update.
This awesome jQuery plugin is developed by blaiprat. For more Advanced Usages, please check the demo page or visit the official website.