当动画完成时，向GreenSock传递一个回调

Pass a callback to GreenSock when done with animating

本文关键字：回调 一个 完成时 动画 GreenSock      更新时间：2023-09-26

我找了很多问题的答案，但没有找到。

那么，我的问题是:

我正在做一个网站，在第一页，我有一个"手"图像移动到公司的"标志"。在那之后，公司标志的形象移动，但只有在第一次移动完成后。

我的代码是: 
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});
}

使用相同的库，它们在同一时间进行此移动。

如何将第二个函数调用回第一个函数?

尝试使用onComplete:

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

有两种方法可以做到这一点——

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

    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()是这样做的——

    获取或设置事件回调，如"onComplete"，"onUpdate"，"onStart"，"onreverseccomplete"或"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);
}

希望这对你有帮助!

似乎你正在利用GreenSock库为此，你应该创建一个TimelineLite的动画，一些伪代码作为解释:

//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是您希望作为回调执行的函数

相关文章：