转载

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之家

原文 http://www.html5cn.org/article-9483-1.html

正文到此结束

所属分类：编程技术

本文标签： tar 时间下载 HTML5 http GitHub src js CSS 参数 https UI REST git jquery 插件 ip 配置 DOM 安装 HTML
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

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

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流