运行后停止 GSAP 函数

Question

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

我正在开发“Windows你好动画”。

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, .3, {
    morphSVG: "#smile-up"
  })
  .to(smile, .3, {
    rotation: -30,
    transformOrigin: "center center",
    ease: Circ.ease
  })
  .to(smile, .9, {
    rotation: 900,
    transformOrigin: "center center",
    ease: Circ.easeInOut
  })
  .to(eyeLeft, .3, {
    morphSVG: "#eye-to-left",
    ease: Power2.ease
  }, "-=.3")
  .to(eyeRight, .3, {
    morphSVG: "#eye-to-right",
    ease: Power2.ease
  }, "-=.3")
  .to(eyeRight, .1, {
    scaleY: .25,
    transformOrigin: "center center"
  })
  .to(eyeRight, .1, {
    scaleY: 1
  })
  .to(hello, .3, {
    opacity: 1
  }, "-=.3")
  .to(mainCtr, .6, {
    delay: 1,
    opacity: 0
  })

YOU CAN SEE THE CODE LIVE HERE

Answer 1

我用你要找的东西更新了你的代码笔：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, .3, {
    morphSVG: "#smile-up"
  })
  .to(smile, .3, {
    rotation: -30,
    transformOrigin: "center center",
    ease: Circ.ease
  })
  .to(smile, .9, {
    rotation: 900,
    transformOrigin: "center center",
    ease: Circ.easeInOut
  })
  .to(eyeLeft, .3, {
    morphSVG: "#eye-to-left",
    ease: Power2.ease
  }, "-=.3")
  .to(eyeRight, .3, {
    morphSVG: "#eye-to-right",
    ease: Power2.ease
  }, "-=.3")
  .to(eyeRight, .1, {
    scaleY: .25,
    transformOrigin: "center center"
  })
  .to(eyeRight, .1, {
    scaleY: 1
  })
  .to(hello, .3, {
    opacity: 1
  }, "-=.3")

只需要在第12行设置时间轴时去掉repeat属性即可（如果设置repeat:-1，表示会无限循环）。

注意到我也更新了最后一行，所以微笑就在那里。如果你想让它消失，那么你只需要在你的js文件的末尾添加这段代码：

.to(mainCtr, .6, {
  delay: 1,
  opacity: 0
})

Answer 2

您可以通过简单地从 TimelineMax 函数选项中删除 repeat 和 repeatDelay 来实现这一点，并在动画完成后触发回调，您可以使用 onComplete 选项在 TimelineMax 函数中，如下所示：

var tl = new TimelineMax({
  delay: .3,
  onComplete: function(){
   alert('hello')
  }
});

运行后停止 GSAP 函数

Stop GSAP function after it runs

html

javascript

css

svg

gsap