JavaScript动画核心是requestAnimationFrame，它按屏幕刷新率高效调度帧更新；需递归调用并设终止条件，配合缓动函数（如easeInOutQuad）实现自然运动效果。
JavaScript动画效果主要通过控制元素的样式属性随时间变化来实现，核心在于按帧更新元素状态并保持流畅视觉体验。现代开发中优先使用 requestAnimationFrame 替代 setTimeout 或 setInterval，因为它由浏览器调度，能自动匹配屏幕刷新率（通常60fps），更高效且省电。
用 requestAnimationFrame 实现基础动画
它告诉浏览器你希望执行动画，浏览器会在下一次重绘前调用指定函数。适合手动控制每一帧的位置、透明度、旋转等属性。
- 定义一个动画函数，内部修改元素样式（如
element.style.transform = `translateX(${x}px)`） - 在函数末尾递归调用
requestAnimationFrame(animate) - 添加终止条件（例如到达目标位置时停止调用）
缓动函数让动画更自然
直接线性变化（匀速）看起来生硬。引入缓动函数（easing function）可模拟加速、减速或弹性等物理效果。常见如 easeInOutQuad：
const easeInOutQuad = t => t
其中 t 是归一化时间（0 到 1），返回对应进度比例。将它乘以总位移量，就能得到当前帧的实际值。
封装可复用的动画工具函数
避免每次写重复逻辑，可封装一个简易 animate 函数：
立即学习“Java免费学习笔记（深入）”；
- 接收目标元素、属性名（如
'left'或'opacity'）、起始值、结束值、持续时间（毫秒）和缓动函数 - 记录开始时间，每帧计算已过时间占比，再用缓动函数换算实际进度
- 支持
Promise返回，方便链式调用或配合async/await
与 CSS 动画协同使用更稳妥
纯 JS 动画灵活但易受主线程阻塞影响；CSS 动画（@keyframes + transition）由合成器线程处理，性能更好。推荐策略：
- 简单交互动画（悬停、点击反馈）优先用 CSS
transition - 复杂路径、动态参数或需要精确控制暂停/取消的场景用 JS 配合
transform和opacity - 用
element.animate()（Web Animations API）作为折中方案，语法简洁且支持时间轴控制
