javascript - 如何将 t2 时间线嵌套到 t1 时间线中？

Question

我有一个简单的动画。在动画结束时，其中一个对象的不透明度应该从 100% 变为 0% 并重复。但是它没有按预期工作。我想我只需要将 t2 时间线嵌套在 t1 中，但我尝试的一切都不起作用。

我对 JS 很陌生，所以任何建议都会很棒!

看看我的 Greensock Js

// Banner Animation
console.clear();
var wait = 100;



var tl = new TimelineMax();
var t2 = new TimelineMax({repeat:-1});

//drop in animation
tl

.from('#hl_E', 1.3, {top: -100, opacity: 0, ease: Power2.easeOut}) 
.from('#hl_D2', 1.3, {top: -100, opacity: 0, ease: Power2.easeOut}, '-=1.1') 
.from('#hl_M', 1.3, {top: -100, opacity: 0, ease: Power2.easeOut}, '-=.9')

.to('#hl_E', .3, {top: 20, left:-123, ease: Power2.easeOut}) 
.to('#hl_D2', .3, {top: 20, left:-43, ease: Power2.easeOut}, '-=.3') 
.to('#hl_M', .3, {top: 20, left:-43, ease: Power2.easeOut}, '-=.3')

.from('#hl_D1', .5, {left:-15, opacity: 0, ease: Power2.easeOut}, '-=.2') 
.from('#hl_A', .5, {bottom:-15, opacity: 0, ease: Power2.easeOut}, '-=.5') 
.from('#hl_O', .5, {top:-15, opacity: 0, ease: Power2.easeOut}, '-=.5')
.from('#hl_D3', .5, {left:-15, opacity: 0, ease: Power2.easeOut}, '-=.5')
.from('#hl_Z', .5, {right:-15, opacity: 0, ease: Power2.easeOut}, '-=.5')
.from('#hl_--', .5, {top:-10, opacity: 0, ease: Power2.easeOut}, '-=.5')
.from('#hl_-', .5, {left:-15, opacity: 0, ease: Power2.easeOut}, '-=.5')
.from('.logoGlow', 15.8, {opacity: 0, ease: Elastic.easeOut})

t2.to('.logoGlow', 1, {opacity: 0, yoyo:true})
.to('.logoGlow', 1, {opacity: 100, yoyo:true});

HTML

<div id="hl_D1" class="heroLogoAssets"> </div> 
<div id="hl_E" class="heroLogoAssets"> </div> 
<div id="hl_A" class="heroLogoAssets"> </div> 
<div id="hl_D2" class="heroLogoAssets"> </div> 
<div id="hl_M" class="heroLogoAssets"> </div> 
<div id="hl_O" class="heroLogoAssets"> </div> 
<div id="hl_D3" class="heroLogoAssets"> </div> 
<div id="hl_Z" class="heroLogoAssets"> </div> 
<div id="hl_-" class="heroLogoAssets"> </div> 
<div id="hl_--" class="heroLogoAssets"> </div>
</div> <!-- END heroLogo-Wrap -->
<div class="logoGlow"><img src="img/enterLogobg.png" width="777" height="189" alt=""/></div>
<div id="heroLinks-Wrap">

Answer 1

我创建了一个小CodePen为你。

因为您想要整个时间线t2至repeat和yoyo您可以在 constructor 中定义它:

var t2 = new TimelineMax({repeat:-1, yoyo:true});

然后你可以添加时间线t2至t1 。 t2将附加到 t1并在原始 t1 时开始执行完成。

t1.add(t2);

(我说原始是因为 t1 现在包含 t2 )

编辑:

如果您想要在原始的结尾之间经过一些时间 t1以及 t2 的开始您可以更改 position的t2将其添加到 t1 时:

t1.add(t2, '+=5');

现在t2将在原始后 5 秒开始 t1结束。