记录一下GSAP学习的一些内容
1.创建一个动画
// 使用cdn引入gsap库
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
// 使用yarn或npm安装
npm install gsap
yarn add gsap
import { gsap } from "gsap";
- 补间动画（Tween）是执行所有动画工作的核心组件——你可以将其理解为一种高性能的属性设置器。你只需向它传入以下要素：
- 目标对象（targets） ：需要执行动画的元素或对象
- 持续时间（duration） ：动画完成的时长
- 待动画属性（properties） ：需要变化的属性及目标值
- 当它的时间轴播放头（playhead）移动到新位置时，Tween 会自动完成两件事：
- 智能计算：根据当前时间点，精确推演出所有属性应有的中间值
- 精准赋值：将这些计算后的值实时应用到目标对象的对应属性上
// 使用css选择器
gsap.to(".box", { x: 200 });
gsap.to("section > .box", { x: 200 });
// 使用变量
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })
let obj = { x: 0, y: 0 }
gsap.to(obj, { x: 200 })
// 使用元素的数组
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
gsap.to([square, circle], { x: 200 })
主要使用的有4种补间动画
- gsap.to()
- gsap.from()
- gsap.fromTo()
- gsap.set()
| 法 | 动画方向 |
|---|---|
gsap.to() | 当前值 → 目标值 |
gsap.from() | 自定义初始值 → 当前值 |
gsap.fromTo() | 自定义初始值 → 自定义目标值 |
gsap.set() | 瞬时设置值 |
GSAP不仅支持标准的css属性，还可以通过插件实现其他的，如：自定义对象动画属性、css变量、复杂字符串的解析
tips - Transform（变形）可以实现元素的位移、缩放和旋转等效果。更重要的是，transform 和 opacity 属性在性能表现上极为优异，因为它们不会触发浏览器布局重计算（reflow），从而大幅降低浏览器渲染负担。在条件允许时，优先使用 transform 和 opacity 属性实现动画效果，而非直接操作 "top"、"left" 或 "margin" 等布局相关属性。这将显著提升动画流畅度，避免出现卡顿现象。
GSAP提供的一些CSS属性简写
| GSAP 属性 | 描述、功能说明 |
|---|---|
x: 100 | transform: translateX(100px) （沿 X 轴平移 100 像素） |
y: 100 | transform: translateY(100px) （沿 Y 轴平移 100 像素） |
xPercent: 50 | transform: translateX(50%) （沿 X 轴平移自身宽度的 50%） |
yPercent: 50 | transform: translateY(50%) （沿 Y 轴平移自身高度的 50%） |
scale: 2 | transform: scale(2) （等比缩放至 2 倍大小） |
scaleX: 2 | transform: scaleX(2) （仅 X 轴缩放至 2 倍） |
scaleY: 2 | transform: scaleY(2) （仅 Y 轴缩放至 2 倍） |
rotation: 90 | transform: rotate(90deg) （旋转 90 度） |
rotation: "1.25rad" | 无 CSS 替代方案 （使用 1.25 弧度旋转，CSS 不支持直接定义弧度值） |
skew: 30 | transform: skew(30deg) （X/Y 轴同时斜切 30 度） |
skewX: 30 | transform: skewX(30deg) （仅 X 轴斜切 30 度） |
skewY: "1.23rad" | 无 CSS 替代方案 （使用 1.23 弧度斜切 Y 轴，CSS 不支持直接定义弧度值） |
transformOrigin: "center 40%" | transform-origin: center 40% （设置变形原点为水平居中、垂直 40% 位置） |
opacity: 0 | 调整元素透明度（0 为完全透明） |
autoAlpha: 0 | 简写属性：同时设置 opacity: 0 和 visibility: hidden |
duration: 1 | animation-duration: 1s （动画持续 1 秒） |
repeat: -1 | animation-iteration-count: infinite （无限循环播放） |
repeat: 2 | animation-iteration-count: 2 （播放 2 次后停止） |
delay: 2 | animation-delay: 2s （延迟 2 秒后开始播放） |
yoyo: true | animation-direction: alternate （往返播放动画，如 "前进→后退→前进..."） |
SVG 属性动画
与 HTML 元素类似，SVG 元素也可以通过 transform 简写属性实现动画效果。除此之外，您还可以通过 属性对象（attr object） 对以下 SVG 专属属性进行动画控制：
-
基础几何属性：
width（宽度）、height（高度）、cx（圆形/椭圆圆心X坐标）、cy（圆形/椭圆圆心Y坐标）等 -
视觉表现属性：
fill（填充色）、stroke（描边色）、stroke-width（描边宽度）、opacity（透明度） -
视图控制属性：
viewBox（视图窗口定义，可实现视口平移/缩放动画） -
路径相关属性：
d（路径数据，支持路径变形动画）、transform（路径变形）
