菜鸟教程
教程 animejs tutorial

与其他动画库组合

在复杂项目中，可能需要同时使用多个动画库，发挥各自优势。例如：

  • 使用 Anime.js 处理简单元素动画
  • 使用 GSAP 实现高级时间轴和复杂交互
  • 结合 ScrollMagic、Lottie 等实现滚动动画和矢量动画

示例：Anime.js 与 GSAP 结合控制元素动画

js 
// 使用 Anime.js 实现平移动画
anime({
  targets: ".box",
  translateX: 200,
  duration: 1000,
  easing: "easeInOutSine",
});

// 使用 GSAP 实现旋转动画
gsap.to(".box", {
  rotation: 360,
  duration: 2,
  repeat: -1,
  ease: "linear",
});

小结

合理组合不同动画库，可以提升项目动画表现力和灵活性，避免单一库的局限性。

示例演示

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

<head>
<meta charset="UTF-8" />
<title>Anime.js 与 GSAP 组合示例（点击开始）</title>
<style>
body {
display: flex;
height: 250px;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
margin: 0;
font-family: sans-serif;
}


.box {
  width: 120px;
  height: 120px;
  background-color: #4FC08D;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 24px;
  user-select: none;
  margin-bottom: 20px;
}

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

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



</style>
</head>


<body>
<div class="box">动画盒子</div>
<button id="startBtn">点击开始动画</button>


<!-- Anime.js –>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot;&gt;&lt;/script&gt;
<!-- GSAP –>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js&quot;&gt;&lt;/script&gt;


<script>
(function () {
var box = document.querySelector(‘.box’);
var btn = document.getElementById(‘startBtn’);


  btn.addEventListener('click', function () {
    // Anime.js 控制平移动画
    anime({
      targets: box,
      translateX: 200,
      duration: 1500,
      easing: 'easeInOutSine'
    });

    // GSAP 控制旋转动画，持续无限循环
    gsap.to(box, {
      rotation: 360,
      duration: 3,
      repeat: -1,
      ease: &quot;linear&quot;
    });

    btn.disabled = true;
    btn.textContent = '动画进行中...';
  });
})();



</script>
</body>


</html>

✅ 效果说明：

  • 页面中有一个绿色方块；
  • Anime.js 负责将方块水平平移 200px；
  • GSAP 负责让方块持续旋转；
  • 两个动画互不干扰，协同展示效果。

相关内容