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

常用属性说明

SplitText 文字分割动画

SplitText 可以将文本拆分为字符、单词或行，配合 GSAP 实现逐字显现效果。

gsap.registerPlugin(SplitText, ScrollTrigger);

document.fonts.ready.then(() => {
  gsap.set('.split', { opacity: 1 });
  const splitElements = document.querySelectorAll('.split');

  splitElements.forEach((element) => {
    SplitText.create(element, {
      type: 'words,lines',
      mask: 'lines',
      onSplit: (self) => {
        gsap.from(self.words, {
          duration: 1.3,
          y: 50,
          opacity: 0,
          stagger: { amount: 0.6 },
          scrollTrigger: {
            trigger: element,
            start: 'top 88%',
            end: 'top 20%'
          }
        });
      }
    });
  });
});

AOS 动画

AOS (Animate On Scroll) 是一个轻量级的滚动显现库，适合快速添加简单的入场动画。

CDN 引入：

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

JS 初始化配置

AOS.init({
  offset: 120,       // 提前 120px 触发
  delay: 0,          // 无默认延迟
  duration: 400,     // 动画时长
  easing: 'ease',    // 缓动曲线
  once: false,       // 是否只播放一次
  mirror: false,     // 滚动离开是否反向
  anchorPlacement: 'top-bottom'
});

HTML 使用方式

直接在元素上添加 data-aos 类名即可，例如 <div data-aos="fade-up">内容</div>。

Lottie 动画

Lottie 用于渲染 After Effects 导出的 JSON 格式矢量动画，体积小且清晰度高。

CDN 引入：

<script src="https://unpkg.com/[email protected]/build/player/lottie.min.js"></script>

HTML 容器

<div id="struct_picture"></div>

JS 加载与控制

// 获取容器
const structe_one_container = document.getElementById('struct_picture');

// 加载并渲染动画
const structe_one_animation = lottie.loadAnimation({
  container: structe_one_container,
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'structe_one.json'
});

// 监听滚动播放
window.addEventListener('scroll', () => {
  const rect = structe_one_container.getBoundingClientRect();
  if (rect.top <= window.innerHeight / 1.5 && !structe_one_animation.isPlaying) {
    structe_one_animation.play();
  }
});

Swiper 轮播图

Swiper 是目前最流行的触摸滑动轮播组件，功能丰富且响应式支持好。

CDN 引入：

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />

HTML 结构

<div class="swiper course-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- 分页器 -->
  <div class="swiper-pagination"></div>
  <!-- 导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

CSS 样式控制

.swiper-pagination-bullet-active {
  background-color: #00E77F;
}
.swiper-pagination-bullet {
  background-color: #fff;
}

JS 配置示例

普通轮播效果：

var swiper = new Swiper('.course-slider', {
  spaceBetween: 20,
  grabCursor: true,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  breakpoints: {
    540: { slidesPerView: 1 },
    768: { slidesPerView: 2 },
    1024: { slidesPerView: 3 }
  }
});

3D 封面流效果：

var swiper = new Swiper('.home-slider', {
  effect: 'coverflow',
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 100,
    modifier: 2,
    slideShadows: true
  },
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false
  }
});

联动类别切换：

var lastActiveIndex = swiper2.activeIndex;
swiper2.on('slideChange', function() {
  var activeIndex = swiper2.activeIndex;
  var activeSlide = swiper2.slides[activeIndex];
  var currentImage = activeSlide.querySelector('img');
  let num = currentImage.id;
  var current = document.getElementsByClassName('spc')[num[1] - 1];

  // 左滑动处理
  if (num[1] - 2 != -1 && activeIndex > lastActiveIndex) {
    var prev = document.getElementsByClassName('spc')[num[1] - 2];
    prev.style.color = 'black';
    prev.style.backgroundColor = 'white';
  } else {
    var prev = document.getElementsByClassName('spc')[5];
    prev.style.color = 'black';
    prev.style.backgroundColor = 'white';
  }

  // 右滑动处理
  if (num[1] != 6 && activeIndex < lastActiveIndex) {
    var prev = document.getElementsByClassName('spc')[num[1]];
    prev.style.color = 'black';
    prev.style.backgroundColor = 'white';
  } else {
    var prev = document.getElementsByClassName('spc')[0];
    prev.style.color = 'black';
    prev.style.backgroundColor = 'white';
  }

  current.style.color = 'white';
  current.style.backgroundColor = 'black';
  lastActiveIndex = activeIndex;
});

Font Awesome 图标字体工具

Font Awesome 提供了丰富的矢量图标集，可直接通过类名调用。

CDN 引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

基本用法：

在 HTML 中嵌入 <i> 标签，例如 <i class="fa fa-volume-high"></i>。

JS 动态切换图标：

let num_s = 0;
sound.onclick = () => {
  num_s += 1;
  if (num_s % 2 == 0) {
    sound_icon.classList.remove('fa-volume-xmark');
    sound_icon.classList.add('fa-volume-high');
    video.muted = false;
    sbar.style.width = (video.volume * 100) + '%';
  } else {
    sound_icon.classList.remove('fa-volume-high');
    sound_icon.classList.add('fa-volume-xmark');
    video.muted = true;
    sbar.style.width = '0%';
  }
};