Question

基础交错动画

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

anime.stagger(value, options)

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

anime({
  targets: '.basic-staggering-demo .el',
  translateX: 270,
  delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
});

设定交错开始值

从特定值开始产生交错效果。

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

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

anime({
  targets: '.staggering-start-value-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {start: 500}) // 延迟从500ms开始，然后每个元素增加100ms。
});

设定交错范围值

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

anime.stagger([startValue, endValue])

Type	Info
startValue	起始值
endValue	结束值

anime({
  targets: '.range-value-staggering-demo .el',
  translateX: 270,
  rotate: anime.stagger([-360, 360]), // 旋转将在-360deg到360deg之间均匀分布在所有元素之间
  easing: 'easeInOutQuad'
});

交错动画开始位置

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

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

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

anime({
  targets: '.staggering-from-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {from: 'center'})
});

交错动画方向

更改交错动画的顺序。

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

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

anime({
  targets: '.staggering-direction-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {direction: '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({
  targets: '.staggering-easing-demo .el',
  translateX: 270,
  delay: anime.stagger(300, {easing: 'easeOutQuad'})
});

网格交错

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

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

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

anime({
  targets: '.staggering-grid-demo .el',
  scale: [
    {value: .1, easing: 'easeOutSine', duration: 500},
    {value: 1, easing: 'easeInOutQuad', duration: 1200}
  ],
  delay: anime.stagger(200, {grid: [14, 5], from: 'center'})
});

网格交错方向

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

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

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

anime({
  targets: '.staggering-axis-grid-demo .el',
  translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}),
  translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}),
  rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}),
  delay: anime.stagger(200, {grid: [14, 5], from: 'center'}),
  easing: 'easeInOutQuad'
});