如何在多个 Greensock 时间线中嵌套一个 Greensock 时间线？

Question

我正在尝试让一个时间线成为 greensock 中多个时间线的一部分。我想我需要做的是一个元素在两种情况下都需要动画，但在每种情况下都需要或另一个元素需要动画。

这是我目前所拥有的

var tl1 = new TimelineMax()
tl1.to(document.getElementById("one"), 0.5, { x: 10 })

var tl2 = new TimelineMax({ paused: true })

tl2.add(tl1)
tl2.to(document.getElementById("two"), 0.5, { x: 10 })

var tl3 = new TimelineMax({ paused: true })

tl3.add(tl1)
tl3.to(document.getElementById("three"), 0.5, { x: 10 })

tl2.play()

#one, #two, #three {
  width: 10px;
  height: 10px;
}

#one {
  background-color: hsl(0,70%,50%);
}
#two {
  background-color: hsl(100,70%,50%);
}
#three {
  background-color: hsl(200,70%,50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

也许有更好的方法来实现这个...

提前致谢

Answer 1

有很多方法可以做到这一点，但我首先要指出几点：

动画（补间动画或时间轴）只能有一个父级。在这个意义上，可以把它想象成一个 DOM 节点。所以你不能将 tl1 添加到 tl2 和 tl3。当您将它添加（）到一个时，它将从另一个中删除。
时间轴的暂停状态即使嵌套在另一个时间轴中也是如此。例如，如果您暂停 tl2，然后将其放入 tl3，然后 tl3.play()，您将看不到 tl2 播放，因为它仍处于暂停状态。
您可以只传入选择器文本作为目标，如果未加载 jQuery，GSAP 将使用 document.querySelectorAll()。因此，您可以只使用“#one”而不是 document.getElementById("one")（尽管用其他方式也完全可以）。
您不必首先暂停您的时间线然后立即调用 play() - 它们直到下一个 "tick" 才会呈现，所以暂停然后在同一个时间点播放是一种浪费。它不是 "wrong" 并且它不会改变任何东西的外观 - 它只是额外不必要的代码。

如果您的目标是让#one 在两个时间轴中从 x:0 到 x:10 设置动画，则您不必创建嵌套时间轴并尝试重复使用。相反，您可以将一个简单的 fromTo() 补间放入两者中。喜欢：

tl2.fromTo("#one", 0.5, {x:0}, {x:10})
   .fromTo("#two", 0.5, {x:0}, {x:10});
tl3.fromTo("#one", 0.5, {x:0}, {x:10})
   .fromTo("#three", 0.5, {x:0}, {x:10});

如果您确实想使用时间轴和嵌套，您仍然可以通过一种棘手的方式来实现 - 您可以创建 tl1（您想要重新使用的那个）作为最初暂停的，然后使用 tweenFromTo()从两个时间轴基本动画其播放头的方法。 tweenFromTo() 简单地吐出一个控制播放头的补间，因此您可以将该补间嵌套在另一个时间轴中（并创建多个执行相同操作的补间）。喜欢：

tl2.add(tl1.tweenFromTo(0, tl1.duration()));
tl3.add(tl1.tweenFromTo(0, tl1.duration()));

有帮助吗？

如何在多个 Greensock 时间线中嵌套一个 Greensock 时间线？

How do I nest a Greensock timeline in multiple Greensock timelines?

javascript

gsap