首页修改记录 05：最近摄影的光圈为什么一开始总是不对

最近摄影板块这次改得很久，因为它看起来只是一个相机光圈图案，实际却连续暴露了几个边界问题：形状边界、图层边界、动画边界和照片展示边界。

最早的目标很简单：外面是几张最近照片组成的圆形，中心是模拟相机光圈的叶片，将来还要把“最近摄影”和“跳转图库”放到中心六边形里。它不是普通照片墙，也不是一个静态 icon。它应该像镜头正在打开，照片从光圈外侧展开，中心叶片再形成一个可交互的入口。

真正出错的地方，是我一开始把“看起来像光圈”误解成“把六条线和一个六边形画出来”。

第一个错误：把缝隙当成线

相机光圈的参考图里，叶片之间的分隔并不是一条独立的线。它更像是叶片错开后露出的背景。

但早期实现里，照片之间和中心叶片之间都用额外的 SVG line 或 path 去补缝。这样看静态图时还勉强成立，一旦 hover 或载入动画开始，问题马上出现：

• 线条是另一层，不跟着照片叶片一起动。
• 线宽和照片切割边界不是同一个数学来源。
• 线条端点容易断在中心或外圆边缘，看起来像多余像素块。
• hover 时照片浮起，线还留在原地，直接穿过照片。

这也是后来反复看到“缝隙不直”“线条中断”“浮动后露出固定框线”的根因。因为它们本来就不是同一块几何。

第二个错误：把中心六边形当成填色

模拟光圈的中心六边形也不是应该“画一个白色六边形”。中心区域本质上应该是镂空，露出底色。叶片展开以后，六边形是叶片之间共同留下的空洞，不是一个盖在上面的面。

早期版本把六边形单独填成白色或深色，于是明暗主题下会出现两类问题：

• 浅色主题看起来像多盖了一块白底。
• 深色主题又像硬塞了一个黑洞。

更糟糕的是，这种写法和后续动画冲突。载入动画如果要让叶片开合，中心洞的大小应该由叶片几何自然生成，而不是另一个形状在上面遮出来。

第三个错误：照片圆盘还是旧照片墙逻辑

最近摄影最初是照片墙。后来改成圆盘时，一部分旧思路仍然残留：照片被放在一个固定圆形容器里，再用线条和外框描述切片关系。

这就导致 hover 之后很尴尬：照片叶片已经浮起来了，但容器外圆和分隔线还停在原地。看起来像照片从一个固定框里跑出来，而不是一个完整叶片被抬起。

也就是说，视觉上想要的是“整片叶片浮起来”，结构上却还是“框里的一张图在动”。这个矛盾不修，动效越明显，穿帮越明显。

第四个错误：角度和方向靠调，不靠规则

光圈图案最容易用“试角度”的方式凑。某条边歪了，就旋转几度；某个缝隙宽了，就改一下 strokeWidth。短期看能接近参考图，长期会越来越难维护。

这次反复出错的一个信号就是：每修一个缝，另一个缝又歪了；每把中心调正，照片分割又不对。

原因是照片外圈和中心光圈没有共享规则。它们都在模拟同一个叶片系统，却分别用自己的角度、线条和遮罩。最后自然会出现“外面能分割，里面为什么不行”的感觉。

这次得到的教训

这类图案不能只从视觉表面开始做。它至少有三层关系要先定清楚：

• 叶片本体：真正可动、可 hover 的东西。
• 间隔：不是额外画线，而是叶片让出空间后露出的底色。
• 中心洞：不是填色形状，而是叶片围出来的空白。

只要这三层混在一起，后面就会不断用补丁修补补丁。光圈看起来是图案，其实先是几何。只有几何对了，配色和动画才有地方落。

后面的修改，就是把这些层逐步拆干净。