読者です 読者をやめる 読者になる 読者になる

B(ug)log

開発とかぼやきとかLINEスタンプとか http://line.me/S/sticker/1245783 職探し中

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

昨日の続きです。

むずかしいね

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

f:id:u338steven:20160501203938p:plain

じゃ、どうすんの?

こうします(下図参照)

f:id:u338steven:20160501203949p:plain

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

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

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

で、どうなったの?

こうなりました。

f:id:u338steven:20160501203956g:plain

やったぜ。

結論

今日の見出しが酷い。

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