空間ナビゲーション実装(その 2)

昨日の続きです。

むずかしいね

空間ナビゲーション機能を実装してみた結果、一番距離が近い要素に移動させる場合、直感とは異なる位置にある要素へ移動するケースが多発しました。理由は下の図を見ていただければ、分かりやすいです。item4 から右方向へ移動したいときを考えると、checkBox3 に移動できれば直感的だと思うのですが、距離的に一番近い要素は comboBox1 なので、そちらへ移動してしまいます。

じゃ、どうすんの？

こうします(下図参照)

移動方向へ直線的に延長した領域(上図の赤い領域)に存在する要素には最優先で移動させます。斜め 45 度方向へ直線的に延長した領域(上図の青い領域)はその次の優先度とします。他の領域は対象外!

斜め 45 度のアイデアの元ネタはこちら

Google Chrome で空間ナビゲーション を書き直した - mallowlabsの備忘録

で、どうなったの？

こうなりました。

やったぜ。

結論

今日の見出しが酷い。

あと、フォーカス移動時のアニメーションを追加してゴマカシていますが、動きがもっさりとしていて遅い……。GIF アニメーションを作成した環境では 1 回の移動で 200-300ms かかり、そのうち 180-200ms が要素の全取得にかかっています。要素の全取得をしないようにするか、部分的に FromPoint 方式を取り入れるか悩みどころ。