JavaScript动画核心是动态更新元素样式，推荐用requestAnimationFrame实现60fps平滑动画，优先使用transform和opacity提升性能，避免style.left/top字符串拼接。
用JavaScript创建动画效果，核心是控制元素的样式属性随时间变化。相比CSS动画，JS动画更灵活，适合需要动态计算、用户交互触发或复杂逻辑的场景。
使用 requestAnimationFrame 实现平滑动画
requestAnimationFrame 是浏览器专门为动画设计的API，比 setTimeout 或 setInterval 更高效，能自动适配屏幕刷新率（通常是60fps）。
- 每次回调执行时更新元素的位置、透明度、旋转等CSS属性
- 必须在回调中再次调用 requestAnimationFrame 才能持续动画
- 避免直接修改 style.left/top 等需字符串拼接的属性，优先用 transform 和 opacity，性能更好
示例：让一个 div 向右匀速移动 300px
const box = document.getElementById('box');
let pos = 0;
function animate() {
if (pos pos += 2;
box.style.transform = `translateX(${pos}px)`;
requestAnimationFrame(animate);
}
}
animate();结合用户交互触发动画
动画不必自动播放，常由点击、悬停、滚动等行为启动，提升页面响应感。
- 用 addEventListener 监听事件，触发前可先重置元素状态（如 visibility: hidden → visible）
- 避免重复点击导致多个动画叠加，可用标志位或 cancelAnimationFrame 控制
- 鼠标移入时淡入+上浮，移出时淡出+下沉，配合 transition 也能实现，但JS可做更精细的时间/曲线控制
用 easing 函数让动画更自然
线性运动（匀速）显得机械。引入缓动函数（如 ease-in-out、bounce、elastic）能让动画有加减速、回弹等真实物理感。
- 可手写简单函数，例如：easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }，t 是归一化时间（0→1）
- 将 t 传入函数得到实际进度比例，再乘以目标值，应用到样式上
- 常用库如 gsap 内置丰富 easing，但纯JS项目可先用轻量函数替代
注意性能与兼容性
动画性能差会卡顿甚至掉帧，尤其在低端设备或复杂DOM中。
- 优先用 transform 和 opacity 触发硬件加速（GPU渲染），避免频繁读写 offse
tTop、getBoundingClientRect 等触发重排
- 动画元素建议设为 position: relative 或 absolute，减少对文档流影响
- 旧版IE不支持 requestAnimationFrame，可用 polyfill 或降级为 setTimeout
tTop、getBoundingClientRect 等触发重排