完成动画

时间:2016-08-25 11:14:28

标签: javascript jquery animation greensock

在我搜索了很多问题之后,我找不到它。

所以,我的问题是:

我正在做一个网站,在第一页,我有一个'手'图片转移到公司' logo'。之后,公司徽标的图像会移动,但只有在第一次移动完成后才会移动。

我的代码是:

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

使用相同的库,他们可以同时进行此移动。

如何将第二个功能的呼叫回到第一个功能?

3 个答案:

答案 0 :(得分:1)

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

  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()所做的 -

      

    获取或设置一个事件回调,如“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. 希望这有帮助!

答案 1 :(得分:0)

尝试使用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 :(得分:0)

看来你正在使用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是您希望作为回调执行的函数。