动画库gsap的常规用法
GSAP（GreenSock Animation Platform）是一款功能强大的 JavaScript 动画库，它提供了简洁且高效的 API，能够创建流畅的、复杂的动画效果。无论是简单的位移、旋转，还是更复杂的时间线、物理效果，GSAP 都能轻松实现。它支持所有主流浏览器，并且能够与现代 Web 技术（如 React、Vue、Angular）无缝集成。
在本文中，我们介绍了 GSAP 的一些常见用法，包括基本动画、时间线管理、物理效果、SVG 动画等。
安装 GSAP
1.使用 CDN 引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
2.使用 npm 安装（适用于前端构建工具）
npm install gsap
#在项目中通过 import 引入：
import gsap from "gsap";
GSAP 的基本用法
1.简单的动画: GSAP 的核心方法是 gsap.to() 和 gsap.from()。
gsap.to() 方法会将 #box 元素的位置从初始状态平移 300px，并旋转 360 度，动画持续 2 秒。
x：控制水平方向的位移。
rotation：控制旋转角度。
gsap.to("#box", { duration: 2, x: 300, rotation: 360 });
gsap.from() 方法用于设置动画从某个状态开始，而不是从当前状态开始,如下:让 #box 元素从透明度为 0，水平偏移 -300px 的位置开始动画，持续 2 秒。
gsap.from("#box", { duration: 2, opacity: 0, x: -300 });
2.同时运行多个动画
通过 gsap.to() 方法创建多个并行的动画：#box 同时进行平移、旋转、缩放和透明度变化。
gsap.to("#box", { duration: 2, x: 300, rotation: 360 });
gsap.to("#box", { duration: 2, scale: 2, opacity: 0.5 });
3.动画的延迟与回调
gsap 提供了对动画的延迟和回调函数的支持。你可以通过 delay 属性控制动画的开始时间，并使用 onComplete 回调函数在动画完成时触发特定的操作。
在下面的代码中，动画会在 1 秒后开始，并在动画完成时弹出一个提示框。
gsap.to("#box", { duration: 2, x: 300, delay: 1, onComplete: () => { alert('动画完成!'); } });
4.动画的反向与重复
gsap 提供了对动画反向播放和循环的支持：
repeat: 2 表示动画会重复 2 次（即总共执行 3 次）。
yoyo: true 表示动画会在每次重复时反向播放，形成来回的动画效果。
gsap.to("#box", { duration: 2, x: 300, repeat: 2, yoyo: true });
高级用法
1.时间线（Timeline）
GSAP 提供了一个非常强大的功能——Timeline，它可以帮助你管理多个动画的顺序和同步。通过 gsap.timeline() 方法，你可以创建一系列按顺序执行的动画。
let tl = gsap.timeline();
tl.to("#box", { duration: 1, x: 300 })
.to("#box", { duration: 1, y: 200 })
.to("#box", { duration: 1, rotation: 180 });
#这个例子会按照顺序执行三个动画：先是平移，接着是垂直平移，最后是旋转。
timeline 支持 stagger 参数，可以让多个元素动画错开执行。
add() 方法可以在时间线中的指定位置添加其他动画。
2.物理效果动画
GSAP 提供了像弹簧动画（spring）这样的物理效果，这使得动画看起来更加生动。
gsap.to("#box", { duration: 2, x: 500, ease: "elastic.out(1, 0.3)" });
#ease: "elastic.out(1, 0.3)" 让动画在结束时模拟弹簧效果，产生弹跳的感觉。
3.SVG 动画
GSAP 对 SVG 元素的动画支持非常好，使用方法与普通 DOM 元素类似，但它也提供了一些针对 SVG 的特殊效果，例如路径动画。
gsap.to("#path", { duration: 2, strokeDashoffset: 0 });
#这段代码将会让 SVG 路径的描边效果从一个完整的路径到空白，模拟画出路径的动画效果。
4.与 CSS 结合
GSAP 支持与 CSS 动画属性无缝结合。例如，直接操作 transform、opacity、scale 等 CSS 属性：
gsap.to("#box", { duration: 1, scale: 1.5, opacity: 0.5 });
5.用于滚动动画
GSAP 的 ScrollTrigger 插件使得创建滚动动画变得简单。通过这个插件，你可以控制页面滚动时动画的触发。
gsap.registerPlugin(ScrollTrigger);
gsap.to("#box", {
scrollTrigger: {
trigger: "#box",
start: "top 80%",
end: "top 30%",
scrub: true
},
x: 500
});
#当页面滚动到 #box 元素时，动画会触发，并且随着页面滚动进行动画效果。