返回介绍

交错动画(Stagger)

发布于 2020-01-07 22:20:35 字数 4906 浏览 2135 评论 0 收藏 0

基础交错动画

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

anime.stagger(value, options)
ArgumentsTypeInfoRequired
ValueNumber, String, Array操纵值Yes
OptionsObject交错参数No
anime({
  targets: '.basic-staggering-demo .el',
  translateX: 270,
  delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
});

设定交错开始值

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

anime.stagger(value, {start: startValue})
TypesInfo
Number, String与propety值相同,参看 动画赋值章节
anime({
  targets: '.staggering-start-value-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {start: 500}) // 延迟从500ms开始,然后每个元素增加100ms。
});

设定交错范围值

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

anime.stagger([startValue, endValue])
TypeInfo
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})
OptionsTypeInfo
'first' (default)'string'从第一个元素开始效果
'last''string'从最后一个元素开始效果
'center''string'从中心开始效果
indexnumber从指定的索引启动效果
anime({
  targets: '.staggering-from-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {from: 'center'})
});

交错动画方向

更改交错动画的顺序。

anime.stagger(value, {direction: 'reverse'})
OptionsInfo
'normal' (default)正常交错方向,从第一个元素到最后一个元素。
'reverse'倒退交错方向,从最后一个元素到第一个元素
anime({
  targets: '.staggering-direction-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {direction: 'reverse'})
});

交错的时间曲线

使用easing函数设置交错值。

anime.stagger(value, {easing: 'easingName'})
TypeInfo
'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]})
TypeInfo
array2个值的数组,第一个值是行数,第二个是列数
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'})
ParametersInfo
'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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文