icons-badges

アイコンとバッジのアニメーション原則

ディズニーの12の原則を小さなUI要素に適用し、個性と意味のあるフィードバックを加えます。

アイコンに適用する原則

1. 伸縮

「いいね」のタップに合わせて、ハートのアイコンを伸縮させます。通知バッジは、表示時に伸縮しながら跳ねます。小さな要素に生命感を与えます。

2. 予備動作

アイコンが動作する前に、50msの間、短く縮小（0.9）させます。ベルは前方に揺れる前に後ろへ傾けます。動作への心構えを促します。

3. 演出

アクティブなアイコンや重要なアイコンは、色、サイズ、アニメーションで視覚的に目立たせます。バッジには、目を引く対照的な色を使います。

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

シンプルなアイコンには、ポーズ・トゥ・ポーズ（2つの状態）を使います。モーフィングなどの複雑なアイコンアニメーションには、自然な遷移を実現できるストレートアヘッドを使います。

5. 後追いとオーバーラッピングアクション

ユーザーの操作が止まった後も、ベルの揺れは続きます。バッジの跳ねが収まる前に、バッジの数字を更新します。複数のパーツからなるアイコンは、タイミングをずらします。

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

アイコンのホバーにはease-outを使います。アイコンのクリックにはease-in-outを使います。跳ねには、行き過ぎる動きを表現するcubic-bezier(0.68, -0.55, 0.27, 1.55)を使います。

7. 弧を描く軌道

ベルの揺れは振り子の弧を描きます。更新アイコンは、正確な円弧に沿って回転します。状態変化時に矢印を弧に沿って動かすこともできます。

8. 副次的アクション

アイコンが（主要な動作として）拡大する間に、色を変化させ（副次的な動作）、さらにグローを脈動させます（三次的な動作）。バッジが跳ねる間に、バッジの数を変化させます。

9. タイミング

• ホバー時の拡大：100-150ms
• クリック時のフィードバック：50-100ms
• バッジの跳ね：300-400ms
• ベルの揺れ：400-600ms
• ステータスの脈動：1500-2500ms
• モーフィングの遷移：250-350ms

10. 誇張

紙吹雪やハートなどのお祝いを表すアイコンは、大きくアニメーションさせます。メニューや閉じるボタンなどの機能アイコンは、控えめにします。用途に合わせて調整します。

11. 立体感のある描画

アニメーションのどのフレームでも、アイコンが鮮明に保たれるようにします。線の太さを一定に保ちます。バッジの数字は、動いている間も読みやすくします。

12. 魅力

アニメーション付きのアイコンは、個性を加えます。跳ねる通知には生命感があります。脈動するステータスは、すばやく反応している印象を与えます。小さな工夫が大きな違いを生みます。

CSSの実装

.icon-btn:hover .icon {
  transform: scale(1.15);
  transition: transform 150ms ease-out;
}

.icon-btn:active .icon {
  transform: scale(0.9);
  transition: transform 50ms ease-in;
}

.badge {
  animation: badgeBounce 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes badgeBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.status-indicator {
  animation: pulse 2000ms ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

.bell-icon:hover {
  animation: ring 500ms ease-in-out;
}

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(15deg); }
  40%, 80% { transform: rotate(-15deg); }
}

主なプロパティ

• transform：拡大縮小、回転
• opacity：脈動効果
• animation：複雑なシーケンス
• fill/stroke：SVGの色の変化
• filter：グロー効果