在我搜索了很多问题之后,我找不到它。
所以,我的问题是:
我正在做一个网站,在第一页,我有一个'手'图片转移到公司' 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});
}
使用相同的库,他们可以同时进行此移动。
如何将第二个功能的呼叫回到第一个功能?
答案 0 :(得分: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});
您可以使用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);
}
希望这有帮助!
答案 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是您希望作为回调执行的函数。