Fully Controllable Sprite Animation Plugin With jQuery - spriteAnimator

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.