UIモーション設計の考え方

UIアニメーションを作っていると、こんな状態になりませんか？

Scroll系はScrollで書いている
Hoverはその場で書いている
Dragは別のロジック

👉 全部バラバラ

これだと、後から追加・修正がどんどんつらくなります。

この記事では、
UIモーションを“設計として整理する考え方”を解説します。

※状態管理そのものについては以下の記事で詳しく解説しています
→ 状態管理の基本

1.なぜ設計が必要なのか

アニメーションは見た目だけでなく、以下の要素で構成されています。

いつ動くか（Trigger）
何が変わるか（State）
どう動くか（Animation）

これを整理しないと

コードが増えるほど破綻する
同じ処理を何度も書く
挙動がバラバラになる

2.モーション設計の3要素

① Trigger（きっかけ）

アニメーションが始まる条件です。

例：

スクロール
クリック
ホバー
ドラッグ

スクロールをトリガーにしたアニメーションは、以下の記事で詳しく解説しています
→ Scroll Trigger Animation

② State（状態）

UIがどの状態にあるか。

例：

default
active
hover
hidden

👉 重要：アニメーションは“状態の変化”として考える

③ Animation（変化の仕方）

状態が変わるときの動き。

例：

easing
duration
delay

アニメーションの動き（easing）については、こちらの記事で詳しく解説しています
→ easingの作り方

3.設計の基本パターン

const state = {
  isActive: false
}

function update() {
  if (state.isActive) {
    element.style.transform = 'scale(1.1)'
  } else {
    element.style.transform = 'scale(1)'
  }
}

👉 ポイント

「状態」を持つ
描画は状態から決まる

4.アンチパターン（よくある失敗）

❌ 直接アニメーションを書く

element.addEventListener('click', () => {
  element.style.transform = 'scale(1.1)'
})

👉 問題

状態が管理されていない
他の処理と競合する

5.実践：統一されたモーション管理

const state = {
  hover: false,
  active: false
}

function render() {
  let scale = 1

  if (state.hover) scale = 1.05
  if (state.active) scale = 0.95

  element.style.transform = `scale(${scale})`
}

👉 これで

HoverとClickが共存できる
挙動が一貫する

6.実験：Motion System Demo

このデモでは

hover
click
scroll

👉 すべてを「state」で制御しています

この設計のメリット

複数のアニメーションが干渉しない
拡張が簡単
デバッグしやすい

👉 “あとから追加できるUI”になる

このデモでは、requestAnimationFrameを使って毎フレーム描画を更新しています。

このようなループ処理については、こちらで詳しく解説しています👇
→ Animation Loopの作り方

7.まとめ

UIモーションは「動き」ではなく、

👉 状態の変化として設計する

これだけで👇

コードが整理される
挙動が安定する
UIの品質が上がる

UIモーション設計の考え方｜バラバラ実装を卒業する