アニメーションの定義と、何が「動いている」のか

アニメーションとは、時間の経過に応じて画像や形状などの見た目を変化させる表現・仕組みです。視覚的には「連続した状態の切り替え」に見えますが、実装の考え方としては、ある時刻ごとの状態（位置・大きさ・透明度・回転など）を用意し、次の状態へ滑らかにつなぐことで動いているように感じさせます。

ポイントは、動きそのものではなく「どの時点で何がどう変わるか」という設計が中心になることです。そのため、同じ内容でも時間設計やつなぎ方が違うと、体感される印象（速い／重い、滑らか／カクカク、自然／ぎこちない）が変わります。

シンプルなモデル：状態の列とつなぎ（タイミング／補間）

理解しやすい形にすると、アニメーションは次の2要素で説明できます。

1つ目は、状態の列です。例として「位置」「透明度」「回転角」などの値を、特定の時刻（またはフレーム）で定めます。

2つ目は、つなぎです。定めた状態の間をどう埋めるか（補間）で、動きの曲線が決まります。また、全体の長さ（再生時間）や、どの間隔で状態を評価するか（更新頻度・フレームレート相当）も影響します。

さらに、つなぎ方には「イージング（速度を一定にしない設計）」のような概念があり、開始や終了をゆっくりにして自然に見せたり、逆にキリッと止めて強調したりできます。

制限と破綻が起きる典型パターン

アニメーションには便利さがある一方で、設計の条件が崩れると破綻しやすいです。代表例を挙げます。

  • カクつき：状態の間隔が粗い、または更新が追いつかないと、滑らかさが失われます。体感としては細かな段差やチラつきに見えます。
  • 速度感のズレ：再生時間やイージングの想定と、実際の表示側の条件が合わないと「速すぎる／遅すぎる」「意図した重さにならない」と感じます。
  • ジャンプ：ループのつなぎや、状態の定義に欠けがあると、ある瞬間に値が飛んで不自然に見えます。
  • タイミング依存：ほかの動きや処理（例：ユーザー操作、レイアウト変化、複数要素の連動）と噛み合わないと、意図した同期になりません。