菜鸟教程
教程 animejs tutorial

性能优化建议

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

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

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

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

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

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

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

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

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

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

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

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

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

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

js 
anime.remove(target);

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

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>Anime.js 性能优化示例</title>
<style>
body {
font-family: sans-serif;
text-align: center;
padding: 40px;
background-color: #f9f9f9;
}


.box {
  width: 80px;
  height: 80px;
  background-color: #4FC08D;
  margin: 20px auto;
  border-radius: 8px;
  user-select: none;
  will-change: transform, opacity;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  background-color: #4FC08D;
  color: white;
  transition: background-color 0.3s;
  margin-top: 20px;
}

button:hover {
  background-color: #3a9d6f;
}



</style>
</head>


<body>
<h2>点击按钮演示使用 GPU 加速的动画</h2>
<div class="box"></div>
<button id="startBtn">开始动画</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot;&gt;&lt;/script&gt;
<script>
var box = document.querySelector(‘.box’);
var btn = document.getElementById(‘startBtn’);
var animation;


btn.addEventListener('click', function () {
  // 如果动画已存在，先移除
  if (animation) {
    anime.remove(box);
  }

  // 执行动画：平移 + 透明度变化
  animation = anime.timeline({
    easing: 'easeInOutSine',
    duration: 1000
  });

  animation
    .add({
      targets: box,
      translateX: 200,
      opacity: 0.5
    })
    .add({
      targets: box,
      translateX: 0,
      opacity: 1
    });
});



</script>
</body>


</html>

说明

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

相关内容