幂次缓动

Power easing · ease-power

把匀速的 0→1 弯成先快后慢、先慢后快或两头慢。整站最常用的缓动。

缓动决定“像不像真的东西在动”。out 起步快、到达轻，适合进场和响应点击；in 起步慢、离开快，适合退场；inOut 两头都柔和，适合在两个位置之间搬运。指数越大，曲线越陡，起步速度是匀速的 p 倍。

公式

in    f(t) = t^p
out   f(t) = 1 − (1 − t)^p
inOut f(t) = t < ½ ? (2t)^p / 2 : 1 − (2(1 − t))^p / 2

f′(0) for out = p   (starts p× faster than linear)

参数

	本页默认	成熟实现
p	3（cubic）	GSAP `power1…4` = p 2…5GSAP 的 powerN 指数是 N+1：`power4` 是五次方（quint），不是四次方。
kind	out	GSAP 默认 `power1.out`
duration	1 s	界面过渡 150–300 ms；进场可更长Emil Kowalski：界面过渡保持在 300 ms 以内

怎样做好

进场用 out，退场用 in，退场比进场快约三分之一。对称的 inOut 用在“从这里到那里”，不用在弹出层。Material 3 easing tokens; Emil Kowalski, “Great animations”
写清楚指数，不要只写名字。规格写 power4.out 时，GSAP 实际是 1 − (1 − t)^5；手写成 ^4 就悄悄变了曲线。GSAP src/gsap-core.js:1066–1068
指数不必是整数。iris 的开门用 1 − (1 − t)^3.2，介于 cubic 与 quart 之间，正好是设计要的那一口气。www-motion/rewrite/iris/iris.js:2
缓动只塑形，不决定时长。同一条曲线放在 0.2 s 和 1.2 s 里感觉完全不同，两者一起调。

在我们的案例里

62 个案例用了幂次缓动，多数是手写公式（1 − (1 − t)^n、t*t*t）。点名使用的 GSAP 缓动里，power3.out 与 power4.out 最多（各 8 个案例）。站内招牌进场 blur-rise-in（1 s power4.out，0.12 s 错峰）出现在 6 个案例。

参考实现 · basics.js

/** Power easing with any exponent (2 = quad, 3 = cubic, 4 = quart; 3.2 is fine too). */
export function power(p = 3, kind = 'out') {
  if (kind === 'in') return t => t ** p;
  if (kind === 'out') return t => 1 - (1 - t) ** p;
  return t => (t < 0.5 ? (2 * t) ** p / 2 : 1 - (2 * (1 - t)) ** p / 2);
}

幂次缓动

公式

参数

怎样做好

在我们的案例里

出现在 62 个案例

参考实现 · basics.js

相关