如何用JavaScript创建动画效果？

JavaScript动画核心是requestAnimationFrame实现60fps平滑更新，优先改transform/opacity触发GPU加速，封装play/pause/seek方法控制状态，配合anime.js等轻量库按需使用。

用JavaScript创建动画效果，核心是控制元素的样式属性随时间变化，常用方法是结合 requestAnimationFrame 实现平滑、高性能的逐帧更新，替代低效的 setTimeout 或 setInterval。

用 requestAnimationFrame 做基础动画

它让浏览器在下一次重绘前执行回调，和屏幕刷新率同步（通常60fps），更流畅也更省资源。

• 基本写法：定义一个动画函数，在内部更新样式，再递归调用 requestAnimationFrame
• 记得用 cancelAnimationFrame 停止动画，避免内存泄漏或意外持续运行
• 配合 performance.now() 可做时间敏感的动画（比如缓动、暂停续播）

控制动画状态与进度

单纯移动不够，常需控制开始、暂停、恢复、跳转到某时刻等行为。

• 用一个变量记录是否暂停，暂停时暂存当前时间戳，恢复时把“已过去时间”补偿进去
• 把动画逻辑封装成类或对象，带 play()、pause()、seek(t) 方法，便于复用
• 进度值（0–1）比绝对时间更通用，适合和 CSS 动画、SVG 路径动画对齐

搭配 CSS 实现硬件加速

纯 JS 改 left/top 触发重排，性能差；改 transform 和 opacity 则走合成层，GPU 加速。

标签： css javascript java js svg 浏览器 工具 硬件加速 重绘