液态与有机 · 像水一样
液态指示器Liquid indicator
- 连贯
- 有黏性
- 聪明
选中的那一块往下一格移动时先被拉长、再收回，中间有一段和原地连着 —— 像一滴水被拖过去。它比「指示器平滑滑过去」多了一层「是同一坨东西在动」。
什么时候用它
适合三到五个选项的切换：底部标签、分段控件、工具栏。选项太多、或每一项宽度差很多时别用 —— 拉长的那一下会盖住旁边的字。另外它需要一块连续的底：浮在照片或复杂背景上时，「连在一起」的效果会被背景吃掉，看起来只是一块在抖的色块。
参数
width 62 → 96 → 62px · 320ms · spring-eased via goo filter · labels on an unfiltered layer
配方
液态指示器 → width 62 → 96 @ 320ms
给 AI 的一句话
做一个液态指示器：三层结构 —— 底层是标签栏的底；中间层只放一个指示块，并对这一层加 SVG goo 滤镜（feGaussianBlur 标准差 9，再用 feColorMatrix 把 alpha 乘以 20 再减 9）；顶层是不带滤镜的文字。切换时指示块不是平移过去，而是先拉长再收回：宽度从 62px 到 96px 再回到 62px，同时从旧位置移到新位置（320ms、cubic-bezier(0.32,0.72,0,1)），拉长的方向跟着行进方向走 —— 这样 goo 会把它连成一道液桥，看起来是「被拖过去」。文字必须在滤镜外面另画一层，否则会一起被糊掉。