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

发布于 2025-01-29 02:35:20 字数 501 浏览 4 评论 0原文

我有一个类似的GSAP动画：

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

我想通过4的倍数将框的x位置递增，而我当前的代码上面有效，但是只有用户等待直到1秒钟才通过，然后按下另一个键。然后它进行0-＆gt; 4-＆GT; 8等。

如果他们不等待一秒钟，则发生的是0-＆gt; 3.76-＆gt; 6.45。这些数字会根据用户等待多长时间按下另一个键的时间而改变。这是有道理的，因为我有效地取消了动画并使用当前位置（因为1秒尚未通过，它尚未到4），然后将动画重新使用当前位置（这不是） 4）。

从本质上讲，我想防止触发“键盘”事件侦听器，直到完全完成1秒动画为止。

我该怎么做？

原文

I have a GSAP animation like this:

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

I want to increment the box's x position by multiples of 4, and my current code above works, but only if the user waits until 1 second has passed before pressing another key. Then it goes 0 -> 4 -> 8 etc.

If they don't wait a second, what happens is something like 0 -> 3.76 -> 6.45. These numbers change depending on how long a user waits before they press another key. This makes sense because I'm effectively cancelling the animation and using the current position (since 1 second hasn't passed yet, it wouldn't get to 4 yet) and then just rerunning the animation with the current position (that wasn't 4).

Essentially, I want to prevent the 'keydown' event listener from triggered until the 1 second animation has been fully completed.

How would I do that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梓梦 2025-02-05 02:35:20

这应该有效：

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可能不是最干净的解决方案，是一个很好的工具，并且肯定有更好的方法来处理这种情况，但这是我想到的第一种残酷方法。

编辑：
使用ISACTIVE（）方法已经好一点了。

This should work:

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>

Probably not the cleanest solution, gsap is a great tool and surely has some better way to handle this scenario, but this is the first brutal approach that came to my mind.

EDIT:
Using isActive() method is already a tiny bit better.

回复收藏 0 原文

~没有更多了~