Greensock: TweenMax Перезапуск нескольких временных шкал

Я использую зеленую библиотеку анимации носков, чтобы сделать некоторые анимационные материалы. следующий мой код.Greensock: TweenMax Перезапуск нескольких временных шкал

код TweenMax:

var slide4 = (function() { 
    function animate() { 
    var timelineFour = new TimelineLite(); 
    timelineFour.to("#brand-welcome-para", 1, { 
     'margin-top': 0, 
     'opacity': 1, 
     'delay': 1 
     }) 
     .to("#slide-1-creator-icon", 0.6, { 
     'top': 300, 
     'left': 45, 
     'width': 155, 
     'height': 155, 
     ease: Elastic.easeOut 
     }) 
     .to("#avatar-one", 0.6, { 
     'left': 27, 
     rotation: '-360' 
     }) 
     .to("#avatar-two", 0.6, { 
     'left': 100, 
     rotation: '-360' 
     }) 
     .to("#avatar-four", 0.6, { 
     'left': '-50', 
     rotation: '360' 
     }) 
     .to("#cover-one", 1, { 
     width: 0, 
     ease: Linear.easeNone 
     }, 'firstLoop') 

    .to("#slide-1-tandem-icon", 0.6, { 
     'top': 300, 
     'width': 155, 
     'height': 155, 
     ease: Elastic.easeOut 
     }) 
     .to("#cover-one-two", 1, { 
     width: 0, 
     ease: Linear.easeNone 
     }) 

    .to("#slide-1-brand-icon", 0.6, { 
     'top': 300, 
     'right': 45, 
     'width': 155, 
     'height': 155, 
     ease: Elastic.easeOut 
     }) 
     .to("#cover-two", 2, { 
     width: 0, 
     ease: Linear.easeNone 
     }); 

    var timelineChild = new TimelineMax({ 
     repeat: -1, 
     onComplete: complete, 
     delay: 4 
    }); 
    timelineChild.to("#rotator", 1, { 
     rotation: -90, 
     delay: 1 
     }, 'firstLoop') 
     .to("#avatar-one", 1, { 
     rotation: -270, 
     delay: 1 
     }, 'firstLoop') 
     .to("#avatar-two", 1, { 
     rotation: -270, 
     delay: 1 
     }, 'firstLoop') 
     .to("#avatar-three", 1, { 
     rotation: -270, 
     delay: 1 
     }, 'firstLoop') 
     .to("#avatar-four", 1, { 
     rotation: -270, 
     delay: 1 
     }, 'firstLoop') 

    .to("#rotator", 1, { 
     rotation: -180, 
     delay: 1 
     }, 'secondLoop') 
     .to("#avatar-one", 1, { 
     rotation: -180, 
     delay: 1 
     }, 'secondLoop') 
     .to("#avatar-two", 1, { 
     rotation: -180, 
     delay: 1 
     }, 'secondLoop') 
     .to("#avatar-three", 1, { 
     rotation: -180, 
     delay: 1 
     }, 'secondLoop') 
     .to("#avatar-four", 1, { 
     rotation: -180, 
     delay: 1 
     }, 'secondLoop') 

    .to("#rotator", 1, { 
     rotation: -270, 
     delay: 1 
     }, 'thirdLoop') 
     .to("#avatar-one", 1, { 
     rotation: -90, 
     delay: 1 
     }, 'thirdLoop') 
     .to("#avatar-two", 1, { 
     rotation: -90, 
     delay: 1 
     }, 'thirdLoop') 
     .to("#avatar-three", 1, { 
     rotation: -90, 
     delay: 1 
     }, 'thirdLoop') 
     .to("#avatar-four", 1, { 
     rotation: -90, 
     delay: 1 
     }, 'thirdLoop') 

    .to("#rotator", 1, { 
     rotation: -360, 
     delay: 1 
     }, 'fourthLoop') 
     .to("#avatar-one", 1, { 
     rotation: 0, 
     delay: 1 
     }, 'fourthLoop') 
     .to("#avatar-two", 1, { 
     rotation: 0, 
     delay: 1 
     }, 'fourthLoop') 
     .to("#avatar-three", 1, { 
     rotation: 0, 
     delay: 1 
     }, 'fourthLoop') 
     .to("#avatar-four", 1, { 
     rotation: 0, 
     delay: 1 
     }, 'fourthLoop'); 

    function complete(timelineChild) { 
     timelineChild.restart(); // 0 sets the playhead at the end of the animation 
    } 
    } 

    function restart() { 
    timelineFour.restart(); 
    } 

    function getTimeline() { 
    return timelineFour; 
    } 

    return { 
    animate: animate, 
    restart: restart, 
    timeline: getTimeline 
    } 

})();

Я хочу, чтобы перезапустить этот график на нажатие кнопки с HTML.

источник

2015-12-28 Nilesh Mahajan

вы можете собрать скрипкой, пожалуйста? взглянув на ваш код, не совсем очевидно, что именно происходит _currently_. также покажите нам код, который вы пробовали для нажатия кнопки и пытаетесь перезапустить временную шкалу на нем. –

@TahirAhmed: Очень сложно скомпоновать весь рабочий код. поскольку представление получается с помощью углового маршрута. Именно поэтому я просто хочу знать, как я могу перезапустить два временных графика за один раз, используя одну из функций. –

возможно простые вызовы 'timelineFour.restart();' & 'timelineChild.restart();' будут делать внутри вашего обработчика щелчка. стреляя в темноте, потому что я не могу понять все это. вы, кажется, уже знаете это решение, я думаю. –

Вы можете использовать .restart() функцию, как описано в их документаций:

https://greensock.com/docs/#/HTML5/GSAP/TweenMax/restart/

//restarts, not including any delay that was defined 
myAnimation.restart(); 

//restarts, including any delay, and doesn't suppress events during the initial move back to time:0 
myAnimation.restart(true, false);

источник

2017-01-31 12:10:42 GibboK

Greensock: TweenMax Перезапуск нескольких временных шкал

ответ

Смежные вопросы