文档 | anime.js

目标

CSS 选择器

可以是任何 CSS 选择器。

伪元素无法通过 JavaScript 作为目标。

类型	默认值	示例
字符串	`null`	`targets: '.item'`

DOM 节点 / NodeList

可以是任何 DOM 节点或 NodeList。

类型	默认值	示例
DOM 节点	`null`	`targets: el.querySelector('.item')`
NodeList	`null`	`targets: el.querySelectorAll('.item')`

JavaScript 对象

一个至少包含一个数值属性的 JavaScript 对象。

类型	默认值	示例
对象	`null`	`targets: myObjectProp`

{"charged":"0%","cycles":120}

数组

一个包含多个目标的数组。

接受混合类型。例如：['.el', domNode, jsObject]

类型	默认值	示例
数组	`null`	`targets: ['.item', el.getElementById('#thing')]`

属性

CSS 属性

任何 CSS 属性都可以进行动画处理。

大多数 CSS 属性会引起布局更改或重绘，导致动画卡顿。请尽可能优先使用 opacity 和 CSS transforms。

关于可接受值的更多详情，请参见值部分。

示例	值
`opacity`	`.5`
`left`	`'100px'`

CSS Transforms

可对 CSS transform 的各个属性分别设置动画。

可以为每个 transform 属性指定不同的时间设置，更多详情请参见特定属性参数部分。

关于可接受值的更多详情，请参见值部分。

有效属性	默认单位
`'translateX'`	`'px'`
`'translateY'`	`'px'`
`'translateZ'`	`'px'`
`'rotate'`	`'deg'`
`'rotateX'`	`'deg'`
`'rotateY'`	`'deg'`
`'rotateZ'`	`'deg'`
`'scale'`	`—`
`'scaleX'`	`—`
`'scaleY'`	`—`
`'scaleZ'`	`—`
`'skew'`	`'deg'`
`'skewX'`	`'deg'`
`'skewY'`	`'deg'`
`'perspective'`	`'px'`

对象属性

任何包含数值的对象属性都可以进行动画处理。
关于可接受值的更多详情，请参见值部分。

示例	值
`prop1`	`50`
`'prop2'`	`'100%'`

{"prop1":0,"prop2":"0%"}

DOM 属性

任何包含数值的 DOM 属性都可以进行动画处理。
关于可接受值的更多详情，请参见值部分。

示例	值
`值`	`1000`
`volume`	`0`
`data-custom`	`'3 dogs'`

SVG 属性

与任何其他DOM 属性一样，所有包含至少一个数值的 SVG 属性都可以进行动画处理。
关于可接受值的更多详情，请参见值部分；关于 SVG 动画，请参见SVG部分。

示例	值
`points`	`'64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'`
`scale`	`1`
`baseFrequency`	`0`

属性参数

Duration (持续时间)

定义动画的持续时间，单位为毫秒。

类型	默认值	示例
数字	`1000`	`3000`
anime.stagger	参见交错动画部分	`anime.stagger(150)`
函数	参见基于函数的参数部分	`(el, i) => i * 150`

3000 ms

Delay (延迟)

定义动画的延迟时间，单位为毫秒。

类型	默认值	示例
数字	`0`	`1000`
anime.stagger	参见交错动画部分	`anime.stagger(150)`
函数	参见基于函数的参数部分	`(el, i) => i * 150`

1000 ms

end delay (结束延迟)

在动画结束时增加额外的时长，单位为毫秒。

类型	默认值	示例
数字	`0`	`1000`
anime.stagger	参见交错动画部分	`anime.stagger(150)`
函数	参见基于函数的参数部分	`(el, i) => i * 150`

1000 ms

Easing (缓动)

定义动画的时间函数。

请查阅缓动部分，获取可用的缓动函数及参数的完整列表。

类型	默认值	示例
字符串	`'easeOutElastic(1, .5)'`	`easing: 'easeInOutQuad'`

easeInOutExpo

Round (取整)

将数值四舍五入到 x 位小数。

类型	默认值	示例
数字	`0`	`round: 10`

特定属性参数

使用一个对象作为值，为动画的每个属性定义特定的参数。
对象中未指定的其他属性将从主动画继承。

类型	示例
对象	`rotate: { value: 360, duration: 1800, easing: 'easeInOutSine' }`

基于函数的参数

为动画的每个目标和属性获取不同的值。

该函数接受 3 个参数

参数	信息
`目标`	当前被动画处理的目标元素
`index`	被动画处理的目标元素的索引
`targetsLength`	被动画处理的目标总数

参见交错动画部分，以便更轻松地操作值。

delay = 0 * 100
delay = 1 * 100
delay = 2 * 100

动画参数

Direction (方向)

定义动画的方向。

接受	信息
`'normal' (正常)`	动画进程从 0% 到 100%
`'reverse' (反向)`	动画进程从 100% 到 0%
`'alternate' (交替)`	动画进程从 0% 到 100%，然后返回到 0%

正常
反向
交替

Loop (循环)

定义动画的迭代次数。

接受	信息
`数字`	迭代次数
`true`	无限循环

正常 3 次
反向 3 次
交替 3 次
正常无限
无限反向
无限交替

Autoplay (自动播放)

定义动画是否应自动开始。

接受	信息
`true`	自动开始动画
`false`	动画默认暂停

autoplay: true

autoplay: false

值

无单位

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

类型	示例
数字	`translateX: 250`

特定单位

强制动画使用特定单位，并将自动转换初始目标值。

转换精度可能因所用单位而异。
你也可以直接使用数组定义动画的初始值，参见起始值部分。

类型	示例
字符串	`width: '100%'`

相对值

对原始值进行加、减或乘法运算。

接受	效果	示例
`'+='`	加	`'+=100'`
`'-='`	减	`'-=2turn'`
`'*='`	乘	`'*=10'`

颜色

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

不支持 CSS 颜色名称（例如：'red', 'yellow', 'aqua'）。

接受	示例
十六进制	`'#FFF'` 或 `'#FFFFFF'`
RGB	`'rgb(255, 255, 255)'`
RGBA	`'rgba(255, 255, 255, .2)'`
HSL	`'hsl(0, 100%, 100%)'`
HSLA	`'hsla(0, 100%, 100%, .2)'`

HEX
RGB
HSL
RGBA
HSLA

起始值

强制动画从指定值开始。

类型	示例
`数组`	`['50%', '100%']`

基于函数的值

为动画的每个目标和属性获取不同的值。

该函数接受 3 个参数

参数	信息
`目标`	当前被动画处理的目标元素
`index`	被动画处理的目标元素的索引
`targetsLength`	被动画处理的目标总数

关键帧

动画关键帧

动画关键帧通过在 keyframes 属性中使用数组来定义。

如果关键帧内部没有指定持续时间，则每个关键帧的持续时间将等于动画总持续时间除以关键帧数量。

类型	示例
`数组`	`[ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]`

属性关键帧

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

如果关键帧内部没有指定持续时间，则每个关键帧的持续时间将等于动画总持续时间除以关键帧数量。

类型	示例
`数组`	`[ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]`

交错动画

交错动画基础

交错动画允许你通过跟随和重叠动作来为多个元素制作动画。

anime.stagger(value, options)

参数	类型	信息	是否必须
值	`Number`, `String`, `Array`	被操作的值	是
选项	`对象`	错开参数	否

delay = (100 * 0) ms
delay = (100 * 1) ms
delay = (100 * 2) ms
delay = (100 * 3) ms
delay = (100 * 4) ms
delay = (100 * 5) ms

起始值

从一个特定的值开始交错效果。

anime.stagger(value, {start: startValue})

类型	信息
`Number`, `String`	与属性值相同，参见值部分

delay = 500 + (100 * 0) ms
delay = 500 + (100 * 1) ms
delay = 500 + (100 * 2) ms
delay = 500 + (100 * 3) ms
delay = 500 + (100 * 4) ms
delay = 500 + (100 * 5) ms

范围值

在两个数字之间均匀分配值。

anime.stagger([startValue, endValue])

类型	信息
`'easingName'`	接受所有有效的缓动名称，参见缓动部分
`function(i)`	自定义缓动函数，参见自定义缓动部分

rotate = -360 + ((360 - (-360)) / 5) * 0
rotate = -360 + ((360 - (-360)) / 5) * 1
rotate = -360 + ((360 - (-360)) / 5) * 2
rotate = -360 + ((360 - (-360)) / 5) * 3
rotate = -360 + ((360 - (-360)) / 5) * 4
rotate = -360 + ((360 - (-360)) / 5) * 5

From 值

从一个特定的位置开始交错效果。

anime.stagger(value, {from: startingPosition})

选项	类型	信息
`'first'` (默认)	`'string'`	从第一个元素开始效果
`'last'`	`'string'`	从最后一个元素开始效果
`'center'`	`'string'`	从中心开始效果
`index`	`number`	从指定的索引开始效果

Direction (方向)

改变交错操作的顺序。

anime.stagger(value, {direction: 'reverse'})

选项	信息
`'normal'` (默认)	正常交错，从第一个元素到最后一个
`'reverse' (反向)`	反向交错，从最后一个元素到第一个

Easing (缓动)

使用缓动函数来交错值。

anime.stagger(value, {easing: 'easingName'})

类型	信息
`'string'`	接受所有有效的缓动名称
`function(i)`	使用你自己的自定义缓动函数

Grid (网格)

基于一个二维数组的交错值，可以实现“波纹”效果。

anime.stagger(value, {grid: [rows, columns]})

类型	信息
`array`	一个包含 2 个项目的数组，第一个值是行数，第二个是列数

Axis (轴)

强制指定网格交错效果的方向。

anime.stagger(value, {grid: [rows, columns], axis: 'x'})

参数	信息
`'x'`	沿 x 轴
`'y'`	沿 y 轴

时间轴

时间线基础

时间线让你能够同步多个动画。
默认情况下，添加到时间线的每个动画都在前一个动画结束后开始。

创建时间线

var myTimeline = anime.timeline(parameters);

参数	类型	信息	是否必须
`参数`	`对象`	由子动画继承的时间线默认参数	否

向时间线添加动画

myTimeline.add(parameters, offset);

参数	类型	信息	是否必须
`参数`	`对象`	子动画的参数，会覆盖时间线的默认参数	是
`时间偏移`	`String` 或 `Number`	查看时间线偏移部分	否

时间偏移

时间偏移可以通过时间线的 .add() 函数的第二个可选参数来指定。它定义了动画在时间线中的开始时间，如果没有指定偏移，动画将在前一个动画结束后开始。
偏移可以是相对于上一个动画的，也可以是相对于整个时间线的绝对值。

类型	偏移	示例	信息
字符串	`'+='`	`'+=200'`	在前一个动画结束后 200ms 开始
字符串	`'-='`	`'-=200'`	在前一个动画结束前 200ms 开始
数字	`数字`	`100`	在 100ms 处开始，无论动画在时间线中的位置如何

无偏移
相对偏移 ('-=600')
绝对偏移 (400)

参数继承

在父时间线实例中设置的一些参数可以被所有子项继承。

可被继承的参数
`targets`
`easing`
`持续时间`
`延迟`
`endDelay`
`round`

控件

Play / Pause (播放 / 暂停)

播放一个已暂停的动画，或者如果 autoplay 参数设置为 false，则开始动画。

animation.play();

暂停一个正在运行的动画。

animation.pause();

Restart (重新开始)

从初始值重新开始一个动画。

animation.restart();

Reverse (反向)

反转一个动画的方向。

animation.reverse();

Seek (跳转)

跳转到特定的时间（单位为毫秒）。

animation.seek(timeStamp);

也可用于在滚动时控制动画。

animation.seek((scrollPercent / 100) * animation.duration);

时间线控件

时间线可以像任何其他 anime.js 实例一样被控制。

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

回调函数 & Promises

Update (更新)

动画一开始播放，每一帧都会触发的回调函数。

类型	参数	信息
函数	animation	返回当前的动画对象

Begin & Complete (开始 & 完成)

begin() 回调函数在动画开始播放时触发一次。

complete() 回调函数在动画完成时触发一次。

如果动画的 duration 为 0，begin() 和 complete() 回调函数都会被调用。

类型	参数	信息
函数	animation	返回当前的动画对象

loopBegin & loopComplete (循环开始 & 循环完成)

loopBegin() 回调函数在每次循环开始时触发一次。

loopComplete() 回调函数在每次循环完成时触发一次。

类型	参数	信息
函数	animation	返回当前的动画对象

Change (改变)

在动画的延迟和结束延迟之间的每一帧都会触发的回调函数。

类型	参数	信息
函数	animation	返回当前的动画对象

changeBegin & changeComplete (改变开始 & 改变完成)

changeBegin() 回调函数在每次动画开始改变时触发。

changeComplete() 回调函数在每次动画停止改变时触发。

动画的方向会影响 changeBegin() 和 changeComplete() 被触发的顺序。

类型	参数	信息
函数	animation	返回当前的动画对象

Finished promise

每个动画实例在动画完成时都会返回一个 finished promise。

animation.finished.then(function() {
  // Do things...
});

IE < 11 不支持 Promises。

SVG

运动路径

根据 SVG 路径元素的 x, y 和 angle 值来为一个元素制作动画。

var myPath = anime.path('svg path');

路径函数返回一个新的函数，该函数返回指定的属性。

从 v3 开始，运动路径动画是响应式的

参数	示例	信息
`'x'`	`myPath('x')`	返回 SVG 路径当前的 x 值，单位为 `'px'`
`'y'`	`myPath('y')`	返回 SVG 路径当前的 y 值，单位为 `'px'`
`'angle'`	`myPath('angle')`	返回 SVG 路径当前的角度值，单位为 `'degrees'`

Morphing (变形)

在两个 SVG 形状之间创建过渡效果。

形状必须有相同数量的点！

关于 SVG 形状变形的更多信息请点击这里。

Line drawing (线条绘制)

使用 'stroke-dashoffset' 属性创建路径绘制动画。
通过 anime.setDashoffset() 以起始值格式设置路径的 'dash-offset' 值。

strokeDashoffset: [anime.setDashoffset, 0]

关于线条绘制动画的更多信息请点击这里。

缓动函数

Linear (线性)

不为你的动画应用任何缓动时间函数。
对于透明度和颜色过渡很有用。

easing: 'linear'

Penner 函数

内置的 Robert Penner 缓动函数。

在 easings.net 上查看缓动效果。

easing: 'easeInOutSine'

可用的缓动函数

in	out	in-out	out-in
`'easeInQuad'`	`'easeOutQuad'`	`'easeInOutQuad'`	`'easeOutInQuad'`
`'easeInCubic'`	`'easeOutCubic'`	`'easeInOutCubic'`	`'easeOutInCubic'`
`'easeInQuart'`	`'easeOutQuart'`	`'easeInOutQuart'`	`'easeOutInQuart'`
`'easeInQuint'`	`'easeOutQuint'`	`'easeInOutQuint'`	`'easeOutInQuint'`
`'easeInSine'`	`'easeOutSine'`	`'easeInOutSine'`	`'easeOutInSine'`
`'easeInExpo'`	`'easeOutExpo'`	`'easeInOutExpo'`	`'easeOutInExpo'`
`'easeInCirc'`	`'easeOutCirc'`	`'easeInOutCirc'`	`'easeOutInCirc'`
`'easeInBack'`	`'easeOutBack'`	`'easeInOutBack'`	`'easeOutInBack'`
`'easeInBounce'`	`'easeOutBounce'`	`'easeInOutBounce'`	`'easeOutInBounce'`

三次贝塞尔曲线

使用你自己的自定义三次贝塞尔曲线 cubicBezier(x1, y1, x2, y2)。

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

你可以使用像 Ceaser 这样的贝塞尔曲线生成器来生成你的曲线坐标。

Spring (弹簧)

基于弹簧物理的缓动。

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

弹簧动画的持续时间由弹簧参数定义。
动画的 duration 参数将不会被考虑。

参数	默认值	最小	最大
Mass (质量)	`1`	`0`	`100`
Stiffness (刚度)	`100`	`0`	`100`
Damping (阻尼)	`10`	`0`	`100`
Velocity (速度)	`0`	`0`	`100`

Elastic (弹性)

弹性缓动。

easing: 'easeOutElastic(amplitude, period)'

in	out	in-out	out-in
`'easeInElastic'`	`'easeOutElastic'`	`'easeInOutElastic'`	`'easeOutInElastic'`

参数	默认值	最小	最大	信息
Amplitude (振幅)	`1`	`1`	`10`	控制曲线的过冲量。这个数字越大，过冲量就越大。
Period (周期)	`.5`	`0.1`	`2`	控制曲线来回摆动的次数。这个数字越小，曲线来回摆动的次数就越多。

Steps (步进)

定义动画到达其最终值所经过的跳跃次数。

easing: 'steps(numberOfSteps)'

参数	默认值	最小	最大
步数	`10`	`1`	`∞`

自定义缓动函数

自定义缓动函数必须通过基于函数的值返回。

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

参数	信息
Time (时间)	返回动画的当前时间

辅助函数

remove (移除)

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

从所有活动的动画中移除目标。

anime.remove(targets);

从单个动画或时间线中移除目标。

animation.remove(targets);

get (获取)

返回一个元素的原始值。

anime.get(target, propertyName, unit);

由于 anime.js 使用 getComputedStyle 来访问原始 CSS，所以值几乎总是以 'px' 返回，第三个（可选）参数将值转换为所需的单位。

anime.get(domNode, 'width', 'rem');

参数	类型	信息
目标	`'string'`, `var`	可以使用任何有效的目标

CSS transforms：只能访问内联值。

set (设置)

立即为指定的目标设置值。

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

参数	类型	信息
target(s) (目标)	`'string'`, `var`	可以使用任何有效的目标
values (值)	`object (对象)`	可以使用任何有效的属性

random (随机)

返回一个特定范围内的随机整数。

anime.random(minValue, maxValue);

tick (滴答)

使用外部的 requestAnimationFrame 循环来播放动画。

animation.tick(time)

不要忘记将 autoplay 参数设置为 false，以防止 anime.js 内置的 RAF 循环启动。

running (运行中)

返回一个包含所有当前正在运行的 anime.js 实例的数组。

anime.running

可见性改变时暂停

anime.suspendWhenDocumentHidden = false; // default true

默认情况下，切换标签页时所有动画都会暂停，这在你希望确保用户看到所有内容，不错过动画的重要部分时很有用。
但你也可以选择让动画正常运行而没有任何暂停，就像视频或音轨可以在后台持续播放一样。