MENU
現役エンジニアが教えない、挫折と苦悩のアプリ開発
  1. ホーム
  2. Flutter
  3. Flutterのアニメーションについて

Flutterのアニメーションについて

Flutter

長くなるので、分けることにしました。今日は1日目

目次

アニメーションの基本

アニメーションって何?
アニメーションは、値を時間をかけて変化させること!
比喩で言うと: 電気のスイッチではなく、調光器のようなもの。

スイッチ: パチッ(OFF → ON)
調光器: じわ〜っ(暗い → 明るい)

Flutterのアニメーション 3つの種類

1️⃣ 暗黙的アニメーション (Implicit)

特徴:

  • 超簡単! 初心者向け
  • 自動でアニメーション
  • コード量が少ない

例: AnimatedContainer, AnimatedOpacity
使う場面: ボタンの色変化、サイズ変更、フェードイン/アウト

2️⃣ 明示的アニメーション (Explicit)

特徴:

  • 細かく制御できる
  • ちょっと複雑
  • カスタマイズ自由

例: AnimationController, Tween
使う場面: 回転、複雑な動き、繰り返し

3️⃣ Hero アニメーション

特徴:

  • 画面遷移で使う
  • かっこいい!
  • 簡単

例: 写真タップで拡大
使う場面: 詳細画面への遷移

使い方のコツ

アニメーションは控えめに

// ❌ やりすぎ
AnimatedContainer(
  duration: Duration(seconds: 2),  // 長すぎ!
  curve: Curves.elasticOut,        // 派手すぎ!
)

// ✅ 適度
AnimatedContainer(
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
)

ルール: アニメーションは脇役。主役はコンテンツ!

一貫性を保つ

// アプリ全体で統一
class AppAnimations {
  static const Duration fast = Duration(milliseconds: 150);
  static const Duration normal = Duration(milliseconds: 300);
  static const Duration slow = Duration(milliseconds: 500);
  
  static const Curve defaultCurve = Curves.easeInOut;
}

// 使う
AnimatedContainer(
  duration: AppAnimations.normal,
  curve: AppAnimations.defaultCurve,
)

ルール: アニメーションは脇役。主役はコンテンツ!

パフォーマンスを意識

// ✅ 良い - 軽い
AnimatedOpacity(opacity: 0.5, ...)
AnimatedContainer(color: Colors.red, ...)

// ⚠️ 注意 - 重い
AnimatedContainer(
  decoration: BoxDecoration(
    gradient: LinearGradient(...),  // グラデーションは重い
    boxShadow: [...]  // 影も重い
  ),
)

ルール: アニメーションは脇役。主役はコンテンツ!


Flutterのアニメーションについては、明日以降長くなるので分けてまとめていこうと思います

1: 暗黙的アニメーション(簡単!)
2: 明示的アニメーション(細かい制御)
3: Hero アニメーション(画面遷移)
4: パッケージ(Lottie など)

Flutter
目次