カーソルとポインタ · ポインタが触れると
近接拡大邻近放大
- 扱いやすい
- 物理的
- 連続
ポインタが近づいた項目が大きくなり持ち上がり、隣は順に小さくなります。大きさを決めるのは距離で、当たり判定ではありません。
使いどころ
端に並ぶ平らなアイコン列に向きます。macOS の Dock のように扱いやすくしたい場面、つまり下部ナビ、ツールバー、サイドレールです。密集した小さな操作部や表の行には使わないでください。大きさが変わると隣が押しのけられます。また拡大率を 1.6 倍より大きくしないでください。アイコンが大きいと隣を覆います。タッチ画面にはポインタがないため成立しません。押したときの反応に置き換えてください。
パラメータ
1 + 0.62 · exp(−d²/(2·46²)) · lift 26px · 90ms first-order follow
レシピ
近接拡大 → 90ms近接拡大 → 1 + 0.62 · exp(−d²/(2 · 46²)) · lift 26px · 90ms first-order follow
AI に渡す一文
macOS の Dock のような近接拡大のアイコン列を作ってください。等幅の項目を並べ、ポインタが近いものが拡大して持ち上がり、隣は順に小さくなります。拡大はガウス曲線 1 + 0.62 かける exp(マイナス d の 2 乗 割る 2 かける 46 の 2 乗) を使います。d はポインタからその項目の中心までの距離です（46px を超えるとほぼ 1 倍）。持ち上げ量は（倍率 マイナス 1）かける 26px、transform-origin は項目の下端に置き、上に伸びるのではなく押し上げられるように見せます。毎フレーム 90ms の一次遅れで目標値に近づけてください。ポインタに直接貼り付けたり、項目ごとに CSS transition を付けたりしないでください。互いに打ち消し合います。ポインタが離れたら元に戻します。