前端动画requestAnimationFrame

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

备注 若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用 requestAnimationFrame()requestAnimationFrame() 是一次性的。

当你准备更新在屏动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒 60 次,但在大多数遵循 W3C 建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命,在大多数浏览器里,当 requestAnimationFrame() 运行在后台标签页或者隐藏的 <iframe> 里时,requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

DOMHighResTimeStamp 参数会传入回调方法中,它指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数,它们每一个都会接受到一个相同的时间戳,即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数,单位为毫秒,最小精度为 1ms(1000μs)。

DOMHighResTimeStamp 是一个 double 类型,用于存储毫秒级的时间值。这种类型可以用来描述离散的时间点或者一段时间(两个离散时间点之间的时间差)。

警告 请确保总是使用第一个参数(或其他一些获取当前时间的方法)来计算动画在一帧中的进度,否则动画在高刷新率的屏幕中会运行得更快。请参考下面示例的做法。


 

返回值

一个 long 整数,请求 ID,是回调列表中唯一的标识。是个非零值,没有别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数请求。

 浏览器兼容性


 

示例 

 index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="style.css" rel="stylesheet" type="text/css" /><title>InsCode</title>
</head>
<body><div class="container"></div><script src="script.js"></script>
</body>
</html>

 script.js

const requestAnimationFrame =window.requestAnimationFrame ||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame;const cancelAnimationFrame =window.cancelAnimationFrame ||window.mozCancelAnimationFrame ||window.webkitCancelAnimationFrame ||window.msCancelAnimationFrame;let div=document.querySelector('.container');
function animate() {// 执行动画逻辑div.style.height=div.offsetHeight+1+'px';div.style.width=div.offsetWidth+1+'px';timer=requestAnimationFrame(animate);if(div.offsetHeight>1000){cancelAnimationFrame(timer);}
}
let timer=requestAnimationFrame(animate);

style.css 

html{height: 100%;width: 100%;
}.container {text-align: center;padding: 4px;width:10px;background-color: aqua;
}

官网链接

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

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

相关文章

element el-date-picker组件 输入输出格式为时间戳

<!-- 时间戳 --><el-date-pickerv-model"time"value-format"timestamp"type"date"placeholder"选择日期"/>// 把 value-format"timestamp" 加入 就可以实现时间戳格式

IDA PRO 7.7 全局修改字体大小

转到IDA的安装目录&#xff0c;以我的为例&#xff0c;IDA的安装目录是&#xff1a; C:\Program Files (x86)\IDA_Pro_7.7\打开.css文件 IDA安装路径\themes\default\theme.css拉到最下面&#xff0c;找到如图所示的位置&#xff0c;把font-size修改成你想要的大小。 保存并验…

AI技术实现口语练习

大模型技术可以用于实现英语口语练习的以下几个方面&#xff0c;使用大模型技术实现英语口语练习是一种很有前途的方法。随着大模型技术的不断发展&#xff0c;我们可以期待英语口语练习将变得更加智能、高效和个性化。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发…

10.轮转数组

文章目录 题目简介题目解答解法一&#xff1a;使用额外的数组代码&#xff1a;复杂度分析&#xff1a; 解法二&#xff1a;数组反转代码&#xff1a;复杂度分析&#xff1a; 题目链接 大家好&#xff0c;我是晓星航。今天为大家带来的是 轮转数组 相关的讲解&#xff01;&#…

Linux 第二十七章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

党务政务服务热线|基于SSM的党务政务服务热线平台(源码+数据库+文档)

目录 基于SprinBootvue的党务政务服务热线平台 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2后台功能模块 5.2.1管理员功能模块 5.2.2部门功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; …

【6大模型让你的沟通汇报更有条理】项目管理常见问题大揭秘 03

6大模型让你的沟通汇报更有条理 虽然头脑中构思众多&#xff0c;一开口却发现空白一片&#xff1f; 工作表现出色&#xff0c;汇报时却总是支支吾吾不知从何说起&#xff1f; 生性腼腆&#xff0c;却难以避免需要站在众人面前发言&#xff1f; 阿道掐指一算&#xff1a;你需…

代码无界,创新无限!华为云开发者日 · 广州站来了!

5月23日&#xff0c;2024年首场华为云开发者日HDC.Cloud Day将在广州盛大举行。这场技术派对将为开发者们带来一场无与伦比的技术盛宴。在这里&#xff0c;开发者们将有机会现场聆听行业专家的精彩分享&#xff0c;深度了解众多前沿产品的最新技术和功能&#xff0c;并与行业专…

SVN 合并到 Git 时有文件大于 100 M 被限制 Push

如果有文件大小大于 100M&#xff0c;GitHub 是会被限制推送到仓库中的&#xff0c;大概率情况会显示下面的错误&#xff1a; remote: Resolving deltas: 100% (3601/3601), done. remote: error: Trace: aea1f450da6f2ef7bfce457c715d0fbb9b0f6d428fdca80233aff34b601ff59b re…

【matlab基础知识代码】(十六)代数方程的图解法多项式型方程的准解析解方法

>> ezplot(exp(-3*t)*sin(4*t2)4*exp(-0.5*t)*cos(2*t)-0.5,[0 5]), line([0 5],[0 0]) 验证 >> t0.6738; >> exp(-3*t)*sin(4*t2)4*exp(-0.5*t)*cos(2*t)-0.5 ans -2.9852e-04 >> ezplot(x^2*exp(-x*y^2/2)exp(-x/2)*sin(x*y)) >> hold on; …

跨境电商SHEIN、Etsy、Allegro自养号测评:轻松打造热销产品

在全球化电商市场中&#xff0c;SHEIN、Etsy和Allegro等平台凭借其独特的定位和运营策略&#xff0c;吸引了大量的卖家和买家。为了在这些平台上获得更好的业务表现&#xff0c;卖家们纷纷采用自养号测评的策略来提升产品的曝光度和信誉度。本文将详细探讨在SHEIN、Etsy和Alleg…

MHD、MQA、GQA注意力机制详解

MHD、MQA、GQA注意力机制详解 注意力机制详解及代码前言&#xff1a;MHAMQAGQA 注意力机制详解及代码 前言&#xff1a; 自回归解码器推理是 Transformer 模型的 一个严重瓶颈&#xff0c;因为在每个解码步骤中加 载解码器权重以及所有注意键和值会产生 内存带宽开销 下图为三…

AGV混合型电机驱动器|伺服控制器CNS-MI50H系列对电机的要求

混合型电机驱动器 CNS-MI50H系列涵盖CNS-MI50HB-A、CNS-MI50HBN-A、CNS-MI50HDN-A、CNS-MI50HSN-A型号&#xff0c;专为 AGV 舵轮控制需求设计&#xff0c;集成舵轮转向角度控制和驱动电机闭环控制。支持增量式编码器&#xff0c;霍尔传感器&#xff0c; 角度电位计&#xff0c…

UE 解决相同按键的按键事件只会执行一次的问题

在不同蓝图有同样按键的按键事件或者是同一个蓝图但是有很多个实例&#xff0c;默认都只会执行一次事件 因为&#xff1a; 勾选Consume Input&#xff1a;当这个选项被勾选时&#xff0c;意味着你的Actor会“消耗”这个输入事件&#xff0c;阻止它继续传播到其他可能也在监听相…

GEE错误——COPERNICUS/S2_SR_HARMONIZED(Level-2A)数据中不包含QA60波段解决方案(去云解决方案)

问题 我在屏蔽哨兵-2 协调图像集中有云层覆盖的像素时遇到了一个问题。云遮蔽功能是从 GEE 文档中获取的,因此运行正常。它使用的是 "QA60 "波段。 如果不屏蔽云层像素,图像就会出现在地图画布上: 但是,如果遮挡了多云像素,则不会显示图像: 原始代码 var se…

苹果电脑怎么安装crossover 如何在Mac系统中安装CrossOver CrossOver Mac软件安装说明

很多Mac的新用户在使用电脑的过程中&#xff0c;常常会遇到很多应用软件不兼容的情况。加上自己以前一直都是用Windows系统&#xff0c;总觉得Mac系统用得很难上手。 其实&#xff0c;用户可以在Mac上安装CrossOver&#xff0c;它支持用户在Mac上运行Windows软件&#xff0c;例…

TCP协议的确认应答机制

TCP&#xff08;Transmission Control Protocol&#xff09;是一种面向连接的、可靠的、基于字节流的传输层协议&#xff0c;它在网络通信中扮演着至关重要的角色。其中&#xff0c;确认应答机制是TCP协议中的一个核心概念&#xff0c;它确保了数据的可靠传输。本文将详细介绍J…

20240511每日运维----聊聊nignx改配置所有的nginx改完unknow

1、改配置所有的nginx改完unknow src/core/nginx.h src/http/ngx_http_header_filter_module.c src/http/ngx_http_special_response.c src/http/v2/ngx_http_v2_filter_module.c 2、make 3、去objs里面把nginx文件替换过去sbin/nginx

Xbox总裁:关闭游戏工作室 确保游戏质量与长期健康发展

易采游戏网5月11日消息&#xff0c;近日微软Xbox宣布关闭旗下四家知名游戏工作室&#xff0c;这一决策在游戏界引起了广泛关注。此举并非简单的资源调整&#xff0c;而是微软为确保旗下游戏质量&#xff0c;以及Xbox平台的长期健康发展所做出的重要战略部署。 被关闭的工作室包…

锐捷EWEB网管系统RCE漏洞

文章目录 免责声明漏洞描述漏洞原理影响版本漏洞复现修复建议 免责声明 该文章只为学习和交流&#xff0c;请不要做违法乱纪的事情&#xff0c;如有与本人无关 漏洞描述 锐捷网管系统是由北京锐捷数据时代科技有限公司开发的新一代基于云的网络管理软件&#xff0c;以"…