使用方法 文档DEMO 下载

anime.js使用方法

1在页面中引入anime.min.js文件。

<script type="text/javascript" src="js/anime.min.js""></script>

2HTML结构

以动画两个div元素为例,HTML结构如下

<div class="el"></div>
<div class="el"></div>

3初始化插件

通过anime()方法来构造一个对象实例,以json对象的方式传入需要的参数:

var myAnime = anime({
  targets: '.el',
  translateX: 250,
  loop: true
});

效果展示

4配置其他参数

除了变化属性外,anime.js还能配置动画选项,如循环次数、延迟等,还能控制动画播放和暂停。
具体可参看anime.js的中文文档