完成动画后将回调传递给 GreenSock答案

【问题标题】：Pass a callback to GreenSock when done with animating完成动画后将回调传递给 GreenSock
【发布时间】：2016-08-25 11:14:27
【问题描述】：

在我为我的问题搜索了很多 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});
}

他们使用同一个库，但同时进行这个动作。

如何将第二个函数回调到第一个函数？

【问题讨论】：

@Jamiec greensock.com/tweenmax

标签： javascript jquery animation gsap

【解决方案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
};

【讨论】：

【解决方案2】：

有两种方法可以实现这一点-

您可以简单地在fromTo 函数中使用onComplete 回调，如下所示-

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

您可以使用 TweenMax 库中的 eventCallback() 函数。在 TweenMax 文档中，eventCallback() 是这样做的-

获取或设置事件回调，如“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);
}
```

希望这会有所帮助！

【讨论】：

【解决方案3】：

您似乎正在为此使用 GreenSock 库，您应该创建一个 TimelineLite of 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 是您希望作为回调执行的函数。

【讨论】：