Проведите обратный вызов в GreenSock, когда закончите с анимацией

Question

После того, как я много раз искал тень на мой вопрос, я не нашел его.

Итак, мой вопрос:

Я делаю сайт и на первой странице, у меня есть «рука» изображение движущегося в компании «логотип». После этого изображение логотипа компании перемещается, но только после завершения первого шага.

Мой код:

function hand() { 
    var hand = TweenMax.fromTo(".start .hand", 2.5, 
    {top: -300, left: -400, rotation: 10}, 
    {top: -300, rotation: 40, left: -300}); 
} 

Здесь рука перейти к этой позиции, используя библиотеку TweenMax.

И другая функция:

function bolas(){ 
    $('.bolinhas').css({display:'block'}); 

    var bolinha1 = TweenMax.fromTo(".start .bolinha1", 5.5, 
    {top: 150, left: -100}, 
    {top: 650, left: 100}); 

    var bolinha2 = TweenMax.fromTo(".start .bolinha2", 5.5, 
    {top: 150, left: -50}, 
    {top: 680, left: -200}); 

    var bolinha3 = TweenMax.fromTo(".start .bolinha3", 5.5, 
    {top: 100, left: -80}, 
    {top: 680, left: 290}); 

    var bolinha4 = TweenMax.fromTo(".start .bolinha4", 5.5, 
    {top: 80, left: -110}, 
    {top: 680, left: -250}); 

    var bolinha5 = TweenMax.fromTo(".start .bolinha5", 5.5, 
    {top: 100, left: -15,}, 
    {top: 650, left: -70}); 

    var bolinha6 = TweenMax.fromTo(".start .bolinha6", 5.5, 
    {top: 150, left: -20}, 
    {top: 680, left: 250}); 

    var bolinha7 = TweenMax.fromTo(".start .bolinha7", 5.5, 
    {top: -50, left: -10}, 
    {top: 650, left: -70}); 

    var bolinha8 = TweenMax.fromTo(".start .bolinha8", 5.5, 
    {top: -150, left: -160}, 
    {top: 680, left: -350}); 

    var bolinha9 = TweenMax.fromTo(".start .bolinha9", 5.5, 
    {top: -150, left: 10}, 
    {top: 680, left: 70}); 
} 

Используя ту же библиотеку, они делают это движение, но в то же время.

Как я могу сделать вызов второй функции в первую?

Answer 1

пытаются использовать onComplete:

var bolinha1 = TweenMax.fromTo(".start .bolinha1", 5.5, 
{top: 150, left: -100}, 
{top: 650, left: 100}, 
{onComplete:complete}); 

var complete = function() { 
    //do something 
}; 

Answer 2

Есть два способа достижения this-

1. Вы можете просто использовать onComplete обратный вызов внутри функции fromTo как

   ценам ниже

   var hand = TweenMax.fromTo(".start .hand", 2.5, 
          {top: -300, left: -400, rotation: 10}, 
          {top: -300, rotation: 40, left: -300}, 
          {onComplete: bolas}); 
   

2. Вы можете использовать eventCallback() функция из библиотеки TweenMax. Из документации TweenMax, вот что eventCallback() does-

   Получает или задает функцию обратного вызова событие, как "OnComplete", "OnUpdate", "OnStart", "onReverseComplete" или "onRepeat" (onRepeat относится только к TweenMax или TimelineMax) вместе с любыми параметрами, которые должны быть переданы этому обратному вызову.

   В вашем случае, вы можете просто достичь результата, делая this-

   function hand() { 
       var hand = TweenMax.fromTo(".start .hand", 2.5, 
           {top: -300, left: -400, rotation: 10}, 
           {top: -300, rotation: 40, left: -300}); 
       hand.eventCallback("onComplete", bolas); 
   } 
   

Надеется, что это помогает!

Answer 3

Кажется, вы с использованием библиотеки GreenSock для этого, вы должны создать TimelineLiteof your animations, некоторые псевдо-код в качестве объяснения:

//instantiate a TimelineLite  
var tl = new TimelineLite(); 

//add a from() tween at the beginning of the timline 
tl.from(head, 0.5, {left:100, opacity:0}); 

//add another tween immediately after 
tl.from(subhead, 0.5, {left:-100, opacity:0}); 

//use position parameter "+=0.5" to schedule next tween 0.5 seconds after previous tweens end 
tl.from(feature, 0.5, {scale:.5, autoAlpha:0}, "+=0.5"); 

//use position parameter "-=0.5" to schedule next tween 0.25 seconds before previous tweens end. 
//great for overlapping 
tl.from(description, 0.5, {left:100, autoAlpha:0}, "-=0.25"); 

Это легко дать обратный вызов этого кода, вы можете просто передать функцию внутри нового var tl;, который будет выглядеть следующим образом:

var tl = new TimelineLite({onComplete: functionX()});

Где является функции х функция, которую вы хотите выполнить, как обратный вызов.