重置动画会删除GSAP的时间轴中的一个元素

Question

我应该做的是把诱饵扔出去，等待三波和一条鱼咬。鱼咬人时，诱饵必须看起来像被拖了下来，然后渔民才能得到诱饵。但是，获得诱饵并重新启动后，诱饵现在消失了。剩下的就是诱饵。

PS：投掷诱饵时，诱饵必须来自200px以上。它可以在我的PC上运行，但是在Codepen中，我不知道为什么它不能超过200px。

下面是我的动画代码。

mounted() {
  this.timeline = gsap.timeline()
},

methods() {
    throwBait(e) {
      let vue = this;

      this.animation = this.timeline
        .fromTo(
          [this.lure, this.bait],
          1.3,
          {
            css: {
              left: e.pageX - 25, // 25: Half of lure's width
              top: e.pageY - 200,
              scaleY: 0,
              scaleX: 0,
              visibility: "hidden"
            }
          },
          {
            ease: "elastic.inOut(1, 0.75)",
            css: {
              left: e.pageX - 25, // 25: Half of lure's width
              top: e.pageY,
              scaleY: 1,
              scaleX: 1,
              visibility: "visible"
            }
          },
          0
        )
        .fromTo(
          this.wave,
          2,
          {
            y: "-5",
            width: "0px",
            height: "0px",
            border: "1px solid white",
            opacity: 1
          },
          {
            y: "-=5",
            ease: "Linear.easeNone",
            width: "50px",
            height: "10px",
            border: ".1px solid white",
            visibility: "visible",
            repeat: 2,
            opacity: 0
          },
          1
        )
        .to(
          this.lure,
          1,
          {
            y: "-=5px",
            ease: "Linear.easeNone",
            yoyo: true,
            repeat: 6
          },
          0
        )
        .to(
          this.lure,
          1,
          {
            y: 20,
            ease: "power4.out"
          },
          6
        )
        .to(
          this.lure,
          0.5,
          {
            y: -100,
            ease: "power4.in",
            opacity: 0,
            scale: 0
          },
          6.5
        )
        .then(x => vue.reset());
    },

    reset() {
      this.timeline = gsap.timeline();
      this.timeline.time(0);
    },
}

Codepen

Answer 1

您忘记了将opacity的this.lure返回1

this.animation = this.timeline
  .set(this.lure, { opacity: 1, y: -5 }, 0)
  .fromTo(...)