这次介绍前端动画插件anime.JS。 anime.js是一个强大的Javascript动画库插件，可以与CSS3属性、SVG、DOM元素和js对象一起工作，以创建各种高性能、平滑迁移的动画效果。
安装npminstallanimejsbowerinstallanimejs并在页面上部署anime.min.js文件。
script type=' text/JavaScript ' src=' js/anime.min.js '/script html结构#初始化插件传递作为JSON对象所需的参数translateX: '13rem '，rotate: 180，BorderRaaate配置参数[导出外链图像失败。 源站可能有防盗链机构。 建议保存图像并直接上传。 (img-ZUDz6v0K-1608649092166 ) ) https://img kr2. cn-bj.ufile OS.com/73 f6aa 2d-3ab4- ] ucloud public key=token _ n
参数化教程动画的目标对象(targets ) CSS选择器不可使用伪元素
anime ({ targets : }.CSS-selector-demo.El )，translateX: 250} )； DOM元素/元素序列使用DOM节点或节点集合作为动画目标
var elements=document.queryselectorall (.DOM-node-demo.El )； anime({Targets:elements，translateX: 270} )； JAVASCRIPT对象将包含至少一个数字属性的JAVASCRIPT对象作为动画的目标。
varlogel=document.query selector (.battery-log )； varbattery={charged:'0% '，cycles :120 } anime (targets : battery，charged3360'100% '，cycles : 130 eass }； )； 将数组作为动画的目标。
varel=document.query selector (.混合阵列演示. El-01 )； anime(Targets3360(El，'.mixed-array-demo .el-02 '，'.mixed-array-demo .el-02 ' )，Translatex3360 ) ) )。 可设置动画的目标属性可将目标的CSS属性设置为动画。大多数CSS属性都会导致布局更改或重新绘制，并会导致动画不稳定。 因此尽可能优先考虑opacity和CSS transforms。
transforms属性相对于CSS的动画。 的所有变换属性
任何在JAVASCRIPT对象属性中包含数字的Object属性都可以设置动画。
DOM属性包含数字的所有DOM属性都可以设置动画。
与其他DOM属性一样，SVG属性可以设置包含至少一个数字的所有SVG属性的动画。
动画的基本参数DURAION持续时间定义动画的持续时间(以毫秒为单位)。
“延迟”定义动画的延迟(以毫秒为单位)。
“结束延迟”在动画末尾添加时间(以毫秒为单位)。
“EASING时间曲线”定义动画的时间曲线。
ROUND (数字格式)将值向上舍入为小数x。
特殊属性使用Object作为值，为动画的每个属性定义特定的参数。
其他未在Object中指定的属性继承自主动画。
功能参数为动画的每个目标和属性设置不同的值。
函数接受三个参数：
ARGUMENTSINFOStarget当前动画目标元素索引动画目标的索引targetsLength总动画目标数anime ((targets : (.function-babar
ction(el, i, l) { return i * 100; }, endDelay: function(el, i, l) { return (l - i) * 100; }}); 方向和循环 DIRECTION（方向）定义动画的方向。
ACCEPTSINFOSnormal正方向动画reverse反方向动画alternate往返LOOP（循环）定义动画的往复次数。
ACCEPTSINFOSNumber循环次数true无限循环AUTOPLAY（自动播放）定义动画是否应自动启动。
ACCEPTSINFOStrue开启自动播放false关闭自动播放动画赋值方式 无单位数值如果原始值具有单位，则它将自动添加到动画值中。
有单位数值强制动画使用某个单位并自动转换初始目标值。
相对数值添加，减去或乘以原始值。
ACCEPTSEFFECTEXAMPLE‘+=’Add‘+=100’‘-=’Substract‘-=2turn’‘*=’Multiply‘*=10’颜色anime.js 接受并转换Haxadecimal(十六进制)，RGB，RGBA，HSL和HSLA颜色值。
设定动画初始值强制动画以指定值开始。
函数返回数值为动画的每个目标和属性设置不同的值。
ARGUMENTSINFOStarget当前动画目标元素index动画目标的索引targetsLength总动画目标数关键帧(KEYFRAMES) 动画关键帧动画关键帧是使用keyframes属性中的数组定义的。
如果关键帧内没有指定duration（持续时间），则每个关键帧的持续时间将等于动画总持续时间除以关键帧数。
anime({ targets: '.animation-keyframes-demo .el', keyframes: [ {translateY: -40}, {translateX: 250}, {translateY: 40}, {translateX: 0}, {translateY: 0} ], duration: 4000, easing: 'easeOutElastic(1, .8)', loop: true}); 属性关键帧与动画关键帧类似，属性关键帧是使用属性对象的Array定义的。 属性关键帧允许重叠动画，因为每个属性都有自己的关键帧数组。
动画控制 PLAY / PAUSE（暂停/播放）播放暂停的动画，如果autoplay 参数设置为false，则启动动画。
animation.play();animation.pause(); RESTART（重新开始）从动画的初始值重新开始动画。
animation.restart(); REVERSE（反转方向）反转动画的方向。
animation.reverse(); SEEK（瞬移）跳转到特定时间（以毫秒为单位）。
animation.seek(timeStamp); 时间轴控制时间轴控制与动画控制的方法一样。 timeline.play();timeline.pause();timeline.restart();timeline.seek(timeStamp); 时间曲线(EASING) 匀速
不对动画应用任何缓动时间曲线。
对于opacity和colors过渡很有用。
使用您自己的自定义立方Bézier曲线cubicBezier(x1, y1, x2, y2).
easing: 'cubicBezier(.5, .05, .1, .3)' 弹簧（SPRING）类似于弹簧效果
easing: 'spring(mass, stiffness, damping, velocity)' 弹跳弹跳效果
easing: 'easeOutElastic(amplitude, period)' 台阶式定义动画到达其结束值所需的跳转次数。 easing: 'steps(numberOfSteps)' 自定义
通过基于function based value返回自定义时间曲线函数。
easing: function() { return function(time) { return time * i} } ANIME.JS方法 删除目标从正在运行的动画或时间轴中删除目标。
targets参数接受与targets 属性相同的值。
返回元素的原始值。
anime.get(target, propertyName, unit); 设定值立即将值设置为指定的目标。
anime.set(targets, {property: value}); 随机数返回特定范围内的随机整数。
anime.random(minValue, maxValue);
使用外部requestAnimationFrame循环播放动画。
不要忘记将autoplay参数设置为false以防止anime.js内置RAF循环启动。
返回当前正在运行的所有活动anime.js实例的Array。
anime.running感谢阅读，详细文档请阅读anime.js官网文档