javascript的动画如何实现_有哪些常用的动画技术？

JavaScript动画核心是控制样式属性随时间变化，主要通过requestAnimationFrame或setTimeout驱动；现代开发推荐JS控制+CSS实现的组合方式，兼顾性能与可维护性。

JavaScript 动画的核心是**控制元素的样式属性随时间变化**，主要靠定时更新（如 requestAnimationFrame 或 setTimeout）来驱动视觉过渡。不依赖 CSS 的话，JS 本身就能完成位移、缩放、旋转、透明度等效果，但现代开发中更推荐“JS 控制 + CSS 实现”的组合方式，兼顾性能与可维护性。

基于 requestAnimationFrame 的手动动画

这是最底层、最灵活的方式，适合需要精细控制或复杂物理逻辑（比如抛物线运动、拖拽跟随）的场景。

• 用 requestAnimationFrame 替代 setInterval，让动画节奏与屏幕刷新率同步，更流畅、更省资源
• 在每一帧里计算当前状态（如位置 = 起始值 + 进度 × 总变化量），再通过 element.style.xxx 更新样式
• 配合时间戳（performance.now()）可实现匀速、缓动（ease-in/out）等效果，而不仅是帧数驱动

CSS transition + JS 触发

这是最常用、最轻量的交互动画方案：JS 不负责逐帧计算，只负责“加 class”或“改属性”，把过渡交给 CSS 渲染引擎处理。

• 给元素定义 transition: transform 0.3s ease, opacity 0.2s linear
• JS 中修改 element.style.transform = 'translateX(100px)' 或切换 class 即可触发动画
• 优势明显：硬件加速（尤其是 transform 和 opacity）、代码简洁、浏览器优化好

CSS @keyframes + JS 控制动画状态

适合较复杂的多阶段动画（比如加载图标、入场+高亮+退出三段流程），JS 主要用来启动、暂停、重播或动态设置变量。

标签： css vue react javascript java js svg 浏览器 硬件加速