Greensock 不透明度动画从 0 到 1 再返回

Question

我使用这个 Greensock 命令来制作一堆 DIV 的动画，每个都包含一个 PNG 云：

var animation = TweenLite.fromTo(clouddiv, duration, {x:offX, y:offY, scaleX:scaler, scaleY:scaler, opacity:0, ease:Sine.easeOut}, {x:newX, y:50, scaleX:scaler/3, scaleY:scaler/3, opacity:1, ease:Sine.easeOut, onComplete:finishedProcessing, onCompleteParams:[thiscloud]});

它按预期工作，但有一个例外：我想在前 75% 的时间内将云的不透明度从 0 淡化到 1，然后在最后 25% 的时间内恢复到 0。我不确定如何处理这个......如果它可以在同一个命令中完成或者我是否需要应用计时器和东西。非常感谢您的想法。

Answer 1

我假设您希望 x/y/scaleX/scaleY 花费整个持续时间来完成他们的单一运动，而不透明度会在同一时间上升然后下降。如果我正确理解您的目标，有两种方法可以实现：

1) 使用时间轴并对补间进行排序：

var animation = new TimelineLite({onComplete:finishedProcessing, onCompleteParams:[thiscloud]});
animation.fromTo(clouddiv, duration, {x:offX, y:offY, scaleX:scaler, scaleY:scaler, ease:Sine.easeOut}, {x:newX, y:50, scaleX:scaler/3, scaleY:scaler/3, ease:Sine.easeOut})
  .fromTo(clouddiv, duration * 0.75, {opacity:0}, {opacity:1}, 0)
  .to(clouddiv, duration * 0.25, {opacity:0}, duration * 0.75);

注意第一个 fromTo() 控制 x、y、scaleX 和 scaleY。然后我创建另外两个补间来控制不透明度，一个使它在第一个 0.75% 中从 0 变为 1，另一个在最后的 25% 中返回到 0。我使用位置参数将它们准确地放置在时间轴上我想要的位置。如果您不熟悉位置参数，请参阅 http://greensock.com/position-parameter

2) 使用 3 个补间，并延迟最后一个不透明度：

TweenLite.fromTo(clouddiv, duration, {x:offX, y:offY, scaleX:scaler, scaleY:scaler, ease:Sine.easeOut}, {x:newX, y:50, scaleX:scaler/3, scaleY:scaler/3, ease:Sine.easeOut, onComplete:finishedProcessing, onCompleteParams:[thiscloud]});
TweenLite.fromTo(clouddiv, duration * 0.75, {opacity:0}, {opacity:1});
TweenLite.to(clouddiv, duration * 0.25, {opacity:0, delay:duration * 0.75});

使用时间线（选项 1）的好处是您可以将所有内容放入一个容器实例中并作为一个整体来控制它（play/pause/reverse/seek），而且我发现调整时间更容易。如果你依赖很多延迟，它会变得很麻烦，尽管在这种情况下它只是一个所以没什么大不了的。

补间快乐！

Greensock 不透明度动画从 0 到 1 再返回

Greensock opacity animation from 0 to 1 and back again

javascript

gsap