Fully Controllable Sprite Animation Plugin With jQuery - spriteAnimator
File Size: | 55.3 KB |
---|---|
Views Total: | 2401 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
spriteAnimator is a simple jQuery sprite animation plugin which enables you to create a fully controllable image sequence animation using background sprites.
How to use it:
1. Download and place the main JavaScript file jquery.sprite-animator.js
after jQuery library like this:
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.sprite-animator.js"></script>
2. Insert your image sprites as a background to the target container.
<div id="sprite"></div>
#sprite { background-image:url(1.png); }
3. Active the sprite animation on page load by calling the spriteAnimator
function like this:
var sprite = $('#sprite'); var spriteAnimator = sprite.spriteAnimator({ cols: 3, // Number of columns in the spritesheet rows: 5 // Number of rows in the spritesheet }).play({ run: -1, // -1 = infinite });
4. All default global configurations.
- debug: show debug logging in console (default: false)
- url: url to spriteSheet, if not set the css background-image will be used
- cols: number columns in the spritesheet (mandatory)
- rows: number rows in the spritesheet (mandatory)
- cutOffFrames: number of sprites not used in the spritesheet (default: 0)
- top/bottom/left/right: starting offset position
- startSprite: number of the first sprite to show when done loading
- onLoaded: callback that will be called when loading has finished
5. Available options for the play
method.
var sprite = $('#sprite'); var spriteAnimator = sprite.spriteAnimator({ // global options here }).play({ play: true, delay: 50, tempo: 1, // Timescale for all delays run: 1, reversed: false, outOfViewStop: false, script: [], // New animation array or named script that has been previously been defined lastTime: 0, nextDelay: 0, currentFrame: -1, currentSprite: 1, onPlay: null, onStop: null, onFrame: null });
6. Control the sprite animation programmatically with the following API methods.
// play sprite.trigger('play'); // reverse direction sprite.trigger('reverse'); // stop sprite.trigger('stop'); // reset sprite.trigger('reset'); // next frame sprite.trigger('nextFrame'); // previous frame sprite.trigger('previousFrame'); // goto frame 3 sprite.trigger('goToFrame', 3); // show sprite 3 sprite.trigger('showSprite', 3);
Change log:
2018-02-21
- v1.0.8: Minor cleanup
This awesome jQuery plugin is developed by filidorwiese. For more Advanced Usages, please check the demo page or visit the official website.