Help us understand the problem. What is going on with this article?

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

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

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

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

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

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

マウスジェスチャー手法

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

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

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

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

https://codesandbox.io/s/click-doubleclick-i9iru

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

ピンチ

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

https://codesandbox.io/s/pinch-b1dmb

5a9b01d0bfd6b211a3b702e1273064b1.gif

stranger1989
React、Typescript、AWSを駆使してWebアプリケーションの開発を行っています。
moff
介護施設、リハビリ施設用向けアプリを開発・運営するIoTスタートアップ
https://jp.moff.mobi/
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