使用 window.requestAnimationFrame 实现一个持续的动画效果

概述

window.requestAnimationFrame() 告诉浏览器,你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。window.requestAnimationFrame 的优势是利用了显示器的刷新机制,从而节省了系统资源(CPU\GPU 等)。显示器每秒最多只能重绘 60 次或 75 次,window.requestAnimationFrame 的基本思想就是与这个刷新频率保持同步,利用这个刷新频率进行页面重绘。

语法

window.requestAnimationFrame(callback);

cancelAnimationFrame 方法

cancelAnimationFrame 方法用于取消重绘。

浏览器兼容性

实例

文章及代码中如有问题,欢迎指正,谢谢!如果对您有帮忙~ 来个 Star 吧!!!

本文Github地址:使用 window.requestAnimationFrame 实现一个持续的动画效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容