javascript动画如何实现_如何使用requestAnimationFrame-js教程-PHP中文网

javascript动画如何实现_如何使用requestAnimationFrame

幻影之瞳

发布： 2025-12-12 16:58:02

原创

926人浏览过

requestAnimationFrame是浏览器专为动画设计的API，比setTimeout/setInterval更精准省电，按屏幕刷新率自动调度；需用布尔变量控制启停，推荐基于时间戳计算位移实现匀速动画。

javascript动画如何实现_如何使用requestanimationframe

JavaScript 动画的核心在于**平滑、高效地更新画面**，而 requestAnimationFrame（简称 rAF）正是浏览器专门为动画设计的 API。它比 setTimeout 或 setInterval 更精准、更省电、更契合浏览器刷新机制（通常 60fps），是现代 Web 动画的首选方式。

requestAnimationFrame 的基本用法

rAF 接收一个回调函数，该函数会在**浏览器下一次重绘前**被调用。它会自动根据屏幕刷新率调整执行节奏（如 60Hz 屏幕约每 16.7ms 一次），无需手动计算时间间隔。

简单示例：让一个 div 水平移动

let box = document.getElementById('box');
let left = 0;
<p>function animate() {
left += 2;
box.style.left = left + 'px';</p><p>// 继续下一帧
requestAnimationFrame(animate);
}</p><p>// 启动动画
requestAnimationFrame(animate);</p>

登录后复制

如何控制动画启停与暂停

rAF 本身不提供暂停/取消功能，需配合变量和逻辑控制：

用布尔值（如 isRunning）标记是否继续执行
停止时不再调用 requestAnimationFrame，自然中断循环
不需要“清除 ID”，rAF 没有类似 clearTimeout 的配套方法

let isRunning = true;
let left = 0;
<p>function animate() {
if (!isRunning) return; // 提前退出</p><p>left += 2;
box.style.left = left + 'px';</p><p>requestAnimationFrame(animate);
}</p><p>// 开始
requestAnimationFrame(animate);</p><p>// 停止
isRunning = false;</p>

登录后复制

实现基于时间的匀速动画（推荐）

上面例子中直接加固定值会导致速度受帧率影响（如卡顿时变慢）。更健壮的做法是**根据时间差计算位移**：

云模块网站管理系统3.1.03

云模块_YunMOK网站管理系统采用PHP+MYSQL为编程语言，搭载自主研发的模块化引擎驱动技术，实现可视化拖拽无技术创建并管理网站！如你所想，无限可能，支持创建任何网站：企业、商城、O2O、门户、论坛、人才等一块儿搞定！永久免费授权，包括商业用途；默认内置三套免费模板。PC网站+手机网站+适配微信+文章管理+产品管理+SEO优化+组件扩展+NEW Login界面.....目测已经遥遥领先..

查看详情

rAF 回调会传入一个高精度时间戳（DOMHighResTimeStamp）

let lastTime = 0;
const speed = 100; // px/s
<p>function animate(time) {
if (!lastTime) lastTime = time;
const deltaTime = (time - lastTime) / 1000; // 秒为单位
lastTime = time;</p><p>left += speed * deltaTime;
box.style.left = left + 'px';</p><p>requestAnimationFrame(animate);
}</p><p>requestAnimationFrame(animate);</p>

登录后复制

结合 CSS transform 提升性能

直接修改 left/top 会触发 Layout 和 Paint，开销大。推荐用 transform: translateX()，它只触发合成（Composite），由 GPU 加速：

把 box.style.left = ... 换成 box.style.transform = 'translateX(' + left + 'px)'
确保元素有 will-change: transform 或启用硬件加速（如 transform: translateZ(0)）可进一步优化

基本上就这些。rAF 不复杂但容易忽略时间控制和渲染优化，掌握这几点就能写出流畅、可维护的 JS 动画。

以上就是javascript动画如何实现_如何使用requestAnimationFrame的详细内容，更多请关注php中文网其它相关文章！