【问题标题】:Is it possible in GSAP to prevent the execution of 'onComplete' if the animation didn't reach its endpoint?如果动画未到达其端点,GSAP 是否可以阻止执行“onComplete”?
【发布时间】:2022-01-04 04:15:55
【问题描述】:

如果动画是

,有没有办法防止执行onComplete
  • 覆盖/中断或
  • 从来没有发生过(因为它是通过to()实现的,并且已经达到了价值)?

我认为 onInterrupt 可以用于此目的吗?如果有,怎么做?


更新:

这是一个 jsfiddle 示例: https://jsfiddle.net/2f1jbwra/2/


jsfiddle kill(): https://jsfiddle.net/2f1jbwra/4/
jsfiddle overwrite: "auto": https://jsfiddle.net/2f1jbwra/5/

【问题讨论】:

    标签: javascript animation callback gsap cancellation


    【解决方案1】:

    中断的补间(和时间线)不会调用它们的onComplete 回调,因为它们已被停止。因此,只需确保您的补间通过使用 overwrite: 'auto'overwrite: true 来杀死他们应该使用的补间。

    如果您实际上并未中断补间,则可以使用 .addEventListener()null 作为第二个参数来移除 onComplete 回调。

    如果您正在中断补间并且需要挂钩该事件,则可以使用 onInterrupt 回调,但在这种情况下这对您没有帮助。

    还值得注意的是,如果补间从未开始,则不会触发任何事件(包括 onComplete)。话虽如此,开始和结束值相同的补间(如您在问题中描述的情况)仍然像正常一样运行。只是您看不到任何变化,因为视觉上没有发生任何变化。

    仅供参考,如果您问像 in the GSAP forums 这样的 GSAP 特定问题,您更有可能获得更快的答案和额外的评论/有用信息和方法。

    【讨论】:

    • 感谢您的提示!我将在那里发布未来的 GSAP 问题。
    • 我已经测试了你的方法,但我似乎做错了什么,因为onComplete 仍在执行?另外,我在问题中添加了一个 jsfiddle 示例。
    • k,我假设我必须将补间对象存储在一个变量中并在触发新动画之前调用kill()
    • kill() 如果在变量中设置了overwrite: "auto",则不需要。我误读了文档并认为"auto" 是默认值(但实际上是false)。很抱歉收到垃圾邮件。
    • 经过一番思考,我确实对您答案的this 上下文有疑问。在演示中this 指的是全局对象。例如,如果在类中使用全局对象,我还会使用它吗?哪个对象拥有 EventListener?
    猜你喜欢
    • 2023-03-09
    • 1970-01-01
    • 1970-01-01
    • 2021-01-11
    • 2019-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-24
    相关资源
    最近更新 更多