requestAnimationFrame(请求动画帧)

news2024/11/18 18:47:56

前言

在Web应用中,实现动画效果的方法比较多,Javascript 中可以通过定时器 setTimeout 来实现,css3 可以使用 transition 和 animation 来实现,html5 中的 canvas 也可以实现。除此之外,html5 还提供一个专门用于请求动画的API,那就是 requestAnimationFrame,就是请求动画帧。

1.什么是requestAnimationFrame?

MDN描述:window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

requestAnimationFrame是一个浏览器提供的用于执行动画的JavaScript方法。它允许我们按照浏览器的刷新率来调度动画帧,从而实现更加流畅和高效的动画效果。

大多数电脑显示器的刷新频率是 60Hz,大概相当于每秒钟重绘 60 次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此最平滑动画的最佳循环间隔是1000ms/60,约等于 16.6ms。

在之前,为了实现动画,常常使用setTimeout()或setInterval()方法来定时更新动画帧。然而,这种方法并不理想,因为它们受限于定时器的精度和浏览器在不同设备上的性能差异。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器 UI 线程队列中以等待执行的时间。如果队列前面已经加入了其他任务,那动画代码就要等前面的任务完成后再执行

requestAnimationFrame的出现解决了这个问题。它使用浏览器的刷新率作为参考,确保动画帧的更新在每一帧之间的间隔是最佳的,从而实现更加流畅和自然的动画效果。

2.如何使用requestAnimationFrame?

使用requestAnimationFrame非常简单。以下是基本的用法示例:

function animate() {
  // 执行动画逻辑

  timer=requestAnimationFrame(animate);
}

// 启动动画
let timer=requestAnimationFrame(animate);

//取消动画
 cancelAnimationFrame(timer);

在上面的示例中,我们定义了一个名为animate的函数,该函数包含了动画的逻辑。然后,我们使用requestAnimationFrame方法调用animate函数,从而开始动画的循环。在animate函数的结尾,我们再次调用requestAnimationFrame(animate),以便在下一帧继续更新动画。

这样做的好处是,requestAnimationFrame会自动根据浏览器的刷新率来调度动画帧。它会在每一帧开始之前自动调用我们提供的函数,从而创建流畅的动画效果。

案例

<html>
<head>
    <title>requestAnimationFrame</title>
    <style>
        #box {
            width: 500px;
            margin-top: 20px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <div id="box"></div>
    <script>
        window.onload = function () {
            var stratBtn = document.querySelector("#start"),
                stopBtn = document.querySelector("#stop"),
                box = document.querySelector("#box");
            var timer;
            stratBtn.addEventListener("click", () => {
                timer = requestAnimationFrame(test)
            });
 
            stopBtn.addEventListener("click", () => {
                cancelAnimationFrame(timer);
            });
            function test() {
                console.log(timer)
                box.style.height = `${timer}%`;
                timer= requestAnimationFrame(test)
            }
        }
    </script>
</body>
 
</html>

在这里插入图片描述

3. requestAnimationFrame与其他动画技术的比较

现在让我们将requestAnimationFrame与其他常见的动画技术进行比较。

1. setTimeout和setInterval

如前所述,setTimeout和setInterval方法在实现动画时存在一些问题,例如定时器的不准确性和性能差异。相比之下,requestAnimationFrame使用浏览器的刷新率作为参考,可以更好地保持动画的流畅性和性能。

2. CSS3过渡和动画

CSS3过渡和动画是通过CSS属性和关键帧来实现的动画效果。与requestAnimationFrame相比,CSS动画的语法更简单,而且在某些情况下性能更好。然而,CSS动画通常更适用于简单的动画效果,而对于更复杂的、需要动态计算的动画,使用JavaScript和requestAnimationFrame更为灵活和强大。

3. WebGL和Canvas

WebGL和Canvas是基于HTML5的高级绘图技术,可以创建复杂的图形和动画效果。它们通常与requestAnimationFrame结合使用,以便实现更复杂的动画和交互效果。requestAnimationFrame提供了一个精确的时间间隔,使得在每一帧之间对Canvas或WebGL上的图形进行适当的更新成为可能。

结论

requestAnimationFrame是一个强大的JavaScript方法,用于在网页上创建流畅和高效的动画效果。它利用浏览器的刷新率来调度动画帧,避免了定时器的不准确性和性能差异。与其他动画技术相比,requestAnimationFrame提供了更好的流畅性和性能,特别适用于复杂的动画效果和交互式应用程序。无论是在开发游戏、创建交互式界面还是实现视觉效果,requestAnimationFrame都是一个不可或缺的工具。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/736855.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VS2019使用入门

VS2019使用入门 1.Visual Studio任务栏图标显示变白2.从其他项目拷贝文件到当前项目参考文献 配置VS2019 实现简单的c人脸检测项目&#xff0c;可参考本人blog wndows平台VS2019OpenCVcmake简单应用。 1.Visual Studio任务栏图标显示变白 参考[1]&#xff0c;在命令提示符下输…

Wireshark简单使用教程

混合模式 混合模式就是在抓包的时候不轮是有线网络还是WIFI网络等都会将流量给打印出来 1.打开Wireshark抓包软件 2.点击捕获选择选项按钮 3.选中《在接口上使用混杂模式》 &#xff08;默认是开启的&#xff09; 过滤器 过滤器可以只筛选你要的数据包&#xff0c;下图箭…

JAVA主要日志输出工具

日志工具 SLF4J-JCL LOG4J-CORE LOGBACK SLF4J-SIMPLE JCL-OVER-SLF4J LOGBACK-CORE LOG4J LOG4J-API LOG4J-JUL LOG4J-JCL LOGBACK-ACCESS LOGBACK-CLASSIC SLF4-API SLF4J-LOGJ12 LOGBACK-CLASSIC LOG4J-SLF4J-IMPL JAVA日志体系概述 大家目前正在使用的日志输出工具 日志体…

剑指offer刷题笔记--Num41-50

1--数据流中的中位数&#xff08;41&#xff09; 主要思路&#xff1a; 维护两个优先队列&#xff0c;Q1大数优先&#xff0c;存储比中位数小的数&#xff1b;Q2小数优先&#xff0c;存储比中位数大的数&#xff1b; 当存储的数为偶数时&#xff0c;Q1.size() Q2.size(), 中位…

文献阅读笔记 # SimCSE: Simple Contrastive Learning of Sentence Embeddings

《SimCSE: Simple Contrastive Learning of Sentence Embeddings》EMNLP 2021 (CCF-B) Tianyu Gao†∗ Xingcheng Yao‡∗ Danqi Chen†作者来自普林斯顿计算机系和清华大学交叉信息研究院Code & Pre-trained Models 【研究对象】&#xff1a;Sentence Embedding&#xff…

ubuntu RPM should not be used directly install RPM packages, use Alien instead!

ubuntu RPM should not be used directly install RPM packages, use Alien instead! 所以我们最好下载deb版本的安装包 安装 参考文章

科技资讯|三星智能戒指资料曝光,智能穿戴发展新机遇

根据 Reddit 社区网友反馈&#xff0c;在 Beta 版三星 Health 应用中&#xff0c;发现了全新的“Ring Support”选项&#xff0c;暗示三星未来将会推出智能戒指产品。 三星内部正在开发健康追踪设备 Galaxy Ring&#xff0c;这款智能戒指配备 PPG&#xff08;光电容积脉搏波&…

【视觉SLAM入门】3. 相机模型,内外参,畸变推导

"瑾瑜匿瑕" 1. 相机模型和内参1.1 内参推导1.2 外参推导 2. 畸变2.1 径向畸变2.2 切向畸变 3. 深度信息3.1 算法测距3.2 物理测距 本节讨论围绕这个问题展开 机器人如何观测外部世界&#xff1f; \quad\large\textcolor{red}{机器人如何观测外部世界&#xff1f;} 机…

音频转文字怎么操作?这几个好用的音频转文字方法分享给你

想象一下&#xff0c;你在公交车上听到了一个超搞笑的笑话&#xff0c;想要记下来和朋友分享&#xff0c;但是又怕自己记漏或者记错了关键的部分。这时候&#xff0c;音频转文字的软件就能帮上大忙了&#xff01;你只需将录音导入到软件中&#xff0c;它就会像一位超级厉害的听…

4. Springboot快速回顾(@Mapper和@MapperScan)

springboot最重要的注解之一&#xff0c;因为有了Mapper注解&#xff0c;省去了在xml文件繁琐的配置 本文将对比介绍有无注解的区别&#xff0c;加深认识 目录 1 初次使用Mapper1.1 创建实体类Stu1.2 创建dao层接口1.3 创建service层接口和实现1.5 创建StuMapper.xml文件1.4 创…

岛屿数量 (力扣) dfs + bfs JAVA

给你一个由 ‘1’&#xff08;陆地&#xff09;和 ‘0’&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以假设该网格的…

【Linux】进程间通信 -- 命名管道 | mkfifo调用

小实验1.我们首先创建两个文件2.我们使用创建命名管道的命令mkfifo3.开始执行 在语言层面使用命名管道实现通信1.创建命名管道-函数mkfifo2.写入端代码3.读取端代码小细节&#xff1a; 小实验 1.我们首先创建两个文件 client.cpp: #include <iostream> using namespac…

《向量数据库指南》——什么是比较 Embedding?

目录 比较 Embedding 准备工作 示例 0:Marlon Brando 示例 1:国王与王后 示例 2:Apple,水果还是公司 欢迎回到向量数据库 101 系列教程。 之前的教程中,我们介绍了非结构化数据、向量数据库和 Milvus——全球最受欢迎的开源向量数据库。我们还简单介绍了 Embedding …

windows提权总结

文章目录 windows基础知识提权总结基础知识提权思路metasplit 提权反弹shell提权windows系统配置错误提权系统服务权限配置错误不带引号的服务路径提权注册键 AlwaysInstallElevated 本地dll劫持提权第三方提权sqlserver提权mysql提权MOF提权G6FTP提权 绕过UAC bypassuac远程终…

前端|HTML

参考视频&#xff1a;黑马程序员前端Html5教程&#xff0c;前端必备基础 目录 &#x1f4da;web标准 &#x1f4da;HTML认识 &#x1f407;HTML的概念 &#x1f407;开发工具 &#x1f407;HTML标签基础 ⭐️HTML骨架标签 ⭐️HTML元素标签分类 ⭐️HTML标签关系&#…

一款可源码交付的Java可视化建模规则引擎

规则引擎是一种根据规则中包含的指定过滤条件&#xff0c;判断其能否匹配运行时刻的实时条件来执行规则中所规定的动作的引擎。 规则引擎由推理引擎发展而来&#xff0c;是一种嵌入在应用程序中的组件&#xff0c;实现了将业务决策从应用程序代码中分离出来&#xff0c;并使用预…

FPGA纯verilog实现10G UDP协议栈,XGMII接口UltraScale GTY驱动,提供工程源码和技术支持

目录 1、前言2、我这里已有的UDP方案3、该UDP协议栈性能4、详细设计方案SFPSGMII收发接口模块AXIS FIFOUDP协议栈UltraScale FPGAs Transceivers Wizard GTY 5、vivado工程6、上板调试验证并演示准备工作查看ARPUDP数据回环测试 7、福利&#xff1a;工程代码的获取 1、前言 目…

SpringBoot原理分析 | 安全框架:Security

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Security Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架&#xff1b;提供一组可以在Spring应用上下文中配置的Be…

使用作用域函数简化您的 Kotlin 代码:释放对象的力量

使用作用域函数简化您的 Kotlin 代码&#xff1a;释放对象的力量 欢迎&#xff0c;亲爱的 Kotlin 爱好者&#xff01;厌倦了在处理对象时反复书写相同的代码吗&#xff1f;别担心&#xff01;Kotlin 的作用域函数来拯救你&#xff0c;为你的编码之旅增添优雅的色彩。在这篇有趣…

华为认证 | 7月底这门HCIA认证即将发布!

华为认证HCIA-Cloud Service V3.5&#xff08;中文版&#xff09;预计将于2023年7月31日正式对外发布。 为了帮助您做好学习、培训和考试计划&#xff0c;现进行预发布通知&#xff0c;请您关注。 01 发布概述 基于“平台生态”战略&#xff0c;围绕“云-管-端”协同的新ICT技…