GSAP 中文教程：核心基础
Category（分类）: Visualization Status: 已读
原文：GSAP tutorial，好奇代码整理的 GSAP 官方教程中文翻译。 本文提炼 GSAP 入门模型；API、插件与许可请以 GSAP 官方文档 为准。
一、Tween：一次状态变化
GSAP 的基本单位是 Tween（补间动画）：指定目标对象、目标状态和变化参数，运行时计算中间帧。
// 让 .box 向右移动 200px，持续 0.6 秒
gsap.to('.box', { x: 200, duration: 0.6 })
四种常用方法：
| 方法 | 含义 |
|---|---|
gsap.to(target, vars) | 从当前状态变到目标状态，最常用 |
gsap.from(target, vars) | 从指定状态变到当前状态 |
gsap.fromTo(target, fromVars, toVars) | 显式指定起点和终点 |
gsap.set(target, vars) | 立即设置状态，不产生过渡（相当于 duration 为 0） |
target 可为 CSS 选择器、DOM 元素或元素数组。vars 同时承载要变化的属性与控制参数。
二、优先动画哪些属性
GSAP 可以驱动 CSS 属性、SVG 属性、对象字段、CSS 变量，以及包含数值的复杂字符串。前端界面中通常应优先使用不触发布局重排的属性：
gsap.to('.card', {
x: 24,
yPercent: -10,
rotation: 3,
scale: 1.04,
opacity: 1,
duration: 0.4
})
| GSAP 写法 | 对应含义 |
|---|---|
x: 100 / y: 100 | 水平 / 垂直平移，默认 px |
xPercent: -50 / yPercent: -50 | 按元素自身尺寸百分比平移 |
rotation: 360 | 旋转，默认角度 |
scale: 2 | 缩放 |
transformOrigin: '0% 100%' | 指定变换原点 |
相比频繁改 left、top、margin，transform 与 opacity 通常更适合流畅 UI 动画。滤镜、阴影等昂贵属性仍需在目标设备实测。
三、控制节奏：duration、ease、repeat 与 stagger
gsap.to('.item', {
y: 0,
opacity: 1,
duration: 0.45,
ease: 'power2.out',
stagger: 0.08,
delay: 0.1,
repeat: 1,
yoyo: true
})
duration：动画时长；delay/repeatDelay：首次 / 重复前延迟；repeat：重复次数，-1表示无限重复；yoyo：每轮结束后反向执行；stagger：多目标错开启动；ease：缓动曲线，例如power1.out、bounce.out。
缓动不是装饰。ease-out 常用于响应 UI：起步快，结束自然；需要持续、线性地表达进度时则考虑 ease: 'none'。
四、Timeline：编排多个动画
多个动画若仅靠各自的 delay 互相对齐，一旦第一个时长变化，后续时间都会失控。应使用时间线：
const intro = gsap.timeline()
intro
.from('.title', { y: 32, opacity: 0, duration: 0.5 })
.from('.subtitle', { y: 16, opacity: 0, duration: 0.35 }, '-=0.15')
.from('.actions > *', { y: 12, opacity: 0, stagger: 0.08 }, '-=0.1')
时间线将一组动作作为整体，便于统一播放、暂停、倒放、调整顺序和复用。第三个参数可用相对位置表达重叠关系，而无需硬编码所有绝对延迟。
五、SVG、对象与 Canvas
GSAP 不限于 DOM。SVG 可动画化位置、旋转、填充、描边和其他属性；普通对象的数值变化可在 onUpdate 中同步给 Canvas、Three.js 或业务状态：
const point = { x: 0, y: 0 }
gsap.to(point, {
x: 200,
y: 80,
duration: 1,
onUpdate() {
// 这里按 point.x / point.y 重绘 Canvas 或更新场景对象
}
})
这也是 GSAP 能与 Canvas、PixiJS、Three.js 等配合的原因：它负责时间插值和编排，渲染由你的目标对象完成。
六、入门后的实践原则
- 初始状态、终止状态和中断行为先于动画代码确定；
- 用 Timeline 管理成组的叙事，不滥用独立
delay； - 不要在所有内容上同时使用无限循环与大范围滚动动画；
- 组件卸载时清理动画和滚动监听；
- 为
prefers-reduced-motion设计静态或弱化版本； - 对移动端、低性能设备和键盘操作单独验收。
整理者注
掌握 to / from / fromTo / set、ease / stagger 和 Timeline 已足够覆盖多数界面动效。等基础动作能够清晰表达界面状态后，再按需求进入滚动、拖拽、SVG 形变等插件能力。