在html5中实现流畅动画的关键是使用 requestAnimationFrame（简称 rAF），它比传统的 setTimeout 或 setInterval 更适合动画渲染，能自动匹配屏幕刷新率，通常为每秒60帧，从而避免卡顿和掉帧。
为什么 requestAnimationFrame 更优？
rAF 的优势在于浏览器能主动优化多个动画的调度。它会在页面不可见时暂停调用，节省资源，并确保每一帧只执行一次重绘，减少性能浪费。
- 自动适配设备刷新频率（如60Hz、120Hz）
- 页面后台运行时暂停，提升性能
- 避免过度绘制，保证动画同步流畅
- 比 setTimeout 更精确控制渲染时机
基本使用方法
rAF 接收一个回调函数作为参数，该函数会在下一次重绘前被调用。通常通过递归调用自身来形成动画循环。
function animate() {
// 更新动画状态，例如移动元素位置
element.style.left = (x += 1) + ‘px’;
// 继续请求下一帧
requestAnimationFrame(animate);
}
// 启动动画
requestAnimationFrame(animate);
添加终止条件与控制逻辑
实际开发中，动画往往需要在满足某个条件时停止。可以通过变量控制是否继续请求下一帧。
立即学习“前端免费学习笔记（深入）”；
let isAnimating = true;
let position = 0;
function moveElement() {
if (!isAnimating) return;
position += 2;
element.style.transform = `translateX(${position}px)`;
if (position requestAnimationFrame(moveElement);
} else {
console.log(‘动画结束’);
}
}
requestAnimationFrame(moveElement);
结合时间差优化动画速度
为了使动画速度不受帧率波动影响，建议使用时间戳计算增量。rAF 的回调函数会传入一个 DOMHighRestimestamp 参数，表示当前帧开始的时间。
let startTime = NULL;
const duration = 1000; // 动画持续1秒
function fadeAnimation(timestamp) {
if (!startTime) startTime = timestamp;
const progress = timestamp – startTime;
const percent = math.min(progress / duration, 1);
// 线性变化透明度
element.style.opacity = 1 – percent;
if (percent requestAnimationFrame(fadeAnimation);
}
}
requestAnimationFrame(fadeAnimation);
基本上就这些。使用 requestAnimationFrame 构建动画循环，配合时间控制和状态判断，能让html5动画更流畅、更高效。不复杂但容易忽略细节。