一个始终续订 requestAnimationFrame 的循环,即使画面看起来不动,也可能继续做计算。这个玻璃效果采用按需唤醒:输入改变目标,且没有待执行帧时,才申请下一帧。

回弹结束的判断包含速度与剩余距离。只检查当前位置是否接近目标,可能刚好截在弹簧穿过目标的瞬间。波纹还要检查剩余能量。收敛后画出最终状态,并把帧编号清零。

离开视口、页面隐藏、组件卸载时,直接取消任务。用户在运行中开启减少动态效果,也要立即停止;只在初始化时检查一次偏好不够。

页面重新可见时,先恢复静态画面,等新的指针输入。清理时还要断开观察器与事件监听,避免旧组件留在内存里。

验收可以很具体:让波纹结束后查看性能记录,确认没有这个组件持续提交的帧回调;再切换标签页与系统动态效果设置,观察任务是否及时停止。

参考:Page Visibility API、减少动态效果偏好。