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

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

Reactで表現するUIモーションデザイン【デュレーション & イージング】

前回の記事でモーションの速度・変動率を調整するデュレーションとイージングについて学びました。
今回は引き続きreact-springを使用しながら、CSSのスタイリングを動的に変更することでどのようなモーション表現ができるか検証を行っていきます。

モーションスタイリング手法

ここで紹介しているのは基本的な動きですが、組み合わせで複雑なモーションを実現することもできます。
また、ここでは機械的で無機質な動きになっていますが、自然界に存在する動き・質感・配色を意識することでより人間的で親和性の高いUIを提供できるようになります。
これについてはまた別記事でまとめようと思います。

※ codesandboxにて実際のコードを確認できます。