以下記事の続きとなります。
前回の記事でモーションの速度・変動率を調整するデュレーションとイージングについて学びました。
今回は引き続きreact-spring
を使用しながら、CSSのスタイリングを動的に変更することでどのようなモーション表現ができるか検証を行っていきます。
モーションスタイリング手法
ここで紹介しているのは基本的な動きですが、組み合わせで複雑なモーションを実現することもできます。
また、ここでは機械的で無機質な動きになっていますが、自然界に存在する動き・質感・配色を意識することでより人間的で親和性の高いUIを提供できるようになります。
これについてはまた別記事でまとめようと思います。
※ codesandboxにて実際のコードを確認できます。
移動 (move)
https://codesandbox.io/s/move-fjs2z
変形 (scale)
https://codesandbox.io/s/scale-jo5xk
回転 (rotate)
https://codesandbox.io/s/rotate-xqlo5?file=/src/App.tsx
透過 (fade)
https://codesandbox.io/s/fade-7shbj
浮遊 (shadow)
https://codesandbox.io/s/shadow-8c3po
色調 (color)
https://codesandbox.io/s/color-hn2hn
パス トラッキング (path-tracking)
https://codesandbox.io/s/path-tracking-m7xwr
文字 (text)
https://codesandbox.io/s/count-cc363
スタイリング複数 + デュレーション・イージングと組み合わせる
一例を実装してみました。
変形 + 回転 + 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
この他にも、組み合わせ次第で様々なモーションを組み立てることができます。