animateSprite-可控制雪碧图（sprites）动画的jQuery插件

jquery.animateSprite是一款可控制雪碧图（sprites）制作动画效果的jQuery插件。通过该插件可以控制雪碧图播放、暂停、反向播放和更改播放动画速度等。

安装

可以通过npm或bower来安装animateSprite插件。

bower install animatesprite
                

使用方法

使用该插件需要引入jQuery和jquery.animateSprite.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.animateSprite.js"></script>
                

HTML结构

可以使用一个<div>元素来作为雪碧图的容器。

<div class="animation animation-2"></div>
                

CSS样式

将雪碧图作为容器的背景图像，并为容器设置合适的高度和宽度。

.animation-2 {
    background: url(../img/ramonaflowers_multiple.png);
    width: 125px;
    height: 157px;
}                  
                

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该jQuery插件。

$('.animation').animateSprite({
    fps: 12,
    loop: true,
    animations: {
        walk: [0, 1, 2, 3, 4, 5, 6, 7, 8],
        run: [14, 13, 12, 11, 10, 9]
    },
    complete: function(){
        alert('Sprite animation complete!');
    }
})
                

配置参数

• columns：雪碧图分为多少列，默认为10。
• fps：定义动画的速度。
• duration：动画的持续时间，单位毫秒。
• complete：动画执行完毕之后的回调函数。（如果是无限循环动画不会被调用）
• loop：是否是无限循环动画
• autoplay：是否自动播放。
• animations：包含多个动画的键值对对象。键是动画的名称，值是一个包含帧的数组。

方法

• play：播放指定的动画。

  $('object').animateSprite('play', 'animation name')
  

• stop：停止播放指定的动画。

  $('object').animateSprite('stop')  
  

• resume：恢复动画的播放。

  $('object').animateSprite('resume')  
  

• restart：重新开始播放动画。

  $('object').animateSprite('restart')  
  

• frame：播放第n帧动画。

  $('object').animateSprite('frame', n) 
  

• fps：将动画的速度调整为n帧每秒。

  $('object').animateSprite('fps', n)  
  

jquery.animateSprite插件的github地址为：https://github.com/blaiprat/jquery.animateSprite