ディテールと演出 · 仕上げの小技
アイコン変形图标形变
- 同じものが変わる
- 線が移動する
- 入れ替えない
一つのアイコンが二つの状態の間で直接変形します。ハンバーガーがバツに、再生が一時停止に、プラスがマイナスに。二つのアイコンを入れ替えるのではありません。線が実際に移動し、回転し、伸縮します。だから「同じものが変わった」に見えます。
使いどころ
「開く/閉じる」「再生/一時停止」「展開/収納」のような二状態の切り替え、とくに切り替えボタン自体に使います。無関係な二つの形の間では使わないでください。途中が絡まった糸のようになり、クロスフェードの方がましです。
パラメータ
transform: rotate 0→45deg translateY ±7px · opacity 1→0 middle stroke · 240ms cubic-bezier(0.4, 0, 0.2, 1)
レシピ
アイコン変形 → transform: rotate 0→45deg translateY ±7px · opacity 1→0 middle stroke · 240ms cubic-bezier(0.4, 0, 0.2, 1)
AI に渡す一文
ハンバーガーをバツに変形させてください。上下の線はそれぞれ ±45deg へ回転し、同時に中心線の位置へ移動します（各自 ±7px）。中央の線は opacity を 1 から 0 へ、少し短くします。全体 240ms、cubic-bezier(0.4, 0, 0.2, 1) で。三本は同じ時間にしてください。別々にすると「一本先に変わって、あとから寄る」のが見えてしまいます。