anime 动画的使用方法

1、关于anime.js的引入
$ npm install animejs

OR

$ bower install animejs
import anime from ‘animejs’
或者直接引用anime.js文件

1.targets：实现动画的目标，可以是

css选择器 如：‘div’,‘#el path’;
DOM元素 如： document.querySelector(‘.item’)
节点列表 如： document.querySelectorAll(‘.item’)
对象
数组 如：[‘div’, ‘.item’, domNode]
2.一些CSS属性

使用一些CSS属性值的设置即可实现动画，比如：

// value：属性值；duration：持续时间；delay：延迟时间
backgroundColor: [
{ value: “#5F9EA0”, duration: 700 },
{ value: “#3A5FCD”, duration: 300, delay: 1000}
],
这个动画就是前0.7s背景色为“#5F9EA0”，1s时才将颜色开始变为“#3A5FCD”，持续0.3s。

3.rotate：旋转，后面是度数，当然你可以不写，默认为0

4.borderRadius：这个不需要解释了

5.duration：动画执行时间

6.loop：是否循环执行动画，默认是false

7.easing：动画执行函数，这个怎么说呢，就是动画在执行过程中不同阶段的不同执行速度