在完成动画处理后将回调传递给GreenSock

Question

在我为我的问题搜索了很多awnser之后，我没有找到它。

所以，我的问题是：

我在做一个网站，并在第一页，我有一个“手”图像移动到该公司的标志“。之后，公司徽标的图像会移动，但只有在第一步完成后才会移动。

我的代码是：

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

有两种方式来实现这 -

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. 您可以使用来自TweenMax库的eventCallback()函数。从TweenMax文档，这里是eventCallback() does-

   获取或设置事件回调像 “的onComplete”， “的onUpdate”， “在onStart”， “onReverseComplete” 或 “onRepeat”（onRepeat仅适用于TweenMax或TimelineMax实例）以及应传递给该回调的任何参数。

   在你的情况，你可以简单地做这个 -

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

哪里functionX是要执行的回调函数。