tweenmax.staggerFromTo()如何控制一系列相同动画

tweenmax.staggerFromTo()如何控制一系列图片依次显现后又消失

TweenMax.staggerFromTo() 方法可以用来同时启动一系列相同的 Tween 动画，并在动画之间添加时间延迟。该方法的语法如下：

TweenMax.staggerFromTo(targets, duration, fromVars, toVars, stagger, onCompleteAll);

这个方法接收六个参数:

• targets: 要进行动画的目标元素数组或选择器字符串。
• duration: 动画持续时间，以秒为单位。
• fromVars: 定义动画开始状态的对象，包含各种属性和值。
• toVars: 定义动画结束状态的对象，包含各种属性和值。
• stagger: 单个动画之间的时间延迟，以秒为单位。可以使用数字、函数或字符串。
• onCompleteAll (可选): 当所有动画完成时调用的回调函数。

例：以下代码将从左侧缓慢滑入一组文本块：

TweenMax.staggerFromTo(".text-block", 1, { x: -200, opacity: 0 }, { x: 0, opacity: 1 }, 0.5);

例：使用 .text-block 类选择所有目标元素，并将它们从左侧移到他们的原始位置，并渐变到完全不透明，然后将它们放置在它们的初始位置。设置了单个动画之间的时间延迟为 0.5 秒，以实现分步动画的效果。

还可以将 stagger 参数设置为函数，在该函数中根据目标元素的索引或其他属性设置延迟时间。例如：

TweenMax.staggerFromTo(".text-block", 1, { x: -200, opacity: 0 }, { x: 0, opacity: 1 }, function(index) {
  return index * 0.2;
});

这个例子将根据文本块的索引，将每个文本块的动画延迟 0.2 秒。