2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

Reactで表現するUIモーションデザイン【マウス & タッチパネルジェスチャー】

以下記事の続きとなります。

Reactで表現するUIモーションデザイン【モーションスタイリング】

前回の記事でモーションスタイリングによりどのような表現が可能になるのかについて学びました。

これまでの記事ではどちらかといえば、モーションの役割は単純に動いているものをみるだけの「動画(アニメーション)」に近かったものが、今回からユーザーの入力を受け付ける事により「インターフェイスとしての機能」の役割を持つようになります。

車でいうところの「アクセル」「ブレーキ」「ハンドル」などの機能を動作させるためのトリガーと同義となっており、車においてもブレーキの効きが悪かったり、ハンドルの操作性が悪いと著しくユーザー体験が悪くなってしまうように、UIインターフェイスの動作が悪いとユーザーに対して使いにくさを感じさせてしまいます。

マウスジェスチャー手法

react-springreact-use-gestureを使用しながら、マウスからの入力を受けてモーションを変化させる一般的な方法について検証を行っていきます。

https://use-gesture.netlify.app/

ここでは、スニペットとして活用できるように単純な例をサンプルとして上げていますが、モーションスタイリングやSVGイラストと組み合わせることにより多彩なインターフェイスを実現することも可能です。

クリック/ダブルクリック

b5bef464bb8d2b4b7086490f4762ac85.gif

ホバー

※ マウスジェスチャーのみの動作

https://codesandbox.io/s/hover-pwsuh
b629e91186cc3cecb1f685d368453b99.gif

ドラッグ & ドロップ

https://codesandbox.io/s/drag-8bzyb
54784d23e654719d25c657a51a627bf1.gif

マウス移動

https://codesandbox.io/s/mouse-move-ci8ku
6a4f8bd36b3bce06a6b8dc3b7fce0c15.gif

マウスホイール

https://codesandbox.io/s/wheel-ww5bv
a3dc6d0ef92bb57d89894b80ac1dcb5c.gif

ピンチ

※ タッチパネルジェスチャーのみの動作

5a9b01d0bfd6b211a3b702e1273064b1.gif

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?