animateSprite-可控制雪碧图动画的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
来源：jQuery之家
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
