功能强大的 Javascript 动画库插件

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

安装

npm install animejs
bower install animejs

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

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

HTML 结构

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

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

配置参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZUDz6v0K-1608649092166)(https://imgkr2.cn-bj.ufileos.com/73f6aa2d-3ab4-4a2c-ad19-fd72feb62470.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=mfwnNxgoxAJkpqc5byNUqavjGCI%253D&Expires=1608731042)]

参数使用教程

动画的目标对象（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属性都可以设置动画。

动画基础参数

1. DURAION（持续时间）

定义动画的持续时间（以毫秒为单位）。

2. DELAY（延迟）

定义动画的延迟（以毫秒为单位）。

3. ENDDELAY（末端延迟）

在动画结束时以毫秒为单位添加一些额外时间。

4. EASING（时间曲线）

定义动画的时间曲线。

5. ROUND（数字格式）

将值向上舍入为x小数。

6. 特殊属性

使用Object作为值为动画的每个属性定义特定参数。
未在Object中指定的其他属性继承自主动画。

7. FUNCTION 参数

为动画的每个目标和属性设置不同的值。
function 接受三个参数:

ARGUMENTS	INFOS
target	当前动画目标元素
index	动画目标的索引
targetsLength	总动画目标数

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;
  }
});

方向和循环

1. DIRECTION（方向）

定义动画的方向。

ACCEPTS	INFOS
normal	正方向动画
reverse	反方向动画
alternate	往返

2. LOOP（循环）

定义动画的往复次数。

ACCEPTS	INFOS
Number	循环次数
true	无限循环

3. AUTOPLAY（自动播放）

定义动画是否应自动启动。

ACCEPTS	INFOS
true	开启自动播放
false	关闭自动播放

动画赋值方式

1. 无单位数值

如果原始值具有单位，则它将自动添加到动画值中。

2. 有单位数值

强制动画使用某个单位并自动转换初始目标值。

3. 相对数值

添加，减去或乘以原始值。

ACCEPTS	EFFECT	EXAMPLE
‘+=’	Add	‘+=100’
‘-=’	Substract	‘-=2turn’
‘*=’	Multiply	‘*=10’

4. 颜色

anime.js 接受并转换Haxadecimal(十六进制)，RGB，RGBA，HSL和HSLA颜色值。

5. 设定动画初始值

强制动画以指定值开始。

6. 函数返回数值

为动画的每个目标和属性设置不同的值。

ARGUMENTS	INFOS
target	当前动画目标元素
index	动画目标的索引
targetsLength	总动画目标数

关键帧(KEYFRAMES)

1. 动画关键帧

动画关键帧是使用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定义的。 属性关键帧允许重叠动画，因为每个属性都有自己的关键帧数组。

动画控制

1. 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)

1. 匀速

不对动画应用任何缓动时间曲线。
对于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方法

1. 删除目标

从正在运行的动画或时间轴中删除目标。
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

感谢阅读，详细文档请阅读anime.js官网文档