学习animejs

1.安装方式

（1）npm install animejs

2.引入

import anime from 'animejs'

3.使用

（anime({

  targets: 'div',
  translateX: [
    { value: 100, duration: 1200 },
    { value: 0, duration: 800 }
  ],
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 2000,
  loop: true
});
targets:DOM对象，
loop:动画循环播放 
duration:动画时长（默认1000，单位毫秒，类型number），
delay:延迟（默认0，单位毫秒）
可写函数比如：
delay:function(target,下标) {

　　return 下标* 时间（毫秒）
}
达到的效果就是连续动画

easing:动画缓冲（缓冲函数，默认‘easeQutElastic’,类型string或自定义贝塞尔曲线坐标【数组】）
elasticity：弹性（默认500，类型number,range[0-1000]）
translateX: X轴的值
translateY: y轴的值
retate:旋转  
scale:大小变换 
rotate：2D旋转 rotate:'1turn'（旋转一周）
direction :方向（默认normal,类型：normal，reverse反向，alternate会还原）
autoplay:自动播放（默认true）
timeline:通过创建时间轴按顺序播放动画

var myTimeline = anime.timeline({
  direction: 'alternate',
  loop: 3,
  autoplay: false
})
使用.add()给timeline添加动画：

.add({
    targets: '.square',
    translateX: 250
    })
.add({
    targets: '.circle',
    translateX: 250
    })
.offset() 1.定义时间轴动画的开始

.add({
    targets: '.circle',
    translateX: 250,
    offset: '-=600' // 在前一个动画结束前600ms开始
  })
2.使用数字在时间轴上定义绝对开始时间

.add({
    targets: '.square',
    translateX: 250,
    offset: 1000 // Starts at 1000ms
  })