Passer un rappel à GreenSock lorsque vous avez terminé d'animer

Question

Après avoir beaucoup cherché pour une réponse à ma question, je ne l'ai pas trouvé.

Alors, ma question est:

Je fais un site Web et dans la première page, j'avoir une image « main » de passer à « logo » de l'entreprise. Après cela, l'image du logo de la société se déplace, mais seulement après le premier mouvement est terminé.

Mon code est:

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

Ici la main aller à cette position en utilisant la bibliothèque TweenMax.

L'autre fonction est:

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

En utilisant la même bibliothèque, ils font ce mouvement, mais en même temps.

Comment puis-je rappeler la deuxième fonction dans la première?

Answer 1

essayez d'utiliser 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

Il existe deux façons d'atteindre this-

1. Vous pouvez simplement utiliser la fonction de rappel onComplete dans la fonction fromTo comme dessous-

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

2. Vous pouvez utiliser le eventCallback() fonction de la bibliothèque TweenMax. De la documentation TweenMax, voici ce eventCallback() does-

   Obtient ou définit un rappel d'événement comme "onComplete", "onUpdate", "onStart", "onReverseComplete" ou "OnRepeat" (OnRepeat applique uniquement aux TweenMax ou Instances TimelineMax) avec tous les paramètres qui devraient être passés à ce rappel.

   Dans votre cas, vous pouvez simplement obtenir le résultat en faisant 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); 
   } 
   

Hope this helps!

Answer 3

Il semble que vous utiliser la bibliothèque GreenSock pour cela, vous devez créer un TimelineLiteof your animations, un code de pseudo comme une explication:

//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"); 

Il est facile de donner un rappel à ce code, vous pouvez simplement passer une fonction à l'intérieur de la nouvelle var tl; qui ressemblerait à:

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

où Yevol est la fonction que vous souhaitez exécuter comme rappel.