神刀安全网

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

简要教程

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

animateSprite-可控制雪碧图动画的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之家

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » animateSprite-可控制雪碧图动画的jQuery插件

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮