状態間のトランジション · A から B へ
原点からの円形展開原点圆形扩散
- その点から広がる
- 波紋のよう
- 一枚の層
アイコンをタップすると、層全体はフェードでも横からの進入でもなく、アイコンのある点から波紋のように円を描いて広がり、画面いっぱいまで達します。もう一度タップすると同じ点へ縮みます。
使いどころ
全画面メニュー、テーマ切替、ボタンから開く詳細に向きます。どこから出てきたかが一目で分かります。そのボタンと関係のない層に使うと、その結びつきが誤解を生みます。
パラメータ
transform-origin: centre of the tapped element · radius 0 → hypot(w, h) · 620ms cubic-bezier(.22,1,.36,1) · closes along the same path
レシピ
原点からの円形展開 → radius 0 → hypot w @ 620ms cubic-bezier(.22,1,.36,1)
AI に渡す一文
このメニューをボタンの原点から展開させてください。タップされた要素の中心を円の中心にし、clip-path: circle(半径 at x y) で半径を 0 から最も遠い角までの距離（対角線）へ 620ms cubic-bezier(.22,1,.36,1) で補間します。閉じるときは同じ経路を逆に縮めます。層自体のサイズは変えません。