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

Greensock opacity animation from 0 to 1 and back again

本文关键字：返回 不透明度 动画 Greenstock      更新时间：2023-09-26

我使用这个Greenlock命令来制作一堆div的动画，每个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。我不知道该怎么处理。。。如果它可以在同一个命令内完成，或者如果我需要应用计时器之类的东西。我们非常感谢您的想法。

我假设你希望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。我使用position参数将它们准确地放置在时间线上我想要的位置。如果您不熟悉位置参数，请参阅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）的好处是，您可以将所有内容放入一个容器实例中，并将其作为一个整体进行控制（播放/暂停/反向/搜索），我发现调整时间更容易。如果你依赖大量的延迟，它可能会变得麻烦，尽管在这种情况下它只是一个，所以没什么大不了的。

花呢快乐！

相关文章：