animation-basics

アニメーションの12原則

1. スクワッシュとストレッチ

動きが大きい部分を伸ばし、衝突時に縮めます。面積は常に保ちます。一方の軸を伸ばす場合は、もう一方の軸を縮めます。

2. アンティシペーション

バネに力をためるように、動作の前にエネルギーをためます。スクワッシュとストレッチと組み合わせることもできます。

3. ステージング

• 画面上で目立とうと競合させないでください。一度に1つの動作に絞ると、視線を集められます。
• カメラを使って、興味を引く部分をズームインします。
• 視聴者が情報を理解できるよう、間を入れます。
• テキストは読めるだけの時間、画面に表示します（音読にかかる時間の最大3倍）。

4. ストレートアヘッドとポーズ・トゥ・ポーズ

ポーズ・トゥ・ポーズ：キーとなる状態（開始、終了、いくつかの中間の静止状態）を定義し、その間をトゥイーンで埋めます。これはコードで動きを作る場合のデフォルトです。各 yield* が1つのポーズに当たります。パーティクル、液体、紙吹雪など、有機的またはカオスな動きには、ストレートアヘッド（フレームごとの動き）を使います（物理演算、プロシージャルノイズ、バネなど）。

5. フォロースルーとオーバーラッピングアクション

遅れを加えることでリアリティが生まれます。胴体が先導し、手足などの付属部分が遅れてついてきます。これにより、質量を表現できます。先行する部分と遅れて動く部分には、異なるタイミング関数を使います。スキューを使うと、効果をより強調できます。

6. スローインとスローアウト

リアリティを出すうえで欠かせません。オブジェクトは動き始めと動き終わりにかけて、徐々に加速・減速します。例外は衝突です。衝突の瞬間ではなく、衝突後の動きにだけイージングを適用します。動きが非常に速い場合は、中間フレームが不要なこともあります。アイコンやSVGを中間地点で切り替える場合に最適です。

7. アーク

適切な場合、特に重力が関わる場合は、直線ではなく弧を描くように動かします。

8. セカンダリーアクション

メインアクションを支える補助的な動作です。例：前景の要素が切り替わる間、背景の要素を脈動させる。

9. タイミング

動作の長さと間隔によって、重さや雰囲気が決まります。重いオブジェクトは動き始めと止まるまでに時間がかかり、軽いオブジェクトは素早く動きます。速いタイミングは活気がある印象に、遅いタイミングは穏やか、または重い印象になります。重要なポーズは、視認できるだけの時間保持します。具体的な時間については、以下の「タイミングの目安」を参照してください。

10. 誇張

歪みを強めるのではなく、説得力を高めます。速い動きは、存在に気づいてもらうために、より大きく誇張する必要があります。

11. ソリッドドローイング

より自然で躍動感のある見た目にするため、平行線は避けます。例外として、平行な構造に意図があるグラフやデータビジュアライゼーションでは使用できます。

12. アピール

シンプルに保ちます。細部を追加しすぎないでください。複雑さよりも、明瞭さと読みやすさを優先します。

---

タイミングの目安

アニメーションの役割に応じて、イージングを選びます。

役割	イージング	時間
登場（要素が現れる）	ease-out（easeOutCubic）	0.3～0.5s
退場（要素が消える）	ease-in（easeInCubic）	0.2～0.3s
その場での変化（移動、サイズ変更、色の変化）	ease-in-out（easeInOutCubic）	0.3～0.8s
強調（脈動、ポップ）	オーバーシュートを伴うease-out（easeOutBack）	0.2～0.3s
グループ内のアイテム間のずらし	—	単語ごとに40～80ms、要素ごとに100～150ms

• 登場時に、不透明度だけをアニメーションさせないでください。変形（上昇、 拡大縮小、またはマスクによる表示）と組み合わせます。登場のアニメーションは、約0.8sを超えないようにしてください。
• 素早いease-in-outアニメーションを使うと、動きが最も速く変化が最も目立ちにくい50％地点で、アイコンやSVGを切り替えられます。
• 特に重力が関わる場合など、曲線に沿って動かしたいときは、アークベースの補間を使います。