液体と有機 · 水のように
液体インジケータ液态指示器
- 連続
- 粘性
- 賢い
選択中の塊が伸びてから収まり、途中で元の位置とつながります。水の一滴を引っ張る動きです。
使いどころ
3 〜 5 個の選択肢の切り替えに向きます。下部タブ、セグメントコントロール、ツールバーなどです。選択肢が多い場合や、項目の幅が大きく違う場合は使わないでください。伸びる瞬間に隣のラベルを覆います。また連続した下地が必要です。写真や複雑な背景の上では「つながっている」効果が背景に食われ、震える色の塊にしか見えません。
パラメータ
width 62 → 96 → 62px · 320ms · spring-eased via goo filter · labels on an unfiltered layer
レシピ
液体インジケータ → width 62 → 96 @ 320ms
AI に渡す一文
液体インジケータを作ってください。3 層構造にします。最下層はタブバーの下地、中間層には指示ブロックだけを置き、その層に SVG の goo フィルタ（feGaussianBlur の標準偏差 9 のあと、feColorMatrix でアルファを 20 倍して 9 を引く）をかけます。最上層のラベルにはフィルタをかけません。切り替えは横に滑らせるのではなく、伸びてから収まります。幅は 62px → 96px → 62px、同時に旧位置から新位置へ移動します（320ms、cubic-bezier(0.32,0.72,0,1)）。伸びる向きは進行方向に合わせます。goo がそれを液の橋としてつなぎ、「引きずられている」ように見えます。ラベルはフィルタの外の別レイヤーにしてください。同じフィルタが文字もぼかします。