空間ナビゲーション実装(その 2)
昨日の続きです。
むずかしいね
空間ナビゲーション機能を実装してみた結果、一番距離が近い要素に移動させる場合、直感とは異なる位置にある要素へ移動するケースが多発しました。理由は下の図を見ていただければ、分かりやすいです。item4 から右方向へ移動したいときを考えると、checkBox3 に移動できれば直感的だと思うのですが、距離的に一番近い要素は comboBox1 なので、そちらへ移動してしまいます。
じゃ、どうすんの?
こうします(下図参照)
移動方向へ直線的に延長した領域(上図の赤い領域)に存在する要素には最優先で移動させます。斜め 45 度方向へ直線的に延長した領域(上図の青い領域)はその次の優先度とします。他の領域は対象外!
斜め 45 度のアイデアの元ネタはこちら
Google Chrome で空間ナビゲーション を書き直した - mallowlabsの備忘録
で、どうなったの?
こうなりました。
やったぜ。
結論
今日の見出しが酷い。
あと、フォーカス移動時のアニメーションを追加してゴマカシていますが、動きがもっさりとしていて遅い……。GIF アニメーションを作成した環境では 1 回の移動で 200-300ms かかり、そのうち 180-200ms が要素の全取得にかかっています。要素の全取得をしないようにするか、部分的に FromPoint 方式を取り入れるか悩みどころ。