javascript - 嵌套时间线出现问题 : GreenSock for javascript

Question

我正在嵌套时间线。

代码如下:

timeLine.to(obj1,1.2,{css:{display:"block"}})  

nestedTimeline1 = new TimelineMax({repeat:1});

// initially obj2 is with opacity :0

nestedTimeline1.append(TweenLite.to(obj2,1.4,{css:{opacity:1,left:187,bottom:108}}))
nestedTimeline1.append(TweenLite.to(obj2,.5,{css:{opacity:0}}),-.8)

timeLine.append(nestedTimeline1);

当我这样做时:

timeLine.totalProgress(0);

我的动画将从第一个开始。但问题是 obj2 不透明度不会重置为 0。

我无法理解为什么会出现这个问题？

任何解决方案将不胜感激..

Answer 1

让我们从第一行开始。

您无法为 display:block 设置动画 - 没有可设置动画的数值。您可以将 opacity:0 动画设置为 opacity:1。

现在，让我们考虑下一个问题。
您正尝试在 1.4 秒内将opacity 动画设置为 1。
您的下一个补间将在 0.5 秒内将同一对象从任意位置动画到 0，偏移量为 -0.8 秒。

我不确定您是否看到这里的错误，但让我们将其分解为可视化表示。

-------------------------------------------------- <-- Tween 1
                           ---------------         <-- Tween 2

您看，Tween 2 先于 Tween 1 完成，因为您在时间线 0.8 秒内将其推回，并且它仅运行 0.5秒。因此，Tween 1 现在有最后 0.3 秒的时间来动画回到 opacity:1

另外，作为旁注，您可以使用便捷方法而不是 .append(TweenLite...
nestedTimeline1.to(...) 做同样的事情。