17370845950

JavaScript动画核心是短时间连续修改CSS样式利用视觉暂留，推荐requestAnimationFrame+transform/opacity，避免触发布局的属性，可结合CSS transition由JS触发控制。

JavaScript 实现动画效果，核心就是在短时间内连续、有规律地修改元素的 CSS 样式属性（比如 left、top、transform、opacity、width 等），利用人眼的视觉暂留现象，让静态画面“动起来”。它不是一帧帧画图，而是靠反复更新样式+浏览器自动重绘来达成动态感。

用 setInterval 或 setTimeout 模拟逐帧更新

最基础的方式是手动控制时间间隔，逐步改变某个样式值：

• 比如让一个 div 从左到右匀速移动：每 16ms（约 60fps）把 element.style.left 增加 2px；
• 配合 parseInt(getComputedStyle(el).left) 获取当前值，避免字符串拼接出错；
• 记得在目标位置到达后清除定时器（clearInterval），否则会持续运行。

用 requestAnimationFrame 替代定时器（推荐）

这是更专业、更高效的做法，浏览器会自动按屏幕刷新节奏调度执行，不卡顿、不掉帧：

• 每次回调中计算新位置，更新样式，然后递归调用自身；
• 它会自动暂停不可见标签页中的动画，节省资源；
• 比 setInterval 更精准，尤其在高刷屏或性能波动时表现稳定。

修改 transform 和 opacity 性能最好

直接改 left、top 会频繁触发浏览器的布局（Layout）和绘制（Paint），很慢。而：

• transform: translateX(100px) 只影响合成层，走 GPU 加速，几乎不卡；
• opacity 也只触发合成（Composite），适合做淡入淡出；
• 现代动画应优先用 transform + opacity，避免操作 width、height、margin 等触发布局的属性。

结合 CSS 过渡（transition）与 JS 控制时机

不一定要纯 JS 写每一帧。常见组合方式：

• JS 负责“触发”——比如点击后给元素添加一个类名；
• CSS 定义该类名下的 transition: transform 0.3s ease, opacity 0.2s linear；
• 浏览器自动完成中间过渡帧，JS 只管开始和结束逻辑（如动画结束后移除类、回调通知）。

基本上就这些。关键不在“怎么写”，而在于理解“动画 = 样式随时间变化 + 浏览器重绘”。选对属性、用对 API、控制好节奏，动感自然就出来了。