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

近年UIの表現方法の進化によって、単純にUIのレイアウトや配色・大きさが整っていてわかりやすいだけでなく、モーション（アニメーション・マイクロインタラクション）によるユーザーサポートがUX向上に大きな影響を与えるようになってきました。

Webやアプリは単に「閲覧する」だけでなく「使うための道具」として、より物理的に存在する道具と同等に高度な機能を求められているということだと思います。

その一方でUIモーションはユーザーのUXを著しく害する要因にもなっており、「不用意にモーション（アニメーション）はアプリに組み込むべきではない」とApple - Human Interface Guidelinesに記載があるとともに、GoogleのMaterial Designでもベストプラクティスについての記述が事細かにドキュメント化されています。

Apple - Human Interface Guidelines
Google - Material Design Understanding motion

つまり、UIにモーションの付与するということは毒にも薬にもなる諸刃の刃になるといったところでしょうか。
その用法を知らずに乱用してはUXを向上されるどころか、逆効果になってしまいます。
そのため、「モーションデザイン」についての知見を身につける必要があります。

今回は、モーションデザインを学ぶ一環として、モーションをコントロールするための基礎ともいえる、「デュレーション」と「イージング」について、Reactのパッケージreact-springとd3-easeを活用しながらどういった手法があるのかまとめてみました。

そもそも 「デュレーション」 ・ 「イージング」 とは？

簡単な説明を行います。
詳しくはGoogleのMaterial DesignのSpeedを読んで頂いたほうが深く理解できると思います。

https://material.io/design/motion/speed.html#controlling-speed

デュレーション

モーションの「継続時間」のことです。
すべてのモーションに対して同一のデュレーションを設定するのではなく、ユーザーの行ったアクションにより時間を変更することにより、よりスムーズな使用感を得ることができます。
（例えば、ページを「開く」動作よりページを「閉じる」動作を高速にするなどが該当します。）

イージング

モーションの「変化の緩急」のことです。
直線的な動きは機械を連想させ、ユーザーに不自然な違和感を感じさせてしまいます。
自然界には「重力」「摩擦」「空気抵抗」などが存在し、動きの変化は常に一定になることはありません。
適切にイージングを使い、より自然界の動きに近い動作の緩急を再現することでより自然な使用感を実現できます。

PlayGround

codesandboxにて簡単な位置移動のイージングを試せるデモページを用意しました。

configのduration・easing（イージング手法については後述します）を変更すると速度・速度の変化を体感することができると思います。
モーションはreact-springの一番基礎的なhooks APIであるuseSpringを使っています。
（useSpringだけでも多彩なモーションを実現することが可能です。）

また、後述するイージングデモではx軸方向にしか位置変動させていませんが、
y軸・z軸・スケールを変動させてみると面白いモーションを実現することができます。

デモページ

コード

import React, { FC } from "react";
import { useSpring, animated } from "react-spring";
import * as easings from "d3-ease";

const App: FC = () => {
  const { xyzs } = useSpring({
    from: { xyzs: [0, 100, 0, 1] },
    xyzs: [300, 100, 0, 1],
    loop: true,
    // configでパラメータを変化させることで動作が変化する
    config: {
      duration: 2000,
      easing: easings.easeLinear
    }
  });

  return (
    <animated.svg
      style={{
        transform: xyzs.to(
          (x, y, z, s) => `translate3d(${x}px, ${y}px, ${z}px) scale(${s})`
        )
      }}
    >
      <circle cx="100" cy="50" r="40" fill="black" />
    </animated.svg>
  );
};

export default App;

react-spring公式ドキュメント

https://www.react-spring.io/

イージング手法

もちろん手動でイージング数値を指定しても良いのですが、react-springとd3-ease組み合わせて使うと、予め用意された関数から深く考えることなくイージング手法を試すことができます。

https://www.npmjs.com/package/d3-ease

イージンググラフによる変化量と実際の動きを対比させながら、手法を検証していきます。
（イージンググラフは https://observablehq.com/@d3/easing からの引用です。）

easeLinear(t)

イージングなし。

easeQuadIn(t)

easeQuadOut(t)

easeQuadInOut(t)

easeExpIn(t)

easeExpOut(t)

easeExpInOut(t)

easeCircleIn(t)

easeCircleOut(t)

easeCircleInOut(t)

easeBackIn.overshoot(2)(t)

easeBackOut.overshoot(2)(t)

easeBackInOut.overshoot(2)(t)

easeBounceIn(t)

easeBounceOut(t)

easeBounceInOut(t)

モーションデザイン参考サイト

デモページを見ているだけでも様々なインスピレーションが得られるサイトです。

• https://observablehq.com/
• https://tympanus.net/codrops/