anime.js动画库的使用

anime.js是一个方便好用的动画库。一些使用方法将记录在此。

引入vue项目

先在终端安装依赖

1
2
3
4
5
$ npm install animejs --save
```  
再在script代码块中引入
```js
import anime from 'animejs/lib/anime.es.js'

选择动画目标

1
2
3
4
anime({
    targets:'#circle',   //可以使用css选择器，也可以先选完了在这里直接用
    translateX:0  //水平移动
    })

设定动画初始值

1
2
3
4
anime({
        targets:'#circle',   
        translateX:[start,end]  //在指定的位置start开始动画，在end处结束动画
    })

属性关键帧

当设定不同属性的动画时，同时开始执行。如下，两组关键帧同时开始执行。x向右立刻偏移100，偏移开始时，y偏移的前摇开始，在x偏移完毕后，执行x向左偏移的前摇，同时y向右偏移的前摇时间结束，开始偏移，偏移结束时，x向左偏移的前摇结束，x向左偏移。从而，偏移顺序是，右，下，左，上。

1
2
3
4
5
6
7
8
9
10
11
12
anime({
        targets:'#circle',
        translateX:[
            {value:100,duration:1000},
            {value:0,duration: 1000,delay:1000}
        ],
        translateY:[
            {value:100,duration:1000,delay:1000},
            {value:0,duration: 1000,delay: 1000}
        ],
        easing: 'easeOutElastic(1, .8)',
    })

描边动画

svg图片的边长可以通过对path标签对应的dom对象调用方法getTotalLength( )来获得。设置描边的虚线长度和偏移量等于边长，前者可以使得描边的虚线很长，看起来就像实线，后者可以让这个虚线部分完全偏移起点，展现出的是虚线之间的空白距离，也就是透明线。

1
2
3
4
5
6
7
8
mounted() {
  let paths=document.getElementsByTagName("path");
  for (let i=0;i<paths.length;i++)
  {
    paths[i].style.strokeDasharray=paths[i].getTotalLength()+'';
    paths[i].style.strokeDashoffset=paths[i].getTotalLength()+'';
  }
}

通过动画缓慢调整虚线的偏移值，一点点露出来，就能看见这个虚线顺着边描线了。offset为0时，虚线刚好就能展示完毕，也就是描边完成。

1
2
3
4
5
6
7
8
9
anime({
    targets: '#msg path',
    strokeDashoffset: [anime.setDashoffset, 0],//anime.setDashoffset会得到边长，作为offset时，刚好没开始描边，这里作为起点。终点是0，也就是完全画好的状态
    easing: 'easeInOutSine',//匀速
    duration: 1500, //描线的持续时间
    delay: function(el, i) { return i * 250 },  //不同时描线，会更好看
    direction: 'alternate',//正向动画做完再反着来一遍。
    loop: true
})