GreenSock Animation Platform (GSAP)

特点

• 高性能：GSAP 以其高效的性能著称，能够处理复杂的动画场景，比 jQuery 动画快 20 倍。
• 广泛兼容性：支持几乎所有主流浏览器，解决了多种浏览器不一致性问题。
• 插件丰富：提供大量插件，如 ScrollTrigger、MorphSVG 等，简化复杂动画的实现。
• 精细控制：通过详细的 API 提供对动画的高度控制和定制。
• 响应式设计：支持响应式动画设计，确保动画在各种设备上均表现出色。

使用场景

• Web 动画：用于网站中的复杂动画效果，如页面过渡、滚动动画等。
• 广告动画：因其性能优越和广泛兼容性，常用于在线广告动画。
• 游戏开发：用于 HTML5 游戏中的动画效果。
• 数据可视化：在数据可视化中，用于创建动态、交互式图表和图形。

安装方式

GSAP 提供多种安装方式，包括 CDN 和 NPM。

CDN

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>

NPM

npm install gsap

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

使用示例

// 创建一个简单的动画
gsap.to(".box", { x: 200, duration: 1 });

// 使用 ScrollTrigger 创建滚动动画
gsap.to(".box", {
  scrollTrigger: ".box",
  x: 500,
  duration: 2,
});

常用 API 介绍

• gsap.to(): 从当前状态动画到指定状态。

  gsap.to(".box", { x: 200, duration: 1 });
  

• gsap.from(): 从指定状态动画到当前状态。

  gsap.from(".box", { x: -200, duration: 1 });
  

• gsap.fromTo(): 指定起始和结束状态。

  gsap.fromTo(".box", { x: -200 }, { x: 200, duration: 1 });
  

• gsap.set(): 立即设置属性，无动画效果。

  gsap.set(".box", { x: 200 });
  

• gsap.timeline(): 创建一个动画时间轴，按顺序执行多个动画。

  const tl = gsap.timeline();
  tl.to(".box", { x: 200, duration: 1 })
    .to(".box", { y: 100, duration: 1 })
    .to(".box", { rotation: 360, duration: 1 });
  

高级用法

使用 ScrollTrigger 插件可以实现高级的滚动动画效果。例如，根据滚动位置触发动画或创建复杂的滚动交互。

// ScrollTrigger 使用示例
gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "top 100px",
    scrub: true,
    markers: true
  },
  x: 500,
  rotation: 360,
  duration: 2
});

官方资料

• GSAP 官方网站
• GitHub 仓库
• 文档与学习资源

GSAP 是一个功能强大且高效的动画工具，适用于各种 Web 动画需求。无论是创建简单的过渡效果，还是实现复杂的滚动动画，GSAP 都能提供卓越的性能和灵活的控制。通过广泛的文档和丰富的插件支持，开发者可以轻松实现各种动画效果。