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

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

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

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

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

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

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

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

移動 (move)

https://codesandbox.io/s/move-fjs2z
MBNrF7ZmJG1T73qgOOlY1607817861-1607818111.gif

変形 (scale)

https://codesandbox.io/s/scale-jo5xk
wD111Jw56XW29iXgrtfC1607818349-1607818443.gif

回転 (rotate)

https://codesandbox.io/s/rotate-xqlo5?file=/src/App.tsx
rkJReNB0pKyMBMfb1HET1607818733-1607818814.gif

透過 (fade)

https://codesandbox.io/s/fade-7shbj
ruUoDqDE5Ud8EsG9jlqJ1607819148-1607819221.gif

浮遊 (shadow)

https://codesandbox.io/s/shadow-8c3po
yV6leOLcHiuWwP1vrQRz1607819465-1607819557.gif

色調 (color)

https://codesandbox.io/s/color-hn2hn
F4TgbUctFv8vqde8Xfuz1607819802-1607819891.gif

パス トラッキング (path-tracking)

https://codesandbox.io/s/path-tracking-m7xwr
z0J7RBNP4GBtitmVk7yy1607820059-1607820110.gif

文字 (text)

https://codesandbox.io/s/count-cc363
f5afa63421811099c2e89a2f5ca8c847.gif

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

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

変形 + 回転 + friction

https://codesandbox.io/s/check-scale-f92qg
vrOk3gInwmfK0IP5DgVT1607825682-1607825802.gif

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

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

移動 + 色調 + easeQuadInOut

https://codesandbox.io/s/light-on-olkbo
ydOyH31itEJhfC1fqF931607842241-1607842312.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