文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
交错动画(Stagger)
基础交错动画
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'
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论