anime.js是一款功能强大的Javascript动画库插件。anime.js可以和CSS3属性， SVG，DOM元素和JS对象一起工作，制作出各种高性能，平滑过渡的动画效果。
安装
可以通过bower或npm来安装anime.js动画库插件。
npm install animejs
bower install animejs
使用方法
在页面中引入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) |
应用举例
指定动画参数
参数可以使用json对象的方式传入，可设置的动画参数有：
- value (必须)
- delay
- duration
- easing
例如：
anime({
targets: 'div',
translateX: '13rem',
rotate: {
value: 180,
duration: 1500,
easing: 'easeInOutQuad'
},
scale: {
value: 2,
delay: 150,
duration: 850,
easing: 'easeInOutExpo',
},
direction: 'alternate',
loop: true
});
多个timing时间函数值
动画延迟和动画的持续时间可以使用函数来各自指定目标元素。函数的参数如下：
| 参数位置 | 参数名称 | 描述 |
| 1 | target | 目标元素 |
| 2 | index | 目标元素的索引（从0开始） |
| 3 | length of targets | 目标的总数（从0开始计数） |
例如：
anime({
targets: 'div',
translateX: '13.5rem',
scale: [.75, .9],
delay: function(el, index) {
return index * 80;
},
direction: 'alternate',
loop: true
});
有效的动画属性列表
任何属性只要包含一个以上的数值属性，就可以执行动画效果。
| 类型 | 示例 |
| CSS Properties | width, borderRadius, 'background-color' |
| Individual transforms | translateX, rotate, scaleY |
| SVG attributes | d, rx, transform |
| DOM attributes | value, volume |
| Object properties | 任何包含一个以上的对象属性 |
单个属性值
定义结束动画的值。
| 类型 | 示例 | 描述 |
| String | '100rem' |
推荐使用。强制动画使用指定的值，但是不转换单位。 |
| Number | 100 |
使用可能的默认单位。 |
例如：
.div {
width: 20px;
}
anime({
targets: 'div',
translateX: '3rem', // Will translate the div from '0rem' to '3rem'
width: '100', // Will be converted to '100px' because the width is '20px' in the CSS
});
From To values
定义动画的开始和结束值。
例如：
anime({
targets: 'div',
translateX: [50, 250] // Will start at 50px and end at 250px
});
指定目标值
可以通过函数来分别指定各个目标对象的属性值。可用的函数参数如下：
| 参数位置 | 参数名称 | 描述 |
| 1 | target | 目标元素 |
| 2 | index | 目标元素索引（从0开始） |
例如：
anime({
targets: 'div',
translateX: function(el, index) {
return anime.random(50, 100); // Will set a random value from 50 to 100 to each divs
}
});
anime({
targets: 'path',
strokeDashoffset: function(el) {
var pathLength = el.getTotalLength();
return [pathLength, 0]; // Will use the exact path length for each targeted path elements
}
});
动画播放控制
可以对动画进行播放、暂停、重播等控制。
| 名称 | 参数 | 描述 |
| .play() | 动画参数对象 | 播放动画 |
| .pause() | 无 | 暂停动画播放 |
| .restart() | 动画参数对象 | 重置动画 |
| .seek() | 百分比数或对象如：{time: 1250} | 跳转到指定动画帧 |
例如：
var myAnimation = anime({
targets: 'div',
translateX: 100,
autoplay: false
});
myAnimation.play(); // Manually play the animation
动画运动路径
使用anime.path()方法使元素沿SVG路径进行动画。
| 名称 | 描述 |
| translateX | 路径X轴 |
| translateY | 路径Y轴 |
| rotate | 指定角度 |
例如：
var myPath = anime.path('path');
anime({
targets: 'div',
translateX: myPath,
translateY: myPath,
rotate: myPath
});
辅助方法
anime.list：返回当前所有的活动动画对象。
anime.list;
anime.speed = x：修改所有动的速度（从0-1）。
anime.speed = .5;
anime.easings：返回动画的easing函数列表。
anime.easings;
anime.remove(target)：从动画中移除一个或多个目标元素。
anime.remove('.item-2');
anime.getValue(target, property)：从一个元素中获取当前的可用值。
anime.getValue('div', 'translateX');
anime.random(x,y)：在两个数之间生成一个随机数。
anime.random(10, 40);
anime.js动画库插件的github地址为： https://github.com/juliangarnier/anime。
