JavaScript动画应使用requestAnimationFrame而非setTimeout/setInterval，因其自动对齐屏幕刷新率、后台暂停、统一调度；需递归调用并设停止条件，配合transform/opacity等GPU加速属性及缓动函数实现高性能动画。
JavaScript 构建简单动画，核心不是靠 setTimeout 硬拖帧，而是用 requestAnimationFrame —— 它由浏览器调度，更顺滑、更省电、自动节流。
为什么不用 setInterval 或 setTimeout 做动画
它们不感知屏幕刷新节奏，容易丢帧或卡顿；在页面后台时仍运行，浪费资源；时间间隔难精准匹配 60fps（约 16.6ms/帧）。
-
requestAnimationFrame自动对齐显示器刷新率（通常是 60Hz），实际帧率可能更高或更低，但始终“该画才画” - 页面不可见时自动暂停，恢复可见后继续，无需手动控制
- 多个动画共存时，浏览器统一调度，避免互相抢占主线程
requestAnimationFrame 的基本写法和循环控制
它只执行一次，想持续动画必须在回调里递归调用自己。别忘了加停止条件，否则无限执行。
function animate() {
// 更新元素位置/透明度/旋转等
element.style.transform = `translateX(${x}px)`;
// 下一帧继续
if (x < 400) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
- 不要写成
requestAnimationFrame(animate())（带括号是立即执行） - 用
cancelAnimationFrame(id)可中途终止，requestAnimationFrame返回一个 ID，需提前保存 - 动画逻辑尽量轻量，避免在帧回调里做 DOM 查询、复杂计算或触发重排
配合 CSS transform 和 opacity 实现高性能动画
直接改 left、top 或 width 会触发 Layout（布局重排），开销大；而 transform 和 opacity 属于合成层属性，走 GPU 加速路径。
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
立即学习“Java免费学习笔记（深入）”；
- 优先用
transform: translateX()替代left，用transform: scale()替代width/height - 避免同时读写样式（如先
offsetLeft再改style.left），会强制同步 Layout - 如果动画元素内容不变，可加
will-change: transform提前提示浏览器提升图层（但别滥用）
简单缓动效果怎么加（不用库）
线性运动太机械，加个 ease-in-out 就自然得多。用时间比例 t（0→1）套入缓动函数即可，不需要完整贝塞尔曲线。
function easeInOut(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
function animate() {
const progress = Math.min(elapsedTime / duration, 1);
const eased = easeInOut(progress);
element.style.transform = translateX(${eased * 300}px);
if (progress < 1) requestAnimationFrame(animate);
}
- 时间计算建议用
performance.now()，比Date.now()更精确（微秒级） - 别在每次
requestAnimationFrame回调里重新计算起始时间，应在动画启动时记录一次startTime - 缓动函数返回值范围必须是 [0, 1]，否则位移会超界或反向
真正难的不是让东西动起来，而是动得准、动得省、动得可控——比如暂停/恢复、动态调整持续时间、与用户交互（如 hover 中断）无缝衔接。这些细节没封装好，再“简单”的动画也会在真实项目里露馅。
