HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

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

2016-4-6 10:36| 发布者: admin| 查看: 2660| 评论: 0|来自: jQuery之家

摘要: jquery.animateSprite是一款可控制雪碧图(sprites)制作动画效果的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之家

更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-3-30 20:40

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部