jquery.ui.spriteanimation.js

jquery.ui.spriteanimation.js is a simple background image sprite animation plugin.

var $sprite = $('#sprite1').spriteanimation({
	fps: 30,
	frameWidth: 100,
	frameHeight: 102,
	frameTotal: 16
});

var $start = $('#start').on('click', function(){
	$sprite.trigger('play.spriteanimation');
});

var $stop = $('#stop').on('click', function(){
	$sprite.trigger('stop.spriteanimation');
});

var $reverse = $('#reverse').on('click', function(){
	$sprite.trigger('reverse.spriteanimation');
});

var $rewind = $('#rewind').on('click', function(){
	$sprite.trigger('rewind.spriteanimation');
});

var $fastforward = $('#fastforward').on('click', function(){
	$sprite.trigger('fastforward.spriteanimation');
});

var $sprite = $('#sprite2').spriteanimation({
	fps: 30,
	frameWidth: 100,
	frameHeight: 102,
	frameTotal: 16,
	repeat: true
});
var $start = $('#start2').on('click', function(){
	$sprite.trigger('play.spriteanimation');
});
var $stop = $('#stop2').on('click', function(){
	$sprite.trigger('stop.spriteanimation');
});

var $sprite = $('#sprite3').spriteanimation({
	fps: 15,
	frameWidth: 99,
	frameHeight: 124,
	frameTotal: 27,
	bgLineChange: true,
	bgLineChangeNum: 11,
	repeat: true
});
var $start = $('#start3').on('click', function(){
	$sprite.trigger('play.spriteanimation');
});
var $reverse = $('#reverse3').on('click', function(){
	$sprite.trigger('reverse.spriteanimation');
});