# 与其他动画库组合

URL: https://caijiao.org/animejs/6-integration/4-others
Source: docs/animejs/6-integration/4-others.md
Description: 本节介绍如何将 Anime.js 与其他动画库（如 GSAP）结合使用，实现更丰富的动画效果和更灵活的动画控制。

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

- 使用 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",
});
```

## 小结

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

## 示例演示

[在线代码演示](/animejs/demos/19.html)

✅ **效果说明**：

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