GreenSock (GSAP) 动画库入门：简单易懂的基础知识与实用示例

程序员小jobleap
807 阅读5分钟

GreenSock Animation Platform（简称GSAP）是一个非常强大且高效的JavaScript动画库，专门用来让网页上的各种元素动起来。它支持网页中几乎所有可以用JavaScript操作的内容，比如CSS样式、SVG图形、React组件、Canvas画布等，还能保证动画在各种浏览器上都表现一致且流畅。

GSAP是什么？为什么用它？

  • 高性能：GSAP动画运行非常快，性能比传统的jQuery动画快20倍以上，动画流畅不卡顿，尤其适合复杂动画和移动端
  • 兼容性强：无论是Chrome、Firefox、Safari还是Edge，GSAP都能保证动画效果一致，开发者不用担心浏览器差异
  • 功能丰富且灵活：支持2D/3D变换、颜色、透明度、SVG属性等各种动画，且可以精确控制动画时间、顺序、重复、缓动效果等
  • 无依赖：GSAP不依赖任何第三方库，体积小，加载快，使用方便
  • 广泛应用：全球超过1000万个网站使用GSAP，包括很多知名品牌，适合网页动画、游戏、移动应用等多种场景

GSAP的核心基础知识

1. 动画的基本概念

动画就是让元素的某些属性（位置、大小、颜色等）从一个状态逐渐变化到另一个状态，GSAP通过捕捉起始值和结束值，每秒计算60次中间值，让元素看起来动起来

2. GSAP的主要动画方法

  • gsap.to(target, vars)
    让目标元素从当前状态动画到指定状态。
  • gsap.from(target, vars)
    让目标元素从指定状态动画到当前状态（逆向动画）。
  • gsap.fromTo(target, fromVars, toVars)
    明确指定动画起始和结束状态。
  • gsap.set(target, vars)
    立即设置元素状态，无动画过渡，相当于duration为0的to方法

3. 选择动画目标

GSAP支持用CSS选择器、DOM元素或元素数组作为动画目标：

gsap.to(".box", { x: 200 }); // 通过类名选择
let box = document.querySelector(".box");
gsap.to(box, { y: 100 });    // 通过DOM元素
gsap.to([box, document.querySelector(".circle")], { opacity: 0.5 }); // 多个元素

4. 动画属性与参数

动画属性是你想改变的样式，比如位置、旋转、缩放等；参数控制动画细节，如持续时间、重复次数、缓动效果等：

gsap.to(".box", {
  x: 200,            // 水平移动200px
  rotation: 360,     // 旋转360度
  duration: 2,       // 持续2秒
  ease: "power1.out",// 缓动效果
  repeat: 1,         // 重复1次
  yoyo: true,        // 反向播放（像悠悠球）
  onComplete: () => console.log("动画结束")
});

5. 常用变换属性对应关系

GSAP属性CSS等价写法作用说明
x: 100transform: translateX(100px)水平移动100像素
y: 100transform: translateY(100px)垂直移动100像素
xPercent: -50transform: translateX(-50%)水平移动元素宽度的50%
yPercent: -50transform: translateY(-50%)垂直移动元素高度的50%
rotation: 360transform: rotate(360deg)顺时针旋转360度
scale: 2transform: scale(2, 2)放大2倍
skewX: 45transform: skewX(45deg)X轴倾斜45度
transformOrigin: "0% 100%"transform-origin: 0% 100%设置旋转中心点（左下角）

6. 时间轴（Timeline）

时间轴是GSAP的高级功能，可以把多个动画串联起来，精确控制它们的播放顺序、延迟和重叠，方便管理复杂动画：

let tl = gsap.timeline({ repeat: 1, yoyo: true });

tl.to(".box", { x: 100, duration: 1 });
tl.to(".box", { rotation: 180, duration: 1 });
tl.to(".box", { scale: 0.5, duration: 1 });

时间轴会依次执行三个动画，执行完后重复一次并反向播放。

GSAP实用示例代码

示例1：简单移动动画

HTML:

<div class="box" style="width:100px; height:100px; background:red; position:absolute;"></div>

JavaScript:

gsap.to(".box", { duration: 2, x: 300 });

效果：红色方块在2秒内从当前位置水平移动300像素

示例2：复杂动画（移动+旋转+缩放+缓动+无限循环）

HTML:

<div id="circle" style="width:100px; height:100px; background:blue; border-radius:50%; position:absolute;"></div>

JavaScript:

gsap.to("#circle", {
  duration: 3,
  x: 200,
  rotation: 360,
  scale: 1.5,
  ease: "bounce.out",
  repeat: -1,   // 无限循环
  yoyo: true    // 反向播放
});

效果：蓝色圆形元素在3秒内移动、旋转、放大，动画结束后反向播放，循环进行，带弹跳缓动效果3。

示例3：时间轴管理多个动画

HTML:

<div class="box" style="width:50px; height:50px; background:green; position:absolute;"></div>

JavaScript:

let tl = gsap.timeline({ repeat: 2, repeatDelay: 1 });

tl.to(".box", { x: 100, duration: 1 });
tl.to(".box", { y: 100, duration: 1 });
tl.to(".box", { rotation: 180, duration: 1 });

效果：绿色方块先水平移动100px，再垂直移动100px，最后旋转180度，动画重复3次，每次重复间隔1秒

GSAP性能优势

  • GSAP动画帧率接近理想的60帧/秒，动画流畅不卡顿
  • 在复杂动画和大量元素动画时，性能优于jQuery、Animate.css等其他动画库
  • 适合移动端和低性能设备，保证动画顺畅

总结

GSAP是一个简单易用但功能强大的JavaScript动画库，适合各种网页动画需求。它支持多种动画类型，性能优异，兼容性好，且通过时间轴和缓动函数让动画更加自然和灵活。无论是新手还是专业开发者，都能用GSAP快速实现高质量动画效果。

额外学习资源

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  • 安装命令：
npm install gsap
# 或者
yarn add gsap

通过以上介绍和示例，你可以快速上手GSAP，制作出流畅、漂亮的网页动画效果。祝你动画开发顺利！

avatar
文章
阅读
粉丝