交错动画(Stagger)

优质

小牛编辑

118浏览

2023-12-01

基础交错动画

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