如何解决运行后停止GSAP功能
我对网络动画的概念非常陌生。
我现在正在开发“ Windows Hello动画”。
IN THIS CODE EXAMPLE- 第一次运行后如何停止动画,然后再触发另一个JS函数。
我尝试了很多事情,但无法正常工作。
请帮助我在哪里更改代码。
代码-
JS
var mainCtr = $("#main-ctr"),hello = $(".hello"),eyeLeft = $("#eye-left"),eyeRight = $("#eye-right"),eyeToLeft = $("#eye-to-left"),eyeToRight = $("#eye-to-right"),wink = $("#wink"),smileUp = $("#smile-up"),smileDown = $("#smile-down"),smile = $("#smile");
var tl = new TimelineMax({
repeat: -1,repeatDelay: .3,delay: .3
});
TweenMax.set([mainCtr,hello],{
opacity: 0
});
tl
.to(mainCtr,.3,{
opacity: 1
})
.to(smileDown,{
morphSVG: "#smile-up"
})
.to(smile,{
rotation: -30,transformOrigin: "center center",ease: Circ.ease
})
.to(smile,.9,{
rotation: 900,ease: Circ.easeInOut
})
.to(eyeLeft,{
morphSVG: "#eye-to-left",ease: Power2.ease
},"-=.3")
.to(eyeRight,{
morphSVG: "#eye-to-right",.1,{
scaleY: .25,transformOrigin: "center center"
})
.to(eyeRight,{
scaleY: 1
})
.to(hello,{
opacity: 1
},"-=.3")
.to(mainCtr,.6,{
delay: 1,opacity: 0
})
YOU CAN SEE THE CODE LIVE HERE
解决方法
我用您要查找的内容更新了Codepen:here
var mainCtr = $("#main-ctr"),hello = $(".hello"),eyeLeft = $("#eye-left"),eyeRight = $("#eye-right"),eyeToLeft = $("#eye-to-left"),eyeToRight = $("#eye-to-right"),wink = $("#wink"),smileUp = $("#smile-up"),smileDown = $("#smile-down"),smile = $("#smile");
var tl = new TimelineMax();
TweenMax.set([mainCtr,hello],{
opacity: 0
});
tl
.to(mainCtr,.3,{
opacity: 1
})
.to(smileDown,{
morphSVG: "#smile-up"
})
.to(smile,{
rotation: -30,transformOrigin: "center center",ease: Circ.ease
})
.to(smile,.9,{
rotation: 900,ease: Circ.easeInOut
})
.to(eyeLeft,{
morphSVG: "#eye-to-left",ease: Power2.ease
},"-=.3")
.to(eyeRight,{
morphSVG: "#eye-to-right",.1,{
scaleY: .25,transformOrigin: "center center"
})
.to(eyeRight,{
scaleY: 1
})
.to(hello,{
opacity: 1
},"-=.3")
仅当在第12行设置时间线时才需要删除repeat属性(如果设置了repeat:-1,这意味着它将是一个无限循环)。
要注意,我也更新了最后一行,因此微笑保持在那里。如果您希望它消失,那么您只需要在js文件末尾添加以下代码即可:
.to(mainCtr,.6,{
delay: 1,opacity: 0
})
,
您可以通过简单地从TimelineMax函数选项中删除repeat
和repeatDelay
并在动画完成后触发回调来实现此目的,您可以在TimelineMax函数如下:
onComplete
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。