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之间设置动画。

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

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

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

你知道，Tween 2在 Tween 1之前完成，因为你在时间线0.8秒内将其推回，并且它只运行0.5秒。因此，Tween 1现在有最后0.3秒的动画回到opacity:1

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

嵌套时间轴中的问题：适用于javascript的GreenSock

1 个答案: