JavaScript如何实现动画效果_CSS3和requestAnimationFrame哪个更好

CSS3动画适合声明式简单交互，rAF适合需JS控制的复杂动画；二者可混合使用，如CSS处理缓动基底、rAF实现鼠标跟随与弹性效果。

JavaScript实现动画效果，核心在于控制元素在时间轴上的状态变化。CSS3动画和requestAnimationFrame（简称 rAF）不是互斥方案，而是适用场景不同：CSS3适合声明式、简单交互动画；rAF适合需要精确控制、复杂逻辑或动态计算的动画。

CSS3动画：声明式、高性能、易维护

CSS3动画（包括 transition 和 @keyframes）由浏览器渲染引擎直接优化，通常运行在合成线程（compositor thread），不触发重排（reflow）和重绘（repaint），性能高且功耗低。

• 适合按钮悬停、卡片翻转、淡入淡出、尺寸缩放等预设行为
• 支持硬件加速（如对 transform 和 opacity 属性动画）
• 代码简洁，样式与行为分离，便于复用和主题切换
• 缺点是难以响应运行时数据（比如鼠标实时位置、物理模拟）、无法中途精确暂停/跳帧/反向播放（除非用 JS 控制 animation-play-state 或 currentTime）

requestAnimationFrame：命令式、高可控、适合复杂逻辑

requestAnimationFrame 是浏览器提供的“下一帧绘制前执行回调”的机制，JS 动画的核心工具。它让动画节奏与屏幕刷新率（通常是 60fps）同步，避免 setTimeout/setInterval 的丢帧和卡顿问题。

• 适合游戏、数据可视化（如 ECharts 自定义渲染）、拖拽跟随、粒子系统、物理引擎（如重力、碰撞）
• 每一帧可读取 DOM 状态、计算新位置、更新 Canvas/SVG、甚至结合 Web Audio 做音画同步
• 可随时中止、插值、缓动函数自定义、帧间差值平滑（如使用 performance.now() 计算 delta time）
• 注意：频繁操作 DOM 样式（如反复改 element.style.left）会触发布局抖动，应优先用 transform + will-change 或直接操作 Canvas

如何选择？看三个关键点

判断标准不是“哪个更好”，而是“哪个更合适”：

• 是否需要 JS 参与决策？ 如果动画起点、终点、速度、时机依赖用户输入、API 响应或数学计算（如抛物线运动），选 rAF
• 是否追求极致性能和电池续航？ 纯视觉反馈（如开关切换、加载旋转）优先 CSS3，尤其在移动端
• 是否要统一管理多个动画？ 可混合使用：用 CSS3 做基础过渡，用 rAF 处理关键帧逻辑（例如在 transition 结束后触发下一步）

一个实用组合示例

实现“跟随鼠标、带弹性阻尼”的悬浮气泡：

• 用 CSS3 定义基础 transform: translate() 和 transition: transform 0.2s ease-out 做缓动基底
• 用 rAF 实时读取鼠标坐标，计算目标偏移，并动态设置 style.transform
• 加入简单弹簧算法（如 damping + stiffness），让运动更自然——这一步只能靠 JS

不复杂但容易忽略：现代框架（如 React、Vue）中，优先用 CSS-in-JS 库（如 Framer Motion）或内置过渡系统，它们底层已智能融合 CSS 动画与 rAF，开发者只需关注状态和意图。