如何防止在 GSAP 动画期间触发事件？

Question

我有一个像这样的 GSAP 动画：

window.addEventListener('keydown', ()=>{
     GSAP.to(this.box, {
     x: this.box.position.x + 4,
     duration: 1,
    }
});

我想将方框的 x 位置增加 4 的倍数，我上面的当前代码有效，但前提是用户等到 1 秒过去后再按下另一个键。然后它 0 -> 4 -> 8 等等

如果他们不等一秒钟，就会发生类似 0 -> 3.76 -> 6.45 的情况。这些数字会根据用户在按下另一个键之前等待的时间而变化。这是有道理的，因为我有效地取消了动画并使用当前位置（因为 1 秒还没有过去，它还没有达到 4），然后只是用当前位置重新运行动画（那不是4).

本质上，我想阻止 'keydown' 事件侦听器在 1 秒动画完全完成之前触发。

我该怎么做？

Answer 1

这应该有效：

class Test {
  constructor(el) {
    this.box = el

    window.addEventListener('keydown', () => {
      if (!this.tl || !this.tl.isActive()) {
        this.tl = gsap.to(this.box, {
          x: "+=4",
          duration: 1,
        })
        console.log("Moving to:", Math.floor(this.box.getBoundingClientRect().x))
      }
    });
  }
}

const test = new Test(box)

#box {
  width: 25px;
  height: 25px;
  background: blue;
}

<div id="box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/CSSRulePlugin.min.js"></script>

可能不是最干净的解决方案，gsap 是一个很棒的工具并且肯定有一些更好的方法来处理这种情况，但这是我想到的第一个 brutal 方法。

编辑：使用 isActive() 方法已经好一点了。

如何防止在 GSAP 动画期间触发事件？

How do I prevent an event from triggering during a GSAP animation?

javascript

events

dom-events

gsap