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

结合用户交互触发动画

动画不必自动播放，常由点击、悬停、滚动等行为启动，提升页面响应感。

• 用 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渲染），避免频繁读写 offsetTop、getBoundingClientRect 等触发重排
• 动画元素建议设为 position: relative 或 absolute，减少对文档流影响
• 旧版IE不支持 requestAnimationFrame，可用 polyfill 或降级为 setTimeout