anime.js是一个强大的用来制作动画的javascript库，虽然功能没有GASP（greensock）强大，但胜在它足够轻便，gzip压缩完只有9kb左右，麻雀虽小，却五脏俱全。
下面就来看看如何使用anime.js来编写动画效果。
先在github下载好anime.js，然后在页面引入它。
弹球效果
引入anime.js后，就可以开始来编写动画效果。
首先来编写一个弹球的动画效果，先来使用anime.js提供的方法来编写好基本的结构：
var bouncingBall = anime({ ?//code here});然后在里面使用anime.js提供的对应的方法来实现动画效果，比如要操纵的dom元素，动画的时间以及缓动曲线等等。
var bouncingBall = anime({ ?targets: ‘.ball‘, ?translateY: ‘50vh‘, ?duration: 300, ?loop: true, ?direction: ‘alternate‘, ?easing: ‘easeInCubic‘});下面来一一解释下各个属性的含义。
targets属性是用来指定要运动的元素，可以使用类似CSS选择器来选择元素，或者是下面几种方法来选择元素：
DOM选择方法document.querySelector(‘.ball‘)或者是document.querySelectorAll(‘.ball‘)方法;
js数组的方式[‘.ball‘]
js对象的方式{elementName: ‘ball‘}
如果你要操作的元素有多个值或者是要操作多个元素，可以这样做：
var bouncingBall = anime({ ?targets: [‘.ball‘, ‘.kick‘], ?//rest of the code});在上面代码中，第二个属性是translateY，也就是要操作元素做出变化的属性，和CSS中操作元素的方法非常相似。作为一个经常和动画打交道的前端开发人员，对于使用transform属性来提高动画的性能想必是非常清楚的，同样在使用animejs来编写动画效果的时候，特别涉及操作元素位置的时候也建议使用transform等属性来操作来提高动画性能。
第三个属性是duration，即动画的运行时间。如果要延迟执行动画，可以使用delay这个参数来指定动画延迟时间。
loop属性是用来定义动画是否循环运行。默认值是false，即动画只运行一次。当然也可以指定具体的数字来定义动画运行的次数或者是定义为true一只无限循环运行下次。
direction属性定义是否应该轮流反向播放动画。有三个值default、alternate和reverse。alternate表示动画应该轮流反向播放。reverse表示反方向运行。
最后一个属性是easing，它是用来定义动画运行速度曲线的，与CSS3中的动画曲线一样。
可以使用下面的方法来看看anime中有哪些速度曲线：
console.log(anime.easings);
现在再来完善下弹球的动画效果。
在上面的代码中，实现的效果只是球的上下弹起的效果。在真实世界中，当一个球掉在地上的时候，球会受到自身的压力从而产生一个变形的效果，可以使用transform中的scaleX来达到这个动画效果。
下面是具体代码：
var bouncingBall = anime({ ?targets: ‘.ball‘, ?translateY: ‘50vh‘, ?duration: 300, ?loop: true, ?direction: ‘alternate‘, ?easing: ‘easeInCubic‘, ?//new code ?scaleX: { ???value: 1.05, ?//代表缩放的值 ???duration: 150, ?// 运行时间 ???delay: 268 ??//延迟多久执行 ?}});可以去这里看看最终运行的效果。
demo
使用开发者工具查看可以看到实际的动画效果就是通过改变元素的CSS属性来实现的。
同时操作两个元素来编写动画效果
下面通过一个踢球的动画效果，来看看anime.js是如何来操作两个元素来实现动画效果的。
var kickBall = anime({ ?targets: ‘.kick‘, ?scale: 1.2, ?duration: 300, ?easing: ‘easeInCubic‘, ?complete: function() { ???anime({ ?????targets: ‘.ball‘, ?????translateX: ‘70vw‘, ?????scale: 1.5, ?????easing: ‘easeOutBounce‘, ?????delay: 150 ???}); ?}});可以看到当踢完球的动作后，球才动起来。这里用的是complete这个回调方法，当上一个动画完成后再执行下一个动画。
当然像这样动画效果使用CSS实现起来也是非常简单的，CSS版本
动画控制
anime.js还提供了诸如play、pause和restart方法来控制动画的执行、暂停和重新运行动画。也可以使用seek()方法来跳帧运行动画。
下面通过按钮分别来控制踢球和球运动的动画效果。
//Animating the kickvar kickBall = anime({ ?targets: ‘.kick‘, ?scale: 1.2, ?duration: 300, ?delay: 100, ?easing: ‘easeInCubic‘, ?autoplay: false});//Animating the ballvar movingBall = anime({ ?targets: ‘.ball‘, ?translateX: ‘70vw‘, ?scale: 1.5, ?easing: ‘easeOutBounce‘, ?delay: kickBall.duration + 100, ?autoplay: false});/* Playing the animation when clicking the play button */btnPlay.addEventListener(‘click‘, function(e) { ?e.preventDefault(); ?kickBall.play(); ?movingBall.play();});这里有两点需要注意的是：
为来在页面加载完的时候，不运行动画，需要设置autoplay的值为false；
只需要把对应的动画方法和play()绑定就可以用按钮来控制动画的运行和暂停了。
demo
使用anime.js来操作SVG
最后来看看使用anime.js来操作SVG。
在开始之前，把每一个SVG中的path元素都赋予一个CSS类，这样方便使用animejs来操作。
比如，要实现一个眼睛的动画效果：
var movingEyes = anime({ ?targets: [‘.inner-left-eye‘, ‘.inner-right-eye‘], ?cy: 400, ?duration: 500, ?delay: function(el, index) { ???var singleDelay = index === 0 ? 300 : index * 500; ???return singleDelay; ?}, ?autoplay: false});上面的代码通过来改变circle元素cy属性的值来使猫的眼睛动起来。
在上面的代码中的delay这个属性，是使用一个函数来返回值的，这样可以更灵活的控制动画的延迟时间。通过元素的索引值来返回不同的延迟的时间。如果元素的索引值是0即左边的眼睛的延迟时间是300毫秒，如果是2即右边的眼睛延迟500毫秒来运行动画。
上面通过两个简单的实例介绍了anime.js的一个使用方法，更多的使用方法就要靠你的想象力了。
更多的实例可以去这个集合看看。
在Codrops上也有好多精彩的实例：
Codrops.net demo: Inspiration for Letter Effects
Codrops.net Demo: Background Segment Effect
Codrops.net Demo: Fancy SVG Letter Animation
Codrops.net Demo: Multi-Layout Slideshow
Codrops.net Demo: Item Reveal Animations with SVG
本文主要是结合Animating the DOM with Anime.js这篇文章写成，有疏漏或者理解不到位的地方，还请多多指教！
原文地址：https://juejin.im/entry/58e9e48d61ff4b006b513f51
anime.js 简单入门教程
原文地址：https://www.cnblogs.com/joyco773/p/10734850.html