GSAP 动画库快速上手指南

答案：

GSAP（GreenSock Animation Platform）是一款强大的 JavaScript 动画库，广泛用于网页动画和交互效果。以下是一个快速上手的文档，帮助你快速了解 GSAP 的基本用法。

1. 引入 GSAP

你可以通过 CDN 或者 npm 安装 GSAP。

通过 CDN 引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>

通过 npm 安装：

npm install gsap

2. 基本用法

GSAP 的基本用法是使用 gsap.to()、gsap.from() 和 gsap.fromTo() 方法来创建动画。

2.1 `gsap.to()`

将元素的属性动画到指定值。

gsap.to(".box", { duration: 1, x: 100, opacity: 0.5 });

2.2 `gsap.from()`

从指定的属性值开始动画。

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

2.3 `gsap.fromTo()`

从一个属性值动画到另一个属性值。

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

3. 动画参数

GSAP 提供了许多参数来控制动画效果：

duration: 动画持续时间（秒）。
delay: 动画延迟时间（秒）。
ease: 动画缓动效果（如 Power1.easeIn）。
repeat: 动画重复次数（-1 表示无限循环）。
yoyo: 设置为 true 时，动画会在完成后反向播放。

4. 例子

以下是一个简单的 HTML 和 JavaScript 示例，展示了如何使用 GSAP 创建动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        gsap.to(".box", { duration: 1, x: 300, rotation: 360, ease: "bounce.out" });
    </script>
</body>
</html>

5. 进阶用法

GSAP 还支持时间线（Timeline）和复杂的动画序列。

5.1 时间线

使用 gsap.timeline() 创建一系列动画。

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

6. 参考文档

更多详细信息和高级用法，请参考 GSAP 官方文档.

结语

GSAP 是一个功能强大的动画库，适合各种复杂的动画需求。通过以上的快速上手指南，你可以开始在项目中使用 GSAP 创建流畅的动画效果。

使用 GPT-4o mini 由 AI Answer Generator 回答