Question

我有一个简单的动画。在动画结束时，其中一个对象的不透明度将从100％变为0％并重复。然而，它不起作用被删除。我想我只需要在t1中嵌套t2时间轴，但我尝试的所有东西都不起作用。

我对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的结束和{{1}的开始之间传递时间在将t2添加到position时，您可以更改t2的{{1}}：

t1

现在t1.add(t2, '+=5');将在原始 t2结束后5秒开始。

如何在我的t2时间轴中嵌入我的t1时间线？

1 个答案: