数值 · 03
平滑阶跃
Smoothstep · smoothstep把一段输入范围变成两端平稳的 0→1 过渡。
距离、滚动或形态混合常需要一个有界权重。直接线性截断会在边界突然改变斜率；三次 smoothstep 让两端速度归零，五次 smootherstep 连加速度也归零。它适合空间权重，不能替代所有按时长播放的缓动。
公式
t = clamp((x−edge0)/(edge1−edge0), 0, 1) order 3: t²(3−2t) order 5: t³(6t²−15t+10)
参数
| 本页默认 | 成熟实现 | |
|---|---|---|
| edge0 / edge1 | 0.25 / 0.75 | —边界控制从哪里开始、在哪里结束。 |
| order | 3 or 5 | —五次式在端点的二阶导数为零。 |
怎样做好
- 先归一化并钳住输入，再套多项式；这样区间外严格停在 0 或 1。www-motion/rewrite/filament/geometry.js:1
- 需要边界处更平顺的加速度时选五次式；
filament的形态混合就用了这个版本。www-motion/rewrite/filament/geometry.js:1 - 边界要留出有效宽度；两条边重合时归一化没有可解释的过渡区。
在我们的案例里
32 个案例使用 smoothstep。portfolio-photographer 把三次式用于卡片阵列的空间强调，filament 用五次式混合形态；同一类权重函数服务于两种不同的连续变化。
出现在 32 个案例
参考实现 · basics.js
/** Hermite smoothstep (order 3) or Perlin's smootherstep (order 5, zero 2nd derivative at the ends). */
export function smoothstep(edge0, edge1, x, order = 3) {
const t = clamp(normalize(x, edge0, edge1));
return order === 5 ? t * t * t * (t * (t * 6 - 15) + 10) : t * t * (3 - 2 * t);
}