anime.js 使用方法

anime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和CSS3 属性,SVG,DOM 元素和JS 对象一起工作,制作出各种高性能,平滑过渡的动画效果。

anime.js 的兼容性

安装anime.js

npm install animejs 
bower install animejs

或者下载anime.js 的文件包

使用方法

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

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

HTML结构

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

<article>
  <div class="blue"></div>
  <div class="green"></div>
</article>

初始化插件

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

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

配置参数

anime.js 动画库插件的可用配置参数有:

参数 默认值 取值
delay 0 number, function (el, index, total)
duration 1000 number, function (el, index, total)
autoplay true boolean
loop false number, boolean
direction 'normal' 'normal', 'reverse', 'alternate'
easing 'easeOutElastic' console log anime.easings to get the complete functions list
elasticity 400 number (higher is stronger)
round false number, boolean
begin undefined function (animation)
update undefined function (animation)
complete undefined function (animation)

更多参数请查看文档