Javascript 绿色锁定不透明度动画从0到1再返回

我使用这个Greensock命令来设置一组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。然后我创建了另外两个tweens来控制不透明度，一个使前0.75%的不透明度从0变为1，另一个使最后25%的不透明度从0变为0。我使用position参数将它们精确地放置在时间线上我想要的位置。如果不熟悉position参数，请参见

2） 使用3个tweens，并在最终不透明度上延迟：

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）的好处是，您可以将所有内容放在单个容器实例中，并将其作为一个整体进行控制（播放/暂停/反转/搜索），我发现调整计时更容易。如果你依赖大量的延迟，它可能会变得很麻烦，尽管在这种情况下它只是一个，所以没什么大不了的

---

快乐的吐温

我假设您希望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。然后我创建了另外两个tweens来控制不透明度，一个使前0.75%的不透明度从0变为1，另一个使最后25%的不透明度从0变为0。我使用position参数将它们精确地放置在时间线上我想要的位置。如果不熟悉position参数，请参见

2） 使用3个tweens，并在最终不透明度上延迟：

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）的好处是，您可以将所有内容放在单个容器实例中，并将其作为一个整体进行控制（播放/暂停/反转/搜索），我发现调整计时更容易。如果你依赖大量的延迟，它可能会变得很麻烦，尽管在这种情况下它只是一个，所以没什么大不了的

快乐的吐温

工作完美：）谢谢。工作完美：）谢谢。