通道 · 22
裁剪与遮罩
Clip and mask · clip-mask裁剪给内容一条清晰边界；渐变遮罩让边界逐渐透出。
揭幕不是让整块内容淡入，而是控制哪一部分可见。圆形裁剪尤其容易算错半径：若从点击点扩张，固定用容器中心的半对角线会让远角留白。按点击点到最远角的距离计算，终点才真正盖满。
公式
R = max distance((cx,cy), each of four corners) clip-path: circle(r px at cx px cy px) mask-image: linear-gradient(90deg, opaque, transparent)
参数
| 本页默认 | 成熟实现 | |
|---|---|---|
| origin | 点击点 | — |
| radius | 到最远角的距离 | —舞台尺寸或起点变了就重算。 |
| edge | 圆形硬边 / 渐变软边 | — |
怎样做好
- 圆形揭幕以触发点为圆心，半径取四角距离的最大值；只用中心半对角线会漏掉远角。
- 要清晰边界就用
clip-path；要渐隐边界就用渐变mask-image。两种写法在站内分别可见于 iris 和 benchmark。www-motion/rewrite/iris/app.js:5; www-motion/rewrite/benchmark/index.html:30–31 - 圆心使用元素内部坐标，尺寸改变后重算半径；避免拿视口坐标直接拼进元素的裁剪值。
- 裁剪与透明度可以并用。
pixels切换文字时只让前后两段保持可见，再给各自写入inset()。www-motion/rewrite/pixels/render.js:4
在我们的案例里
10 个案例用了 clip-path 或 mask，其中只有 cutout 被标为 mask。iris 用圆形裁剪打开镜头；pixels 用两条相反的 inset() 让旧文案和新文案交接。
出现在 10 个案例
参考实现 · basics.js
/** Radius that covers the whole element from (cx, cy): the distance to its farthest corner. */
export const coverRadius = (w, h, cx, cy) => Math.max(Math.hypot(cx, cy), Math.hypot(w - cx, cy), Math.hypot(cx, h - cy), Math.hypot(w - cx, h - cy));
export const circleClip = (r, cx, cy) => `circle(${r.toFixed(1)}px at ${cx}px ${cy}px)`;