1.安装

    1. npm install animejs

    2.引入
    在想使用的组件中引入即可 

    1. import anime from 'animejs'

    3.使用

    1. anime({
    2.   targets: 'div',
    3.   translateX: [
    4.     { value: 100, duration: 1200 },
    5.     { value: 0, duration: 800 }
    6.   ],
    7.   rotate: '1turn',
    8.   backgroundColor: '#FFF',
    9.   duration: 2000,
    10.   loop: true
    11. });

    各个参数的含义:
    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.定义时间轴动画的开始
    vue中使用animejs - 图1
    .add({
    targets: ‘.circle’,
    translateX: 250,
    offset: ‘-=600’ // 在前一个动画结束前600ms开始
    })
    2.使用数字在时间轴上定义绝对开始时间
    .add({
    targets: ‘.square’,
    translateX: 250,
    offset: 1000 // Starts at 1000ms
    })

    官方文档:https://www.animejs.cn/documentation/#