当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

可以通过npm或bower来安装animateSprite插件。

bower install animatesprite
#####  使用方法
使用该插件需要引入jQuery和jquery.animateSprite.js文件。

```html
<script src="js/jquery.min.js"></script>
<script src="js/jquery.animateSprite.js"></script>
```
#####  HTML结构
可以使用一个div元素来作为雪碧图的容器。

```html
<div class="animation animation-2"></div>
```
#####  CSS样式
将雪碧图作为容器的背景图像，并为容器设置合适的高度和宽度。

```html
.animation-2 {
    background: url(../img/ramonaflowers_multiple.png);
    width: 125px;
    height: 157px;
}     
```             
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该jQuery插件。

```html
$('.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：播放指定的动画。
```html
$('object').animateSprite('play', 'animation name')
```
stop：停止播放指定的动画。
```html
$('object').animateSprite('stop')  
```
resume：恢复动画的播放。
```html
$('object').animateSprite('resume')  ```
restart：重新开始播放动画。
```html
$('object').animateSprite('restart')   ```
frame：播放第n帧动画。
```html
$('object').animateSprite('frame', n) ```
fps：将动画的速度调整为n帧每秒。
```html
$('object').animateSprite('fps', n)   ```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果