Question

我试图让时间轴成为绿色摇滚中多个时间轴的一部分。我想我需要发生的是一个元素需要在两种情况下都有动画，但只有on或者其他需要在每种情况下都需要动画。

到目前为止我所拥有的是什么

＆＃13;

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()

＆＃13;

#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%);
}

＆＃13;

<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>

＆＃13;

也许有更好的方法来实现这一目标......

提前致谢

Answer 1

有很多方法可以实现这一目标，但我首先要指出一些事情：

动画（补间或时间轴）只能包含一个父级。从某种意义上来说，它就像一个DOM节点。所以你不能将（）tl1添加到tl2 和 tl3。当您将（）添加到一个时，它将从另一个中删除。
即使它嵌套在另一个时间线内，时间轴的暂停状态也会受到尊重。例如，如果你暂停tl2，然后将它放入tl3然后tl3.play（），你就不会看到tl2播放，因为它仍然暂停。
您只需传入选择器文本作为目标，如果没有加载jQuery，GSAP将使用document.querySelectorAll（）。因此，您可以使用＆＃34;＃one＆＃34;而不是document.getElementById（＆＃34; one＆＃34;）。（尽管从另一个角度来看它也很完美）。
您不必最初暂停时间线，然后立即调用play（） - 他们不会渲染直到下一个＆＃34; tick＆＃34;无论如何，如果停下来然后玩同样的嘀嗒是浪费的话。它没有＆＃34;错误＆＃34;并且它不会改变任何外观 - 它只是额外的不必要的代码。

如果您的目标是在两个时间轴中将#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时间轴？

1 个答案: