当前位置： 首页 > news >正文

requestAnimationFrame原理和使用

news 2026/2/10 10:38:49

requestAnimationFrame 是一个用于在浏览器中实现高效动画的方法。它告诉浏览器你希望执行一个动画，并在下一次重绘之前调用指定的回调函数来更新动画。浏览器会自动优化动画的刷新频率，以确保动画的流畅性和性能。

原理

  1. 帧刷新：浏览器通常以每秒 60 帧的频率刷新屏幕（即每 16.67 毫秒刷新一次）。
  2. 回调函数：requestAnimationFrame 接受一个回调函数作为参数，这个回调函数会在下一次屏幕重绘之前执行。
  3. 优化：浏览器会自动优化动画的刷新频率，确保动画在屏幕刷新时执行，从而避免不必要的重绘和性能问题。

使用方法

基本用法

requestAnimationFrame 回调函数的参数 timestamp 是一个高精度时间戳，用于计算动画的进度。

function animate(timestamp) {// 更新动画状态console.log('Animating...');// 请求下一帧requestAnimationFrame(animate);
}// 开始动画
requestAnimationFrame(animate);

示例：移动一个元素

以下是一个使用 requestAnimationFrame 实现简单动画的示例，移动一个元素从左到右：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>requestAnimationFrame Example</title><style>#box {width: 50px;height: 50px;background-color: red;position: absolute;top: 50px;left: 0;}</style>
</head>
<body><div id="box"></div><script>const box = document.getElementById('box');let start = null;function step(timestamp) {if (!start) start = timestamp;const progress = timestamp - start;box.style.left = Math.min(progress / 10, 200) + 'px';if (progress < 2000) { // 动画持续 2 秒requestAnimationFrame(step);}}requestAnimationFrame(step);</script>
</body>
</html>

取消动画

可以使用 cancelAnimationFrame 取消一个已经请求的动画帧。requestAnimationFrame 返回一个请求 ID，可以用这个 ID 取消动画。

let animationId;function animate() {// 更新动画状态console.log('Animating...');// 请求下一帧animationId = requestAnimationFrame(animate);
}// 开始动画
animationId = requestAnimationFrame(animate);// 取消动画
cancelAnimationFrame(animationId);

总结

requestAnimationFrame 是实现高效动画的推荐方法。它利用浏览器的优化机制，确保动画在屏幕刷新时执行，从而提高性能和流畅度。通过理解其原理和使用方法，可以编写出高效的动画代码。

相关文章：

requestAnimationFrame原理和使用

requestAnimationFrame 是一个用于在浏览器中实现高效动画的方法。它告诉浏览器你希望执行一个动画&#xff0c;并在下一次重绘之前调用指定的回调函数来更新动画。浏览器会自动优化动画的刷新频率&#xff0c;以确保动画的流畅性和性能。 原理 帧刷新&#xff1a;浏览器通常…...

编程日记 2024/9/10 2:55:26

线程的状态（java）

“苦&#xff1f; 何止是苦~~~~~” 本期内容来分享一下线程状态相关的知识哦&#xff01;&#xff01;&#xff01; 对于进程来说&#xff0c;进程是有两种状态的。 一种是就绪状态&#xff1a;正在CPU上执行&#xff0c;或者随时可以去CPU上执行的。 另一种是阻塞状态&…...

编程日记 2024/9/10 2:53:23

Linux IO模型：IO多路复用

● 应用程序中同时处理多路输入输出流&#xff0c;若采用阻塞模式&#xff0c;得不到预期的目的&#xff1b; ● 若采用非阻塞模式&#xff0c;对多个输入进行轮询&#xff0c;但又太浪费CPU时间&#xff1b; ● 若设置多个进程/线程&#xff0c;分别处理一条数据通路&#xff…...

编程日记 2024/9/10 2:51:21

[数据集][目标检测]电梯内广告牌电动车检测数据集VOC+YOLO格式2787张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2787 标注数量(xml文件个数)&#xff1a;2787 标注数量(txt文件个数)&#xff1a;2787 标注…...

编程日记 2024/9/10 2:50:20

MATLAB下载详细教程及下载链接

欢迎大家进评论区交流经验 1. 准备工作 下载MATLAB安装包&#xff1a;首先&#xff0c;从MathWorks官方网站&#xff08;http://www.mathworks.com&#xff09;下载适合您操作系统的MATLAB安装包。确保选择与您的操作系统&#xff08;如Windows、macOS或Linux&#xff09;兼容的…...

编程日记 2024/9/10 2:47:16

利用发电量和气象数据分析来判断光伏仿真系统的准确性

随着光伏产业的迅速发展&#xff0c;光伏仿真系统通过集成气象数据分析、发电量分析、投融资分析及损耗估算等功能&#xff0c;为光伏项目的全生命周期管理提供了科学依据。 光伏仿真系统集成了气象数据分析、发电量预测、投融资分析、损耗估算及光伏设计等功能。其中&#xf…...

编程日记 2024/9/10 2:46:15

Model-based RL动态规划(基于价值、基于策略，泛化迭代)

白盒环境和黑盒环境 白盒环境&#xff1a;知道环境的状态转移函数P(s’|s)或P(s’|s,a)和奖励函数R(s)或R(s,a)&#xff1a; 　　白盒环境下的学习相当于直接给出了有监督学习的数据分布&#xff08;就是有了目标靶子&#xff09;&#xff0c;不需要采样了&#xff0c;直接最小…...

编程日记 2024/9/10 2:45:14

外接串口板，通过串口打开adb模式

一、依赖库 import subprocess import serial from serial.tools import list_ports import logging import time 二、代码 import subprocessimport serial from serial.tools import list_ports import logging import timedef openAdb(com):# com []# for i in list_por…...

编程日记 2024/9/10 2:44:13

ssm微信小程序校园失物招领论文源码调试讲解

第二章 开发技术与环境配置 以Java语言为开发工具&#xff0c;利用了当前先进的SSM框架&#xff0c;以MyEclipse10为系统开发工具&#xff0c;MySQL为后台数据库&#xff0c;开发的一个微信小程序校园失物招领。 2.1 Java语言简介 Java是由SUN公司推出&#xff0c;该公司于20…...

编程日记 2024/9/10 2:43:12

iOS 15推出后利用邮件打开率的7种方法

自从苹果在2021年底推出iOS 15以来&#xff0c;邮件打开率就一直是一个让人头疼的指标。 Klaviyo市场情报主管Mindy Regnell表示&#xff1a;“对于启用了Apple邮件隐私保护&#xff08;MPP&#xff09;的用户来说&#xff0c;苹果会打开这些邮件并预先下载内容到他们的服务器…...

编程日记 2024/9/10 2:42:11

以太网--TCP/IP协议（一）

概述 以太网是局域网的一种&#xff0c;其他的比如还有令牌环、FDDI。和局域网对应的就是广域网&#xff0c;如Internet&#xff0c;城域网等。 从网络层次看&#xff0c;局域网协议主要偏重于低层&#xff08;业内一般把物理层、数据链路层归为低层&#xff09;。以太网协议…...

编程日记 2024/9/10 2:39:04

LeetCode刷题：找到第K大的元素

本题其实就是考察排序算法&#xff0c;为了减低时间复杂度&#xff0c;所以采用堆排序 import java.security.Key; import java.util.Scanner;public class FindKtopElements {public static void main(String[] args) {Scanner scanner new Scanner(System.in);String lin…...

编程日记 2024/9/10 2:38:03

HTML页面配置高德地图，获取位置

HTML页面配置高德地图&#xff0c;获取位置 一、使用情况 1、之前项目用的前后端分离框架&#xff0c;所以用Vue接入的高德地图&#xff0c;自动搜索补全&#xff0c;是请求的后台返回的数据。 2、现在用单体项目&#xff0c;前端是Bootstrap&#xff0c;需要接高德地图&…...

编程日记 2024/9/10 2:36:01

HTTrack

--不破不立 HTTrack 是一个免费开源的网站离线浏览器。通过它可以将整个网站下载到本地的某个目录&#xff0c;包括 html、图片和脚本以及样式文件&#xff0c;并对其中的链接进行重构以便于在本地进行浏览。 1.官网下载地址&#xff1a;https://www.httrack.com/page/2/en/in…...

编程日记 2024/9/10 2:33:59

干货分享|分享一款微软出品的工作效率神器 PowerToys

工具介绍&#xff1a;Microsoft PowerToys 是一组实用工具&#xff0c;可帮助高级用户调整和简化其 Windows 体验&#xff0c;从而提高工作效率。 安装步骤&#xff1a;直接打开微软商店安装即可&#xff0c;并且可以保证下载到最新版本。 功能介绍&#xff1a; 高级粘贴 高级…...

编程日记 2024/9/10 2:32:58

神经网络的线性部分和非线性部分

神经网络的线性部分和非线性部分是其构成中的两个核心元素&#xff0c;它们共同决定了模型的能力和行为。让我们分别看一下这两部分&#xff1a; 1. 线性部分 线性部分通常是指神经网络中的加权和操作。这部分可以用以下形式表示&#xff1a; [ z W \cdot x b ] W 是权重…...

编程日记 2024/9/10 2:31:48

微信支付开发避坑指南

1 微信支付的坑 1.1 不能用前端传递过来的金额 订单的商品金额要从数据库获取&#xff0c;前端只传商品 id。 1.2 交易类型trade type字段不要传错 v2版API&#xff0c;不同交易类型&#xff0c;要调用的支付方式也不同。 1.3 二次签名 下单时&#xff0c;在拿到预支付交…...

编程日记 2024/9/10 2:30:47

Qt5.4.1连接odbc驱动操作达梦数据库

Qt5.4.1连接odbc驱动操作达梦数据库 1 环境介绍2 Qt5.4.1 安装2.1 图形化界面安装Qt5.4.12.2 配置Qt5.4.1 环境变量2.3 Qt5.4.1 生成 libqsqlodbc.so 并配置2.3.1 生成Makefile2.3.2 查看 libqsqlodbc.so 文件并配置 3 配置Qt测试用例4 达梦数据库学习使用列表 1 环境介绍 CPU…...

编程日记 2024/9/10 2:29:45

计算机组成原理（第一课）

计算机系统概述 1.发展史 摩尔定律&#xff1a;集成电路上可以容纳的晶体管数目在大约每经过18个月到24个月便会增加一倍 2.操作系统组成 存储程序程序控制 五个部分记住&#xff1a; 输入输出功能 I/O 记忆功能 访问 计算功能 计算 判断功能 判断 自我控制功能 自我控制…...

编程日记 2024/9/10 2:26:36

计算机网络练级第一级————认识网络

目录 网络搁哪&#xff1f; 网络的发展史&#xff08;了解&#xff09; 独立模式&#xff1a; 网络互联&#xff1a; 局域网时期&#xff1a; 广域网时期&#xff1a; 什么是协议 TCP/IP五层/四层模型 用官话来说&#xff1a; 我自己的话来说 第一层应用层&#xff1…...

编程日记 2024/9/10 2:24:34

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2026/2/8 4:32:38

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2026/1/29 5:29:57

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2026/1/31 23:23:23

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2026/1/23 10:51:19