淡入与模糊

Fade and blur · fade-blur

用同一个进度让透明度、位移、缩放和模糊一起落位。

单独淡入往往像内容突然浮现；加一点上移与缩放，能让它有明确的来向。模糊负责柔和起点，结束后应把滤镜清掉。本站常用的 blur-rise-in 把四个通道合成一次错峰进场。

公式

p = 1 − (1 − clamp(t / 1 s))^5
opacity = p; y = 30(1 − p) px
scale = .94 + .06p; blur = 6(1 − p) px
item i starts at 0.12i s

参数

	本页默认	成熟实现
rise	30 px	—
scale	0.94 → 1	—
blur	6 → 0 px	—
duration / stagger	1 s / 0.12 s	GSAP `power4.out` = 五次方这组数来自 `momentum-slider` 的进场。

怎样做好

四个通道共用一条进度，单独开关时才看得出每个通道的作用；站内 momentum-slider 用 1 秒、power4.out 和 0.12 秒错峰。www-motion/rewrite/momentum-slider/app.js:85–87
结束时把滤镜设为 none，不要把 blur(0px) 永远留在元素上。www-motion/rewrite/liquid-type/app.js:4
错峰不必给每一行另开计时器；第 i 行的局部进度从总时间减去 i × 0.12 s 得到。www-motion/rewrite/momentum-slider/app.js:85–87
模糊和移动会改变信息出现的方式；减少动态效果时，静止终态仍须完整可读。

在我们的案例里

67 个案例用了透明度或滤镜模糊，23 个用了模糊。六个案例复用 blur-rise-in 家族；momentum-slider 的版本正好是本页的 30 px、0.94、6 px、1 秒和 0.12 秒错峰。

参考实现 · basics.js

/**
 * Opacity + blur driven by one progress value. Drop the filter at rest:
 * even `blur(0px)` keeps a filter layer alive on every element that has it.
 */
export function fadeBlur(progress, { blur = 6, from = 0 } = {}) {
  const b = blur * (1 - progress);
  return { opacity: lerp(from, 1, progress), filter: b > 0.05 ? `blur(${b.toFixed(2)}px)` : 'none' };
}

淡入与模糊

公式

参数

怎样做好

在我们的案例里

出现在 67 个案例

参考实现 · basics.js

相关