不可见时暂停动画的正确方法

Posted 2023-02-27

【中文标题】不可见时暂停动画的正确方法

【英文标题】：Proper way to pause animations when not in view

【发布时间】：2013-03-31 04:02:51

【问题描述】：

我想知道当用户滚动并且动画不在视图中时是否有适当的方法来暂停 requestAnimationFrame 动画？

requestAnimationFrame 在浏览器显示另一个选项卡时会自动执行此操作，但是否可以在用户滚动时执行此操作？

【问题讨论】：

可能吗？ - 是的。正确的方法？ - 取决于实现。

【参考方案1】：

唯一的方法是将你的代码分成小函数块。

当您向下滚动时，请跟踪滚动了多少。

您可以提供自己的自定义条件，并在函数执行完毕且未获得焦点后使用 window.cancelAnimationFrame()。

How to stop a requestAnimationFrame recursion/loop? https://developer.mozilla.org/en-US/docs/Web/API/window.cancelAnimationFrame