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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!