如何畅玩连续性游戏

问题描述

我想要连续性的工作方式。 但我不能只工作一次。

如果我使用重新启动方法，则可以继续操作。 但是，这并不酷。

我拍摄了gif动画。 请单击下面的链接。

https://gyazo.com/06622369ad530b9dc9a4cb5ee90b71dc

let flag = true;
  document.body.addEventListener("click",function () {
    if (flag) {
      startGrap.play();
      flag = false;
    } else {
      endGrap.play();
      flag = true;
    }
  });
  const startGrap = gsap
    .timeline()
    .addLabel("start")
    .to(property,0.5,{
      direction: -8.0,ease: "power2.out",})
    .to(property,0.7,{
      direction: 0.0,ease: "back.out(3.0)",})
    .to(
      property,0.8,{
        offsetZ: 0.0,ease: "power3.inOut",},"start"
    )
    .pause();

  const endGrap = gsap
    .timeline()
    .addLabel("start")
    .to(property,0.4,ease: "back.out(4)",{
        offsetZ: -500.0,"start"
    )
    .pause();

解决方法

也许我解决了方法。 我每次都会创建timelinelite实例。

但是我不认为这种方式更好。

https://gyazo.com/f9feaa276fa5e8a4b047d60adc39d610

document.body.addEventListener("click",function () {
    if (flag) {
      new TimelineLite()
        .addLabel("start")
        .to(property,0.5,{
          direction: -8.0,ease: "power2.out",})
        .to(property,0.7,{
          direction: 0.0,ease: "back.out(3.0)",})
        .to(
          property,0.8,{
            offsetZ: 0.0,ease: "power3.inOut",},"start"
        );
    } else {
      new TimelineLite()
        .addLabel("start")
        .to(property,0.4,ease: "back.out(4)",{
            offsetZ: -500.0,"start"
        );
    }
    flag = !flag;
  });