Fully Controllable Sprite Animation Plugin With jQuery - spriteAnimator

Fully Controllable Sprite Animation Plugin With jQuery - spriteAnimator
File Size: 53.9 KB
Views Total:
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);

This awesome jQuery plugin is developed by filidorwiese. For more Advanced Usages, please check the demo page or visit the official website.