javascript中的动画如何实现_如何使用requestAnimationFrame优化

JavaScript动画本质是连续快速更新样式以产生动态错觉，推荐使用requestAnimationFrame（rAF）实现，因其与屏幕刷新同步、后台自动暂停、适配多设备刷新率且避免布局抖动。

JavaScript 中的动画本质是连续快速地更新元素的样式（比如位置、透明度、缩放等），让肉眼产生“动起来”的错觉。实现方式有多种，但 requestAnimationFrame（简称 rAF）是现代浏览器推荐的、最高效且与屏幕刷新节奏同步的方案。

基础动画原理：靠定时器也能动，但不推荐

过去常用 setTimeout 或 setInterval 每隔几毫秒修改一次样式，例如：

let left = 0;
setInterval(() => {
  left += 2;
  document.getElementById('box').style.left = left + 'px';
}, 16); // 约 60fps

立即学习“Java免费学习笔记（深入）”；

问题在于：它不关心浏览器是否准备就绪，可能在帧中间触发、造成丢帧或卡顿；页面不可见时仍执行，浪费资源；时间间隔难精准匹配刷新率（如 16.67ms）。

requestAnimationFrame 的核心优势

rAF 让动画“听从浏览器安排”，由系统在下一次重绘前自动调用回调函数，天然对齐屏幕刷新节奏（通常是 60Hz），还具备以下特点：

• 页面后台/标签页不可见时自动暂停，省电省性能
• 自动适配不同设备的刷新率（比如 iPad Pro 120Hz）
• 比 setTimeout 更顺滑，避免强制同步布局（layout thrashing）

如何正确使用 requestAnimationFrame 实现动画

关键不是“只调用一次”，而是“递归调用自己”，形成动画循环：

标签： javascript java seo 浏览器 回调函数 ipad ipad pro 重绘