Question

我使用这个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变为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变为1，第一个0.75％，另一个变回0，最后25％。我使用position参数将它们放在我想要的时间轴上。如果您不熟悉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）的好处在于，您可以将所有内容放入单个容器实例中并将其作为一个整体控制（播放/暂停/反向/搜索），并且我发现更容易调整时间。如果你依赖很多延迟，它会变得很麻烦，虽然在这种情况下它只是一个，所以它没什么大不了的。

快乐的补间！

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

1 个答案: