动画本质是定时更新元素样式，通过 requestAnimationFrame 高频修改 transform 等不触发重排的 CSS 属性，以 60fps 实现流畅视觉效果，需避免与 CSS transition 冲突、强制同步布局及主线程阻塞。
动画本质是定时更新元素样式
JavaScript 动画不是“播放一段视频”，而是通过高频修改 DOM 元素的 CSS 属性（比如 transform、opacity），配合人眼视觉暂留效应，形成连续运动的错觉。关键在于：更新频率要稳定在 60fps（即每 16.67ms 一次），否则就会卡顿。
直接用 setTimeout 或 setInterval 控制帧率不可靠——它们不和屏幕刷新同步，容易掉帧、累积延迟。现代标准做法是使用 requestAnimationFrame（简称 raf），它由浏览器调度，自动对齐显示器刷新周期。
用 requestAnimationFrame 实现基础位移动画
下面是一个把一个 div 从左到右平滑移动 300px 的最小可行示例。注意它不是“一步到位”，而是拆成多步，在每一帧中计算当前位置并应用：
const el = document.getElementById('box');
let start = null;
const duration = 2000; // 动画总时长 2s
const from = 0;
const to = 300;
function step(timestamp) {
if (!start) start = timestamp;
const progress = Math.min((timestamp - start) / duration, 1);
const currentX = from + (to - from) * progress;
el.style.transform = translateX(${currentX}px);
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
立即学习“Java免费学习笔记（深入）”；
要点说明：
-
requestAnimationFrame回调接收的时间戳是高精度的（DOMHighResTimeStamp），比Date.now()更准，适合做差值计算 - 必须用
Math.min(..., 1)防止因微小延迟导致progress > 1，造成过冲 - 只改
transform和opacity这类可触发硬件加速且不触发重排（reflow）的属性，否则性能急剧下降
CSS 动画 vs JavaScript 动画：别混用 transition 和 raf
如果一个元素同时设置了 transition: transform 0.3s，又用 JS 每帧手动设 transform，会出现严重冲突：浏览器会在每一帧结束时尝试插值补间，反而破坏你精确控制的节奏，导致抖动或跳变。
正确做法是：
- 纯 JS 动画前，先清除可能存在的 CSS 过渡：
el.style.transition = 'none' - 动画结束后如需恢复过渡效果，再设回：
el.style.transition = 'transform 0.3s' - 避免在动画中读取
offsetLeft、getComputedStyle(el).height等会强制同步布局的属性（俗称 layout thrashing）
复杂动画建议交给 Web Animations API
手写 raf 循环适合学习原理或极简控制，但实际项目中推荐用原生 Element.animate() —— 它基于 raf 封装，支持时间轴控制（暂停/反向/速率调节）、事件监听（onfinish）、关键帧缓动，并且能被浏览器深度优化。
例如实现相同位移动画：
el.animate(
[
{ transform: 'translateX(0)' },
{ transform: 'translateX(300px)' }
],
{
duration: 2000,
easing: 'ease-out',
fill: 'forwards'
}
);注意点：
-
fill: 'forwards'是必须的，否则动画结束瞬间样式会回退到初始值 - 不支持 IE，如需兼容可引入
web-animations-jspolyfill - 它和 CSS
@keyframes逻辑一致，但完全运行在 JS 上，便于动态生成动画参数
真正难的从来不是“怎么动起来”，而是“动得准、停得稳、不抢主线程”。哪怕只是加个 loading 转圈，也要确认它没在每帧里查 DOM、没触发重排、没和 CSS transition 打架。
