一页里对比 gsap.to、gsap.from、gsap.fromTo 以及常用 timing / transform 参数对视觉结果的影响
Tween Playground
上面调统一参数，下面按顺序看 gsap.to()、gsap.from()、gsap.fromTo()。
改动后，下面三个组件都会自动重播。
声明终点
当前样式先保持默认，然后补间到你设定的目标状态。
gsap.to(target, {
x: 120,
y: -24,
scale: 1.15,
rotation: 18,
opacity: 0.35,
borderRadius: 48,
skewX: 0,
skewY: 0,
transformOrigin: '50% 50%',
duration: 0.8,
delay: 0,
repeat: 0,
repeatDelay: 0.2,
yoyo: false,
ease: 'power2.out'
})声明起点
设计稿默认样式就是终点时，这种写法最直接，看它“从哪里来”。
gsap.from(target, {
x: 120,
y: -24,
scale: 1.15,
rotation: 18,
opacity: 0.35,
borderRadius: 48,
skewX: 0,
skewY: 0,
transformOrigin: '50% 50%',
duration: 0.8,
delay: 0,
repeat: 0,
repeatDelay: 0.2,
yoyo: false,
ease: 'power2.out'
})两端都声明
起点和终点都写死，不依赖外部样式，组件复用时最稳。
gsap.fromTo(
target,
{
x: 120,
y: -24,
scale: 1.15,
rotation: 18,
opacity: 0.35,
borderRadius: 48,
skewX: 0,
skewY: 0,
transformOrigin: '50% 50%'
},
{
x: 0,
y: 0,
scale: 1,
rotation: 0,
opacity: 1,
borderRadius: 24,
skewX: 0,
skewY: 0,
transformOrigin: '50% 50%',
duration: 0.8,
delay: 0,
repeat: 0,
repeatDelay: 0.2,
yoyo: false,
ease: 'power2.out'
}
)| API | 你声明的重点 | 适合什么场景 |
|---|---|---|
gsap.to() | 结束状态 | 当前样式已稳定，想补间到目标状态 |
gsap.from() | 起始状态 | 最终样式已经在 CSS 里，想做入场 |
gsap.fromTo() | 起点和终点 | 不想依赖外部样式，或者组件复用环境复杂 |
| 参数 | 作用 | 直接效果 |
|---|---|---|
duration | 补间持续时间 | 越短越干脆，越长越有表演感 |
delay | 开始前等待 | 用于错峰启动、让位给别的交互 |
repeat | 重复次数 | 适合 loading、强调反馈、呼吸动效 |
repeatDelay | 每轮重复之间的间隔 | 让循环更有停顿感 |
yoyo | 往返播放 | 常用于 ping-pong、悬浮微动、脉冲 |
ease | 速度曲线 | 决定动画的性格，不只影响速度 |
| 属性 | 含义 | 常见用途 |
|---|---|---|
x / y | 沿坐标轴位移 | 入场、抽屉、标签切换 |
scale | 缩放倍数 | 按钮反馈、卡片强调、缩放入场 |
rotation | 旋转角度 | 图标翻转、卡片旋出、装饰动效 |
opacity | 透明度 | 淡入淡出、占位内容过渡 |
borderRadius | 圆角变化 | 方卡到圆球、按钮圆角过渡 |
skewX / skewY | 倾斜角度 | 做速度感、故障风、卡片错位 |
transformOrigin | 变换基点 | 决定缩放和旋转围绕哪里发生 |
yoyo 只有在 repeat > 0 时才有意义 如果重复次数还是 0，打开 yoyo 不会产生真正的往返效果。
transformOrigin 会改变旋转和缩放的观感 同样是 rotation: 180：
from() 适合“回到设计稿状态” 如果设计稿里的默认样式就是最终状态，from() 会比 to() 更自然，因为你只需要描述“它从哪里来”。
fromTo() 最适合做稳定的组件化动画 当一个组件会在多个页面、多个主题或不同初始样式下复用时，显式声明起点和终点会更可控。
gsap.to('.card', {
y: -12,
scale: 1.02,
duration: 0.35,
ease: 'power2.out'
})gsap.from('.hero-title', {
y: 32,
opacity: 0,
duration: 0.9,
ease: 'power3.out'
})gsap.fromTo(
'.drawer',
{ x: 320, opacity: 0 },
{ x: 0, opacity: 1, duration: 0.6, ease: 'power2.out' }
)duration，再选 ease，最后调位移量。0.2s ~ 0.45s，避免拖泥带水。