图片/图形
AnimateSprite 可控制雪碧图（sprites）动画jQuery插件
PetitQ
jquery.animateSprite 是一款可控制雪碧图（sprites）制作动画效果的 jQuery 插件。通过该插件可以控制雪碧图播放、暂停、反向播放和更改播放动画速度等。
使用方法
使用该插件需要引入 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)
Github 地址：https://github.com/blaiprat/jquery.animateSprite
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
