Question

我有以下代码：

var mainTimeLine = new TimelineLite({paused:true});

var whiteGlow = "0px 0px 30px rgba(255,255,255,0.5), 0px 0px 30px rgba(255,255,255,0.5), 0px 0px 30px rgba(255,255,255,0.5), 0px 0px 30px rgba(255,255,255,0.5)";

var slide1 = document.getElementById("slide1"); //or use jQuery's $("#photo")
var circle11 = document.getElementById("circle1-1"); //or use jQuery's $("#photo")
var circle12 = document.getElementById("circle1-2"); //or use jQuery's $("#photo")
var backgroundLines1 = document.getElementById("backgroundLines1"); //or use jQuery's $("#photo")
//TweenMax.to(backgroundLines1, 2, {right:"100px", repeat:-1, ease:Linear.easeNone});

var text11 = document.getElementById("text1-1"); //or use jQuery's $("#photo")
var text12 = document.getElementById("text1-2"); //or use jQuery's $("#photo")
var text13 = document.getElementById("text1-3"); //or use jQuery's $("#photo")
var man1 = document.getElementById("man1"); //or use jQuery's $("#photo")
var idgLogo = document.getElementById("idg-logo"); //or use jQuery's $("#photo")

var slide2 = document.getElementById("slide2"); //or use jQuery's $("#photo")

var slide3 = document.getElementById("slide3"); //or use jQuery's $("#photo")

//slide1.style.display = 'block';

//slide1.style.display = 'block';
var slide11Timeline = new TimelineLite();
var slide12Timeline = new TimelineLite();

var slide1Timeline = new TimelineLite({paused:false});


slide11Timeline.add([
        TweenLite.to(slide1, 0, {left:"0"}),
        TweenMax.to(circle11, 60, {rotation:360, repeat:-1, ease:Linear.easeNone}),
        TweenMax.to(circle12, 60, {rotation:-360, repeat:-1, ease:Linear.easeNone}),
        TweenLite.from(circle11, 10, {opacity:"0.0"}),
        TweenLite.from(circle12, 10, {opacity:"0.0"}),
        TweenLite.from(text11, 1, {opacity:"0.0"})
    ]);

slide12Timeline
    .from(text11, 1, {top:"-40px", ease:Expo.easeOut,delay:2})
    .to(text11, 2, {
        textShadow:whiteGlow
        //color:"#91ff00"
    })
    .from(text12, 1, {opacity:"0.0"})
    .from(text13, 1, {opacity:"0.0"})
    .from([idgLogo, man1], 1, {opacity:"0.0"})
    .to(slide1, 2, {left:"-10000", delay:2});


slide1Timeline.add([slide11Timeline,slide12Timeline]);


var slide21Timeline = new TimelineLite({paused:false});
slide21Timeline.to(slide2, 1, {left:"0"});

mainTimeLine.add(slide1Timeline);
mainTimeLine.add(slide21Timeline);

mainTimeLine.play();

目前slide1Timeline播放但slide21Timeline没有播放。我试图让他们一个接一个地玩...我已经尝试了各种各样但失败了...有人可以告诉我我做错了吗？

Answer 1

我相信问题是你在slide11Timeline中有一些无限重复的补间，所以它的totalDuration（）基本上是无限的。您正在使用add（）将它们放入mainTimeLine中，但请记住，默认情况下，add（）将使用时间轴的结尾作为插入点来对子项进行SEQUENCE。

由于第一个嵌套时间轴的持续时间非常长，因此您永远无法看到后续的slide21Timeline动画，因为它在将来的mainTimeLine上的位置为 WAAAAY 。

但不要担心 - 您可以完全控制插入点的位置 - 只需使用第二个参数add（）。以下是一些选项：

//to make them both start at 0 (run concurrently):    
mainTimeLine.add(slide1Timeline, 0);
mainTimeLine.add(slide21Timeline, 0);

//or to make slide21Timeline run at the 60-second spot of mainTimeLine:
mainTimeLine.add(slide21Timeline, 60);

另请注意，如果你想

Greensock嵌套时间轴的行为不符合预期

1 个答案: