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

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

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

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

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

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

スタイリング複数 + デュレーション・イージングと組み合わせる

一例を実装してみました。

変形 + 回転 + friction

https://codesandbox.io/s/check-scale-f92qg

浮遊 + パストラッキング + easeExpInOut

https://codesandbox.io/s/shadow-track-zgk61?file=/src/App.tsx

移動 + 色調 + easeQuadInOut

https://codesandbox.io/s/light-on-olkbo

この他にも、組み合わせ次第で様々なモーションを組み立てることができます。