中文文档 | anime.js

动画的目标对象(targets)

CSS选择器

可使用任意CSS选择器作为动画目标

不可使用伪元素

Type	Default	Example
String	`null`	`targets: '.item'`

DOM元素 /元素序列

使用DOM节点或节点的集合作为动画目标

Type	Default	Example
DOM Node	`null`	`targets: el.querySelector('.item')`
NodeList	`null`	`targets: el.querySelectorAll('.item')`

Javascript对象

以JavaScript对象作为动画目标，这个对象必须含有至少一个数字属性。

Type	Default	Example
Object	`null`	`targets: myObjectProp`

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

数组

以数组作为动画目标。

Accepts mixed types. E.g. ['.el', domNode, jsObject]

Type	Default	Example
Array	`null`	`targets: ['.item', el.getElementById('#thing')]`

可动画的目标属性

CSS 属性

对目标的CSS属性进行动画。

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

可接受的数值设置信息可查看动画赋值部分。

Example	value
`opacity`	`.5`
`left`	`'100px'`

CSS3 transforms 属性

对CSS的transforms属性动画。

可以为每个变换属性指定不同的排序，具体可查看特殊属性部分。

可接受的数值设置信息可查看动画赋值部分。

Valid properties	Default unit
`'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'`

Javascript对象属性

包含数值的任何Object属性都可以设置动画。

可接受的数值设置信息可查看动画赋值部分。

Example	value
`prop1`	`50`
`'prop2'`	`'100%'`

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

DOM 属性

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

可接受的数值设置信息可查看动画赋值部分。

Example	value
`value`	`1000`
`volume`	`0`
`data-custom`	`'3 dogs'`

SVG 属性

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

可接受的数值设置信息可查看动画赋值部分。 SVG 动画可查看SVG 部分。

Example	value
`points`	`'64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'`
`scale`	`1`
`baseFrequency`	`0`

动画基础参数

duraion（持续时间）

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

Type	Default	Example
Number	`1000`	`3000`
anime.stagger	See staggering section	`anime.stagger(150)`
Function	See function based parameters section	`(el, i) => i * 150`

3000 ms

delay（延迟）

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

Type	Default	Example
Number	`0`	`1000`
anime.stagger	See staggering section	`anime.stagger(150)`
Function	See function based parameters section	`(el, i) => i * 150`

1000 ms

endDelay（末端延迟）

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

Type	Default	Example
Number	`0`	`1000`
anime.stagger	See staggering section	`anime.stagger(150)`
Function	See function based parameters section	`(el, i) => i * 150`

1000 ms

easing（时间曲线）

定义动画的时间曲线。

Check out the easings section for a complete list of available easing and parameters.

Type	Default	Example
String	`'easeOutElastic(1, .5)'`	`easing: 'easeInOutQuad'`

easeInOutExpo

round（数字格式）

将值向上舍入为x小数。

Type	Default	Example
Number	`0`	`round: 10`

特殊属性

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

Type	Example
Object	`rotate: { value: 360, duration: 1800, easing: 'easeInOutSine' }`

function 参数

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

function 接受三个参数:

Arguments	Infos
`target`	当前动画目标元素
`index`	动画目标的索引
`targetsLength`	总动画目标数

请参阅交错动画部分以便更轻松地操纵值。

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

方向和循环

direction（方向）

定义动画的方向。

Accepts	Infos
`'normal'`	正方向动画
`'reverse'`	反方向动画
`'alternate'`	往返

normal
reverse
alternate

loop（循环）

定义动画的往复次数。

Accepts	Infos
`Number`	循环次数
`true`	无限循环

normal 3 times
reverse 3 times
alternate 3 times
normal inifinite
inifinite reverse
inifinite alternate

autoplay（自动播放）

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

Accepts	Infos
`true`	开启自动播放
`false`	关闭自动播放

autoplay: true

autoplay: false

动画赋值方式

无单位数值

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

Type	Example
Number	`translateX: 250`

有单位数值

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

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

Type	Example
String	`width: '100%'`

相对数值

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

Accepts	Effect	Example
`'+='`	Add	`'+=100'`
`'-='`	Substract	`'-=2turn'`
`'*='`	Multiply	`'*=10'`

颜色

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

CSS color codes ( e.g. : 'red', 'yellow', 'aqua' ) are not supported.

Accepts	Example
Haxadecimal	`'#FFF'` or `'#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

设定动画初始值

强制动画以指定值开始。

Type	Example
`Array`	`['50%', '100%']`

函数返回数值

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

function 接受三个参数:

Arguments	Infos
`target`	The curently animated targeted element
`index`	The index of the animated targeted element
`targetsLength`	The total number of animated targets

关键帧(keyframes)

动画关键帧

动画关键帧是使用keyframes属性中的数组定义的。

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

Type	Example
`Array`	`[ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]`

属性关键帧

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

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

Type	Example
`Array`	`[ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]`

交错动画(Stagger)

基础交错动画

Stagger允许你通过跟随和重叠动作为多个元素设置动画。

anime.stagger(value, options)

Arguments	Type	Info	Required
Value	`Number`, `String`, `Array`	操纵值	Yes
Options	`Object`	交错参数	No

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

Types	Info
`Number`, `String`	与propety值相同，参看动画赋值章节

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])

Type	Info
`startValue`	起始值
`endValue`	结束值

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

交错动画开始位置

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

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

Options	Type	Info
`'first'` (default)	`'string'`	从第一个元素开始效果
`'last'`	`'string'`	从最后一个元素开始效果
`'center'`	`'string'`	从中心开始效果
`index`	`number`	从指定的索引启动效果

交错动画方向

更改交错动画的顺序。

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

Options	Info
`'normal'` (default)	正常交错方向，从第一个元素到最后一个元素。
`'reverse'`	倒退交错方向，从最后一个元素到第一个元素

交错的时间曲线

使用easing函数设置交错值。

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

Type	Info
`'string'`	All valid easing names are accepted
`function(i)`	Use your own custom easings function

网格交错

基于数组的交错值，以产生“波纹”效应。

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

Type	Info
`array`	2个值的数组，第一个值是行数，第二个是列数

网格交错方向

定义网格交错效果的方向。

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

Parameters	Info
`'x'`	沿着x轴
`'y'`	沿着y轴

时间轴(Timeline)

基础时间轴

时间轴可让你将多个动画同步在一起。
默认情况下，添加到时间轴的每个动画都会在上一个动画结束时开始。

创建时间轴：

var myTimeline = anime.timeline(parameters);

Argument	Type	Info	Required
`parameters`	`Object`	The default parameters of the timeline inherited by children	No

将动画添加到时间轴：

myTimeline.add(parameters, offset);

Argument	Types	Info	Required
`parameters`	`Object`	要添加到时间轴的子时间轴或动画	Yes
`time offset`	`String` or `Number`	偏移量，即动画添加到时间轴的位置。可为绝对位置或相对位置。	No

时间轴偏移量

可以使用时间轴的 .add()函数的第二个可选参数指定时间偏移。它定义动画在时间轴中的开始时间，如果未指定偏移，则动画将在上一个动画结束后开始。
偏移可以相对于最后一个动画，也可以相对于整个时间轴。

Type	Offset	Example	Infos
String	`'+='`	`'+=200'`	相对位置：在上一个动画结束后200ms开始
String	`'-='`	`'-=200'`	相对位置：在上一个动画结束前200ms开始
Number	`Number`	`100`	绝对位置：无论时间轴的上一个动画何时结束，这个动画都在100毫秒处开始

no offset
relative offset ('-=600')
absolute offset (400)

参数继承

父时间轴实例中设置的参数将由所有子项继承。

可被继承的参数
`targets`
`duration`
`delay`
`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);

时间轴控制

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

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

回调函数/事件函数

update

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

Type	Parameters	Info
Function	animation	返回当前动画对象

begin/complete事件

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

动画完成后，会触发一次complete()回调。

如果动画的持续时间为0，则begin()和complete()都会被调用。

Type	Parameters	Info
Function	animation	返回当前动画对象

loopBegin / loopComplete事件

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

每次循环结束时，就会触发一次loopComplete()回调函数。

Type	Parameters	Info
Function	animation	返回当前动画对象

change事件

在动画的delay和endDelay之间的每个帧上触发此回调。

Type	Parameters	Info
Function	animation	返回当前动画对象

changeBegin / changeComplete事件

每次动画改变开始时都会触发changeBegin()回调

每次动画改变结束时都会触发changeComplete()回调

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

Type	Parameters	Info
Function	animation	返回当前动画对象

promise

动画完成后，每个动画实例都会返回一个完成的promise。

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

Promises are not suported in IE < 11.

SVG

运动路径动画

动画一个元素，使之相对于SVG路径的x，y和角度值运动。

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

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

v3版本以后，运动路径动画具有响应性(responsive)

Parameters	Example	Info
`'x'`	`myPath('x')`	返回SVG路径的当前x值(`'px'`)
`'y'`	`myPath('y')`	返回SVG路径的当前y值(`'px'`)
`'angle'`	`myPath('angle')`	返回SVG路径的当前角度(`'degrees'`)

变形动画

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

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

更多变形动画信息

画线动画

anime.js使用anime.setDashoffset()方法获取到SVG路径的长度并将此长度设置为SVG的'stroke-dasharray'值，并返回该长度，再使用strokeDashoffset将SVG的'stroke-dashoffset'属性值在from to格式中产生动画从而创建路径绘制效果。

//从起点开始画完
strokeDashoffset: [anime.setDashoffset, 0] 

//从一半开始画完
strokeDashoffset: function(el) { var svgLength = anime.setDashoffset(el); return [svgLength*0.5, 0]; }

更多画线Demo

SVG画线原理（English）.

时间曲线(easing)

匀速

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

easing: 'linear'

不匀速

基于Robert Penner's easing functions.

请参阅easings.net上的更多信息。

easing: 'easeInOutSine'

Availabe easings :

in	out	in-out
`'easeInQuad'`	`'easeOutQuad'`	`'easeInOutQuad'`	由快至慢
`'easeInCubic'`	`'easeOutCubic'`	`'easeInOutCubic'`	由快至慢，效果更强
`'easeInQuart'`	`'easeOutQuart'`	`'easeInOutQuart'`	由快至慢，效果更强
`'easeInQuint'`	`'easeOutQuint'`	`'easeInOutQuint'`	由快至慢，效果更强
`'easeInSine'`	`'easeOutSine'`	`'easeInOutSine'`	由快至慢，比Quad弱
`'easeInExpo'`	`'easeOutExpo'`	`'easeInOutExpo'`	突然减速，效果较强
`'easeInCirc'`	`'easeOutCirc'`	`'easeInOutCirc'`	突然减速，效果较弱
`'easeInBack'`	`'easeOutBack'`	`'easeInOutBack'`	冲出终点后返回

三次贝塞尔

使用您自己的自定义立方Bézier曲线cubicBezier(x1, y1, x2, y2).

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

您可以使用像Caesar这样的Bézier曲线生成器来生成曲线坐标。

弹簧（spring）

类似于弹簧效果

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

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

Parameter	Default	Min	Max
Mass	`1`	`0`	`100`
Stiffness	`100`	`0`	`100`
Damping	`10`	`0`	`100`
Velocity	`0`	`0`	`100`

弹跳

弹跳效果

easing: 'easeOutElastic(amplitude, period)'

in	out	in-out
`'inElastic'`	`'outElastic'`	`'inOutElastic'`

Parameter	Default	Min	Max	Info
Amplitude	`1`	`1`	`10`	控制曲线的过冲
Period	`.5`	`0.1`	`2`	控制曲线来回的次数

台阶式

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

easing: 'steps(numberOfSteps)'

Parameter	Default	Min	Max
Number of steps	`10`	`1`	`∞`

自定义

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

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

Parameter	Info
Time	返回动画的当前时间

anime.js方法

删除目标

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

anime.remove(targets)

获取值

返回元素的原始值。

anime.get(target, propertyName, unit);

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

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

Parameter	Type	Info
target	`'string'`, `var`	Any valid targets can be used

CSS transforms : Only inlined values can be accessed.

设定值

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

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

Parameters	Types	Info
target(s)	`'string'`, `var`	Any valid targets can be used
values	`object`	Any valid properties can be used

随机数

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

anime.random(minValue, maxValue);

tick

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

animation.tick(time)

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

运行的对象

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

anime.running