Вложенные временные шкалы Greensock ведут себя не так, как ожидалось

У меня есть следующий код:

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

в данный момент слайд1Timeline воспроизводится, а слайд21Timeline — нет. Я пытаюсь заставить их играть один за другим... Я пробовал все виды и потерпел неудачу... может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно?


javascript gsap
person Brian    schedule 06.04.2013    source источник
comment
Во-первых, было бы здорово, если бы вы почистили код перед публикацией, предоставили html+css или, в идеале, пример JSFiddle. Отдельно стоит отметить, что GreenSock делает собственный выбор, поэтому вам не нужны ни getElementById, ни JQuery.   -  person Sergey Snegirev    schedule 06.04.2013

Ответы (1)


arrow_upward
3
arrow_downward

Я считаю, что проблема в том, что у вас есть несколько бесконечно повторяющихся твинов внутри slide11Timeline, поэтому totalDuration() в основном бесконечность. Вы используете add(), чтобы поместить их в mainTimeLine, но имейте в виду, что по умолчанию add() будет ПОСЛЕДОВАТЬ дочерние элементы, используя конец временной шкалы в качестве точки вставки.

Поскольку первая вложенная временная шкала имеет безумно большую продолжительность, вы никогда не увидите последующую анимацию 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);

Также обратите внимание, что если вы хотите

person Jack    schedule 07.04.2013
comment
Спасибо за это! На самом деле я понял свою проблему и решил ее, убрав бесконечную анимацию с временной шкалы и позволив ей просто работать отдельно и, следовательно, ничего не задерживать. - person Brian; 07.04.2013