如何实现JavaScript动画_CSS动画是否更高效？

javaScript动画应优先使用requestanimationFrame而非setTimeout，因其与屏幕刷新同步、省资源；css动画更高效但仅限transform和opacity；js动画适用于依赖实时数据或复杂逻辑的场景。

javascript 动画靠 requestAnimationFrame，不是 setTimeout

用 setTimeout 或 setInterval 做动画会掉帧、卡顿，因为它们不和屏幕刷新同步。浏览器每秒刷新约 60 次（即 16.7ms 一帧），requestAnimationFrame 才是为此设计的 API —— 它自动对齐刷新节奏，且在标签页不可见时暂停执行，省资源。

实操建议：

• 永远用 requestAnimationFrame 替代 setTimeout 实现逐帧逻辑
• 动画逻辑里别做重计算或 dom 查询，把 offsetTop、getBoundingClientRect() 等提前缓存
• 避免在动画帧内修改多个样式属性，尤其触发 layout 的（如 width、height、top）

CSS 动画在多数场景下确实更高效

CSS 动画（@keyframes + animation）由浏览器渲染引擎直接驱动，关键帧可被硬件加速（尤其是 transform 和 opacity），不经过 JS 主线程，也不触发重排（reflow）。

但高效有前提：

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

• 只对 transform 和 opacity 做动画，其他属性（如 background-color、left）仍会触发重绘甚至重排
• 避免在动画中频繁切换 display: none 或改变 DOM 结构
• 用 will-change: transform 提前提示浏览器优化（但别滥用，会增加内存开销）

什么时候必须用 JavaScript 动画？

当动画依赖运行时数据、用户交互或复杂逻辑时，CSS 动画力不从心。比如：

• 跟随鼠标位置的视差效果（需实时读取 Event.clientX）
• 物理模拟（弹簧、重力、碰撞检测）—— 需要每帧计算速度/加速度
• 根据滚动进度动态插值的视差或渐变（window.scrollY 不可被 CSS 直接绑定）
• 需要精确控制暂停、反向、跳转到某一时间点（CSS 的 animation-play-state 和 animation-delay 太简陋）

此时推荐用 requestAnimationFrame + transform 更新，而非操作 top/left。

一个对比示例：移动方块

下面两个实现完成相同位移，但性能差异明显：

/* ✅ 推荐：CSS 动画（仅 transform） */ .box {   width: 100px;   height: 100px;   background: #007bff;   animation: slide 2s ease-in-out; } @keyframes slide {   from { transform: translateX(0); }   to { transform: translateX(300px); } }

/* ⚠️ 可行但低效：JS 改 top/left（触发重排） */ function badAnimate() {   let pos = 0;   function step() {     el.style.left = pos + 'px'; // ❌ 触发 layout     pos += 5;     if (pos < 300) requestAnimationFrame(step);   }   step(); }

/* ✅ 可控且高效：JS + transform */ function goodAnimate() {   let pos = 0;   function step() {     el.style.transform = `translateX(${pos}px)`; // ✅ 合成层，不重排     pos += 5;     if (pos < 300) requestAnimationFrame(step);   }   step(); }

CSS 动画的边界很清晰：它快，但僵硬；JS 动画慢一点，但能响应任意状态。真正容易被忽略的是——别让 JS 动画退化成操作非合成属性，那等于主动放弃性能优势。