性能优化建议

动画性能对用户体验至关重要，特别是在移动设备上。以下是一些实用的 Anime.js 性能优化技巧：

1. 优先使用 GPU 加速的 CSS 属性

动画中推荐使用 transform（如 translateX、scale、rotate）和 opacity，这类属性通常会利用 GPU 加速，减少主线程负担。

/* 例：平移动画使用 transform，避免改变布局属性 */
transform: translateX(100px);

避免动画中直接修改 width、height、top、left 等属性，因为它们会触发布局重排，导致性能下降。

2. 减少同时运行的动画数量

大量动画同时运行，会增加渲染压力。可以：

• 合理使用 stagger 实现错峰执行
• 控制动画元素数量，必要时拆分动画流程

3. 合理设置动画时长和缓动函数

选择适当的动画时长和缓动函数，避免过长或突兀的动画，提升流畅度。

4. 避免频繁触发高成本动画

对于高频事件（如滚动、窗口大小变化），使用节流或防抖避免动画触发过频。

5. 清理不再使用的动画实例

动画完成后及时销毁实例，防止内存泄漏。

anime.remove(target);

示例演示：使用 transform 和 opacity 动画（GPU 加速）

loading

说明

• 动画使用 transform: translateX 和 opacity，充分利用 GPU 加速；
• 使用 will-change CSS 属性，提示浏览器优化；
• 按钮点击触发动画，循环执行平移和透明度变化；
• 动画开始前清理前一个动画实例，防止内存泄漏。