アニメーションを設計する方法

アニメーションはグラフである

• 設計するには、再現できて組み合わせられる必要がある。
• すべてのアニメーションは、何らかの入力（時間、スクロール、マウス位置など）に応じて値が変化するものであり、この変化はグラフとして描ける。
• グラフの形がそのまま動きの印象を決め、その曲線を思い通りに作り出すための道具が数学である。

数学の道具

• ベジェ曲線（イージング）: 始点と終点が決まった加減速表現。2つの制御点が磁石のように曲線を引っ張る仕組み。線形補間を再帰的に適用して作られる。同じ動きでも ease-in、ease-out によって伝わる印象はまったく変わる
• 指数的接近: value += (target - value) * factor の1行で目標を滑らかに追従する。目標が毎フレーム変わっても自然。カーソル追従、カウンター、プログレスバーなどに活用
• スプリング: 復元力と減衰力という2つの力に基づく減衰振動。stiffness と damping の2つの値で感触が決まる。イージングと違って duration がなく、目標が変わると現在の速度を保ったまま自然に切り替わる
• 物理シミュレーション: 重力、衝突、摩擦などの物理法則を組み合わせる。要点は「ルールだけ定義すれば、動きは自然に生成される」ということ。紙吹雪のように数十個のオブジェクトそれぞれの軌道を設計する必要はなく、重力と空気抵抗を設定するだけでよい。ただし予測可能性は低いため、UI の主要な遷移よりは補助効果に向いている
• atan2: 2点間の方向を求める関数。要素が移動方向を向いたり、カードがカーソル方向に傾く 3D チルト効果などに活用
• 三角関数: 周期的な繰り返しに最適。複数の要素に位相差を与えると波動効果が生まれる。タイピングインジケーター、浮遊する背景など
• のこぎり波: sin の滑らかな往復と違い、0→1 と進んだ後に即座にリセットされる一方向の反復。パルスリング、ピング、反復プログレスなどに活用

複雑なアニメーションを設計する

• 区間ごとの関数: 複雑な曲線を区間ごとに分割し、各断片を個別に設計してからつなぎ合わせる。物理シミュレーションよりも意図的で細かな調整が可能（例: バウンスの高さを意図的に下げる）
• 依存関係の把握: アニメーション設計の出発点は「値は何に依存しているのか？」である。時間ベース（最も一般的）、値ベース（スクロール、マウス位置）、イベントベース（クリック、ホバーで発火）の3種類に分類できる
• パイプライン化: 断片を時間軸の上に順番に配置する。順次、重なり、同時、スタッガーなどの配置戦略を組み合わせる。各断片は独立して修正できる
• 状態遷移: 時間ではなく条件に応じて次の段階へ進む方式。花火の打ち上げ→爆発→拡散→消滅のように、遷移条件を明示すれば状態マシンで管理できる
• 属性の分離: 複数の属性（サイズ、色、不透明度など）を独立したトラックに分ける。各トラックは互いを知らなくてよいため、微調整や追加がしやすい

考慮事項

• ランダム性: 完全なランダムではなく、制御されたランダムを使う必要がある。「どこまで制御し、どこからランダムに任せるか」の境界設定が重要
• 双方向性: 表示の途中で方向が変わるとき、現在の状態から連続して反転するように設計すれば、ジャンプや不自然さがなくなる

コードアニメーションの限界と強み

• キャラクター動作や精巧なモーフィングのような複雑なアニメーションには、Lottie や Rive のような専用ツールや動画が適している。
• 一方で、コードアニメーションの強みは、ユーザー入力に即座に反応するリアルタイムインタラクションにある。