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

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

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

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

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

マウスジェスチャー手法

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

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

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

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

ホバー

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

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

ピンチ

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