使用transform和opacity替代top/left与rgba动画，避免布局抖动，合理启用硬件加速与will-change，结合requestAnimationFrame优化动画节奏，减少重排重绘，提升移动端动画性能。
移动端动画性能直接影响用户体验，尤其在中低端设备上更容易出现卡顿、掉帧等问题。优化动画性能的核心是减少重排和重绘，利用硬件加速，并选择合适的动画实现方式。以下是几个关键优化策略。
使用 transform 和 opacity 实现动画
这两类属性触发的是合成阶段的变更，浏览器可以将元素提升为独立图层，通过 GPU 加速渲染，不会引发布局（layout）或绘制（paint）。
- 替代 top/left 动画：不要用改变 top 或 left 来做位移动画，应改用 transform: translate()。
- 透明度变化：使用 opacity 而非 rgba() 颜色渐变来控制显隐或淡入淡出。
避免触发布局抖动（Layout Thrashing）
频繁读取和修改 DOM 几何属性会导致浏览器反复进行重排，严重降低性能。
- 把读取和写入操作分开，先批量修改样式，再统一读取布局信息。
- 使用 getBoundingClientRect()、offsetTop 等属性前，确保没有连续的样式更改。
启用硬件加速与 will-change
合理使用 will-change 和 transform: translateZ(0) 可提示浏览器提前创建合成层。
- 对频繁动画的元素设置 will-change: transform，但不要滥用，否则会占用过多内存。
- 避免给太多元素开启独立图层，图层过多会增加内存开销和合成时间。
使用 requestAnimationFrame 控制动画节奏
使用 requestAnimationFrame 替代 setTimeout 或 setInterval 来驱动动画，能保证动画与屏幕刷新率同步（通常60fps）。
- 它会在浏览器下一次重绘前执行回调，避免不必要的计算。
- 结合 CSS 动画或 JS 动画时，优先让 CSS 处理简单动画，JS 处理复杂逻辑。
