前端常用动画库实战指南：GSAP、Lottie、Swiper 与 AOS

基础时间线控制：

// 基本时间线
gsap.timeline()
  .to(".box", { x: 200, rotation: 360, duration: 1 })
  .to(".box", { scale: 1.5, y: -50, duration: 0.8 }, "-=0.5");

// 滚动触发（最常用）
gsap.to(".section", {
  scrollTrigger: {
    trigger: ".section",
    start: "top 80%",
    end: "bottom 20%",
    scrub: true, // 跟随滚动
    // markers: true, // 调试用
  },
  y: 100,
  opacity: 0,
  stagger: 0.2,
});

这里要注意 scrub: true 会让动画进度绑定在滚动条上，适合做视差效果；如果不需要反向回弹，可以设为 false。

Lottie (lottie-web / @lottiefiles/lottie-player)

核心优势

• 设计师用 AE 做出来的复杂动画可以 1:1 还原
• 矢量动画，缩放无损
• 支持交互（hover、click、播放段控制）

缺点

• 动画 JSON 文件可能很大（复杂动画几百 KB 到几 MB）
• 性能比 GSAP 差（尤其是大量实例）

推荐使用方式

• 使用 lottie-player web component（最简单）
• 或者 lottie-light（更轻量）

<!-- 方式 1：web component（推荐） -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player
  src="https://assets4.lottiefiles.com/packages/lf20_1pxqjqps.json"
  background="transparent"
  speed="1"
  style="width: 300px; height: 300px"
  loop
  autoplay
></lottie-player>

这种方式无需写 JS 初始化逻辑，直接作为组件嵌入即可，非常适合非开发人员维护的动效资源。

Swiper (swiperjs.com)

目前最主流的轮播图解决方案，几乎所有移动端项目都在用。

最常用特性

• 响应式 breakpoints
• 3D 效果（coverflow、cube、flip）
• 鼠标滚轮控制
• 缩放、视差、虚拟滑动
• 懒加载、自动播放、进度条

推荐写法（模块化导入 + 基本样式）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <!-- ... -->
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: {
    delay: 4000,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    640: { slidesPerView: 1 },
    768: { slidesPerView: 2 },
    1024: { slidesPerView: 3 },
  },
});
</script>

注意 breakpoints 配置，这是适配不同屏幕宽度的关键，能确保移动端和 PC 端的展示效果一致。

AOS (Animate On Scroll)

最简单粗暴的'滚动出现动画'库，零配置。

优点

• 引入 js + 加 data-aos 属性即可
• 支持多种动画（fade、flip、zoom、slide…）
• 可自定义 duration、delay、easing

缺点

• 动画种类有限
• 不适合复杂序列

使用方式

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<div data-aos="fade-up" data-aos-duration="1200">内容</div>
<div data-aos="zoom-in" data-aos-delay="300">延迟出现</div>
<script>
AOS.init({
  once: true, // 只执行一次
  offset: 120, // 提前多少像素触发
  duration: 800,
  easing: 'ease-out',
});
</script>

对于后台管理系统或内容型网站，这种方案能极大减少开发成本，且性能开销极低。

快速决策表（项目中选哪个？）

当前趋势总结

• GSAP 依然是复杂动画的王者（ScrollTrigger + 插件生态太强）
• Lottie 在品牌宣传页、App 引导页仍然大量使用
• Swiper 基本垄断了高质量轮播需求
• AOS 仍然是很多中后台、小程序官网的'快速加动画'神器
• 越来越多的团队开始 GSAP + CSS Scroll-driven Animations（Chrome 115+ 支持）组合使用，减少依赖

在实际选型时，建议优先考虑性能预算和开发效率。简单的视觉反馈尽量用 CSS，复杂的交互逻辑交给 JS 库处理，避免过度设计。