记录一个功能强大的JS动画库插件(JS前端开发)

>> 知识广场

记录一个功能强大的JS动画库插件(JS前端开发)

分类：JS 作者：myerob 标签：功能强大 JS 动画库插件前端开发阅读：243 收藏

导读：

anime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和CSS3 属性，SVG，DOM 元素和JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。anime.…

anime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和CSS3 属性，SVG，DOM 元素和JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。

anime.js 的兼容性

安装anime.js

npm install animejs 
bower install animejs

或者下载anime.js 的文件包

使用方法

在页面中引入anime.min.js 文件。

<script type="text/javascript" src="js/anime.min.js"></script>

HTML结构

以动画两个div 元素为例，HTML 结构如下：

<article>
  <div class="blue"></div>
  <div class="green"></div>
</article>

初始化插件

通过anime() 方法来构造一个对象实例，以json 对象的方式传入需要的参数：

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

配置参数

anime.js 动画库插件的可用配置参数有：

参数	默认值	取值
delay	0	number, function (el, index, total)
duration	1000	number, function (el, index, total)
autoplay	true	boolean
loop	false	number, boolean
direction	'normal'	'normal', 'reverse', 'alternate'
easing	'easeOutElastic'	console log anime.easings to get the complete functions list
elasticity	400	number (higher is stronger)
round	false	number, boolean
begin	undefined	function (animation)
update	undefined	function (animation)
complete	undefined	function (animation)

更多内容参考官方网站：https://www.animejs.cn/

参数使用教程总结：

动画的目标对象（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对象作为动画目标，这个对象必须含有至少一个数字属性。

var logEl = document.querySelector('.battery-log');
var battery = {
  charged: '0%',
  cycles: 120
}
anime({
  targets: battery,
  charged: '100%',
  cycles: 130,
  round: 1,
  easing: 'linear',
  update: function() {
    logEl.innerHTML = JSON.stringify(battery);
  }
});

数组

以数组作为动画目标。

var el = document.querySelector('.mixed-array-demo .el-01');

anime({
  targets: [el, '.mixed-array-demo .el-02', '.mixed-array-demo .el-03'],
  translateX: 250
});

可动画的目标属性

1.对目标的CSS属性进行动画：大多数CSS属性都会导致布局更改或重新绘制，并会导致动画不稳定。因此尽可能优先考虑opacity和CSS transforms。

2.对CSS的transforms属性动画：所有的transforms属性

3.JAVASCRIPT对象属性：包含数值的任何Object属性都可以设置动画。

4.DOM 属性：任何包含数值的DOM属性都可以设置动画。

5.SVG 属性：与任何其他DOM属性一样，包含至少一个数值的所有SVG属性都可以设置动画。

动画基础参数

DURAION（持续时间）：定义动画的持续时间（以毫秒为单位）。
DELAY（延迟）：定义动画的延迟（以毫秒为单位）。
ENDDELAY（末端延迟）：在动画结束时以毫秒为单位添加一些额外时间。
EASING（时间曲线）：定义动画的时间曲线。
ROUND（数字格式）：将值向上舍入为x小数。
特殊属性：使用Object作为值为动画的每个属性定义特定参数。未在Object中指定的其他属性继承自主动画。
FUNCTION 参数：为动画的每个目标和属性设置不同的值。 function 接受三个参数:

ARGUMENTS	INFOS

anime({
  targets: '.function-based-params-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  delay: function(el, i, l) {
    return i * 100;
  },
  endDelay: function(el, i, l) {
    return (l - i) * 100;
  }
});

方向和循环

DIRECTION（方向）：定义动画的方向。

ACCEPTS	INFOS

2.LOOP（循环）：定义动画的往复次数。

ACCEPTS	INFOS

3.AUTOPLAY（自动播放）：定义动画是否应自动启动。

ACCEPTS	INFOS

动画赋值方式

无单位数值：如果原始值具有单位，则它将自动添加到动画值中。
有单位数值：强制动画使用某个单位并自动转换初始目标值。
相对数值：添加，减去或乘以原始值。

ACCEPTS	EFFECT	EXAMPLE

颜色：anime.js 接受并转换Haxadecimal(十六进制)，RGB，RGBA，HSL和HSLA颜色值。
设定动画初始值：强制动画以指定值开始。
函数返回数值：为动画的每个目标和属性设置不同的值。

ARGUMENTS	INFOS

关键帧(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
});

2.属性关键帧：与动画关键帧类似，属性关键帧是使用属性对象的Array定义的。属性关键帧允许重叠动画，因为每个属性都有自己的关键帧数组。

动画控制

PLAY / PAUSE（暂停/播放）：播放暂停的动画，如果autoplay 参数设置为false，则启动动画。

animation.play();
animation.pause();

2.RESTART（重新开始）：从动画的初始值重新开始动画。

animation.restart();

3.REVERSE（反转方向）：反转动画的方向。

animation.reverse();

4.SEEK（瞬移）：跳转到特定时间（以毫秒为单位）。

animation.seek(timeStamp);

5.时间轴控制时间轴控制与动画控制的方法一样。

timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);

时间曲线(EASING)

匀速：不对动画应用任何缓动时间曲线。对于opacity和colors过渡很有用。

easing: 'linear'

2.不匀速

easing: 'easeInOutSine'

3.三次贝塞尔：使用您自己的自定义立方Bézier曲线cubicBezier(x1, y1, x2, y2).

easing: 'cubicBezier(.5, .05, .1, .3)'

4.弹簧（SPRING）：类似于弹簧效果。

easing: 'spring(mass, stiffness, damping, velocity)'

5.弹跳：弹跳效果

easing: 'easeOutElastic(amplitude, period)'

6.台阶式定义动画到达其结束值所需的跳转次数。

easing: 'steps(numberOfSteps)'

7.自定义：通过基于function based value返回自定义时间曲线函数。

easing: function() { return function(time) { return time * i} }

ANIME.JS方法

删除目标：从正在运行的动画或时间轴中删除目标。 targets参数接受与targets 属性相同的值。

anime.remove(targets)

2.获取值：返回元素的原始值。

anime.get(target, propertyName, unit);

3.设定值：立即将值设置为指定的目标。

anime.set(targets, {property: value});

4.随机数：返回特定范围内的随机整数。 anime.random(minValue, maxValue);

5.TICK：使用外部requestAnimationFrame循环播放动画。（不要忘记将autoplay参数设置为false以防止anime.js内置RAF循环启动。）

animation.tick(time)

6.运行的对象：返回当前正在运行的所有活动anime.js实例的Array。

anime.running