文档 | anime.js 中文

目标对象

CSS 选择器

可以是任何 CSS 选择器。

伪元素无法使用 JavaScript 进行目标定位。

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

DOM 节点/节点列表

可以是任何 DOM 节点或节点列表。

类型	默认值	示例
DOM 节点	`null`	`targets: el.querySelector('.item')`
节点列表	`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 属性会导致布局更改或重绘，从而导致动画不流畅。尽可能优先使用不透明度和 CSS 变换。

有关接受值的更多详细信息，请参阅值部分。

示例	值
`不透明度`	`.5`
`左边距`	`'100px'`

CSS 变换

分别为 CSS 变换属性设置动画。

可以为每个变换属性指定不同的时间，有关更多详细信息，请参阅特定属性参数部分。

有关接受值的更多详细信息，请参阅值部分。

有效属性	默认单位
`'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'`

对象属性

任何包含数值的 Object 属性都可以进行动画。
有关接受值的更多详细信息，请参阅值部分。

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

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

DOM 属性

任何包含数值的 DOM 属性都可以进行动画。
有关接受值的更多详细信息，请参阅值部分。

示例	值
`值`	`1000`
`音量`	`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`

属性参数

持续时间

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

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

3000 毫秒

延迟

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

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

1000 毫秒

结束延迟

在动画结束时添加一些额外的毫秒时间。

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

1000 毫秒

缓动函数

定义动画的时间函数。

查看缓动函数部分以获取可用缓动函数和参数的完整列表。

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

easeInOutExpo

四舍五入

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

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

特定属性参数

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

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

基于函数的参数

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

该函数接受 3 个参数

参数	信息
`目标对象`	当前正在设置动画的目标元素
`索引`	正在设置动画的目标元素的索引
`目标对象长度`	正在设置动画的目标对象的总数

请参阅交错动画部分以获取更简单的值操作。

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

动画参数

方向

定义动画的方向。

接受	信息
`'normal'`	动画进度从 0 到 100%
`'reverse'`	动画进度从 100% 到 0%
`'alternate'`	动画进度从 0% 到 100%，然后返回到 0%

normal
reverse
alternate

循环

定义动画的迭代次数。

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

normal 3 次
reverse 3 次
alternate 3 次
normal 无限次
无限次 reverse
无限次 alternate

自动播放

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

接受	信息
`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 个参数

参数	信息
`目标对象`	当前正在设置动画的目标元素
`索引`	正在设置动画的目标元素的索引
`目标对象长度`	正在设置动画的目标对象的总数

关键帧

动画关键帧

动画关键帧使用 keyframes 属性内的数组进行定义。

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

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

属性关键帧

类似于动画关键帧，属性关键帧使用属性 Object 的数组进行定义。属性关键帧允许重叠动画，因为每个属性都有自己的关键帧数组。

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

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

交错动画

交错动画基础

交错动画允许您使用延续和重叠动作为多个元素设置动画。

anime.stagger(value, options)

参数	类型	信息	必需
值	`Number`、`String`、`Array`	操作的值	是
选项	`对象`	交错参数	否

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

起始值

从特定值开始交错效果。

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

类型	信息
`Number`、`String`	与属性值相同，请参阅值部分

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

范围值

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

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

起始位置

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

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

选项	类型	信息
`'first'`（默认值）	`'字符串'`	从第一个元素开始效果
`'last'`	`'字符串'`	从最后一个元素开始效果
`'center'`	`'字符串'`	从中间开始效果
`索引`	`数字`	从指定的索引开始效果

方向

更改交错操作的顺序。

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

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

缓动函数

使用缓动函数交错值。

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

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

网格

基于允许“波纹”效果的二维数组交错值。

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

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

轴

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

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'`	在前一个动画结束 200 毫秒后开始
字符串	`'-='`	`'-=200'`	在前一个动画结束 200 毫秒前开始
数字	`数字`	`100`	在 100 毫秒处开始，无论动画在时间轴中的位置如何

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

参数继承

父时间轴实例中设置的一些参数可以被所有子动画继承。

可以继承的参数
`目标对象`
`缓动函数`
`持续时间`
`延迟`
`结束延迟`
`四舍五入`

控件

播放/暂停

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

animation.play();

暂停正在运行的动画。

animation.pause();

重新开始

从初始值重新开始动画。

animation.restart();

反转

反转动画的方向。

animation.reverse();

跳转

跳转到指定时间（以毫秒为单位）。

animation.seek(timeStamp);

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

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

时间轴控制

时间轴可以像任何其他anime.js实例一样进行控制。

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

回调和Promise

更新

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

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

开始和完成

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

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

如果动画的duration为0，则会调用begin()和complete()回调。

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

循环开始和循环完成

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

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

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

更改

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

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

更改开始和更改完成

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

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

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

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

完成Promise

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

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

IE < 11 不支持 Promise。

SVG

运动路径

相对于 SVG 路径元素的x、y和angle值来动画化元素。

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

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

运动路径动画从 v3 开始响应式。

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

变形

创建两个 SVG 形状之间的过渡。

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

有关 SVG 形状变形的更多信息，请点击此处。

线条绘制

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

strokeDashoffset: [anime.setDashoffset, 0]

有关线条绘制动画的更多信息，请点击此处。

缓动函数

线性

不对动画应用任何缓动时间。
适用于不透明度和颜色过渡。

easing: 'linear'

Penner 函数

内置的Robert Penner 缓动函数。

在easings.net上查看缓动函数的实际效果。

easing: 'easeInOutSine'

可用的缓动函数

进入	退出	进出	出进
`'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）来生成曲线的坐标。

弹簧

基于弹簧物理的缓动。

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

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

参数	默认值	最小值	最大值
质量	`1`	`0`	`100`
刚度	`100`	`0`	`100`
阻尼	`10`	`0`	`100`
速度	`0`	`0`	`100`

弹性

弹性缓动。

easing: 'easeOutElastic(amplitude, period)'

进入	退出	进出	出进
`'easeInElastic'`	`'easeOutElastic'`	`'easeInOutElastic'`	`'easeOutInElastic'`

参数	默认值	最小值	最大值	信息
振幅	`1`	`1`	`10`	控制曲线的超调量。此数字越大，超调量就越大。
周期	`.5`	`0.1`	`2`	控制曲线来回移动的次数。此数字越小，幕布来回移动的次数就越多。

步数

定义动画到达其结束值所需的跳跃次数。

easing: 'steps(numberOfSteps)'

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

自定义缓动函数

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

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

参数	信息
时间	返回动画的当前时间。

辅助函数

移除

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

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

anime.remove(targets);

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

animation.remove(targets);

获取

返回元素的原始值。

anime.get(target, propertyName, unit);

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

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

参数	类型	信息
目标对象	`'字符串'`、`变量`	可以使用任何有效的targets。

CSS 变换：只能访问内联值。

设置

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

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

参数	类型	信息
目标	`'字符串'`、`变量`	可以使用任何有效的targets。
值	`对象`	可以使用任何有效的属性。

随机数

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

anime.random(minValue, maxValue);

刻度

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

animation.tick(time)

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

正在运行

返回当前正在运行的所有活动anime.js实例的数组。

anime.running

在可见性更改时暂停

anime.suspendWhenDocumentHidden = false; // default true

默认情况下，切换选项卡时所有动画都会暂停，如果您想确保用户看到所有内容并且不会错过动画的重要部分，这很有用。
但是，您可以选择让动画正常运行而没有任何暂停，就像视频或音频轨道可以在后台连续播放一样。