运行后停止GSAP功能

问题描述

我对网络动画的概念非常陌生。

我现在正在开发“ Windows Hello动画”。

IN THIS CODE EXAMPLE- 第一次运行后如何停止动画，然后再触发另一个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

gsap html javascript svg