学习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 })

转载于:https://www.cnblogs.com/neilniu/p/10059576.html