anime.min.js动画库实现网页动画_米醋屋个人技术博客

anime.min.jsanime.js是一个灵活的轻型JavaScript动画库。它与CSS，个别变换，SVG，DOM属性和JS对象。

#### 下载地址

http://micuer.com/static/pic/js/anime.min.js

#### 引入
```
<script src="anime.min.js"></script>
```

#### 参数

| 名称             | 默认             | 类型                                        |
| ---------------- | ---------------- | ------------------------------------------- |
| 延迟delay        | 0                | number，function（EL，指数，总）            |
| 为期 duration    | 1000             | number，function（EL，指数，总）            |
| 自动播放autoplay | true             | boolean                                     |
| 循环loop         | false            | number， boolean                            |
| 方向direction    | 'normal'         | 'normal'，'reverse'，'alternate'            |
| 缓解easing       | 'easeOutElastic' | 控制台日志anime.easings以获得完整的功能列表 |
| 弹性elasticity   | 400              | number （更高更强）                         |
| 回合round        | false            | number， boolean                            |
| 开始begin        | undefined        | function （动画）                           |

#### 示例

```
var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic'
});
```

如果你要操作的元素有多个值或者是要操作多个元素，可以这样做：

```
var bouncingBall = anime({
  targets: ['.ball', '.kick'],
  //rest of the code
});
```

更多请参考：

https://juejin.cn/post/6844903473218076686

注:原创不易,转载请注明出处( https://micuu.com/new/2298.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

anime.min.js动画库实现网页动画

留言反馈