与其他动画库组合

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

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

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

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

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

小结

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

示例演示

loading

✅ 效果说明：

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