Javascript 完成动画制作后,将回调传递给GreenSock
在我搜索了很多关于我的问题的答案之后,我没有找到它 所以,我的问题是: 我正在做一个网站,在第一页,我有一个“手”的形象移动到公司的“标志”。之后,公司徽标的图像会移动,但只有在第一次移动完成后才会移动 我的代码是:Javascript 完成动画制作后,将回调传递给GreenSock,javascript,jquery,animation,gsap,Javascript,Jquery,Animation,Gsap,在我搜索了很多关于我的问题的答案之后,我没有找到它 所以,我的问题是: 我正在做一个网站,在第一页,我有一个“手”的形象移动到公司的“标志”。之后,公司徽标的图像会移动,但只有在第一次移动完成后才会移动 我的代码是: function hand() { var hand = TweenMax.fromTo(".start .hand", 2.5, {top: -300, left: -400, rotation: 10}, {top: -300, rotation:
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
};
有两种方法可以实现这一点-
fromTo
函数中使用onComplete
回调,如下所示-
var hand = TweenMax.fromTo(".start .hand", 2.5,
{top: -300, left: -400, rotation: 10},
{top: -300, rotation: 40, left: -300},
{onComplete: bolas});
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);
}
希望这有帮助 您似乎正在利用GreenSock库来实现此目的,您应该创建一个
TimeLineSite
,一些伪代码作为解释:
//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是您希望作为回调执行的函数。@Jamiec