（参考ブログ）
「Flutter animation basics with implicit animations
（暗黙的なアニメーションを使ったFlutterアニメーションの基礎）（by Alethea K.Flowers）」

　上記のブログでは（タイトルにもある様に）暗黙的なアニメーションを使ったFlutterアニメーションについて基礎的なノウハウが記載されています。以下では、ざっくり要点だけを列記してあります。

　こちらの記事では、Flutterでアニメーションを実装するための基礎について解説されています。
特に、初心者でも簡単に利用できる「暗黙的（インプリシット）アニメーション」に焦点を当てています。

　この記事は、Flutterアプリにアニメーションを追加する最も簡単な方法に焦点を当て、アニメーションの専門的な知識がなくても実装できることを示しています。また、アニメーションの基礎となるウィジェットや用語を紹介し、シリーズの他の記事で役立つ背景知識も提供しています。加えて、アニメーションの用語やFlutterで使われる基本的なアニメーションのウィジェットについても触れ、初心者がすぐに使えるような内容になっています。

　動画形式でも同様の内容が提供されているため、好みに応じて視聴しながら学習することも可能です。

１．暗黙的にアニメーション化されたウィジェット

（参照動画）Implicit Animations

　Flutterには、通常のウィジェットにアニメーション機能を加えた「インプリシットアニメーション付きウィジェット」と呼ばれるウィジェットのシリーズがあります。（例えば、Container ウィジェットにアニメーション機能を追加した AnimatedContainer や、Positioned ウィジェットのアニメーションバージョンである AnimatedPositioned 等が含まれます。）

　これらのウィジェットはプロパティの変更を自動的にアニメーション化します。（例えば、StatefulWidget 内で setState を使ってプロパティの値を変更すると、ウィジェットが自動的に以前の値から新しい値までアニメーションで遷移するように設定されています。）この仕組みにより、開発者は特別なアニメーション制御コードを追加することなく、簡単にアニメーション効果をアプリに導入することが可能です。

　これらのウィジェットは、アプリにアニメーションを追加する際にまず使うべきものであり、複雑なコードを追加せずにアニメーションを実現できるため、非常に扱い易いのが特徴です。

２．AnimatedContainer ウィジェット

２-１．Container 再描画による画像の幅の即時更新（アニメーション効果なし）

　以下のコードでは、Container ウィジェットを使ってボタン操作でサイズを変更するシンプルな例を示しています。
（このコードの中では、ボタンを押す度に _bigger というフラグが true から false、またはその逆に切り替わります。
このフラグの状態に応じて Container の width プロパティが 100 または 500 に変化しますが、この変更は即座に行われ、アニメーションは適用されません。）

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      //Container ウィジェットは、画像とともに表示されますが、
      //_bigger の値に応じて幅が変わります。
      Container(
        width: _bigger ? 100 : 500, //`_bigger` の値に応じて幅が変わる
        child: Image.asset('assets/star.png'), //表示する画像
      ),
      //ボタン (RaisedButton) の onPressed コールバックで 
      //setState() が呼び出され、_bigger の値が切り替わります。
      //この操作により、Container が再描画され、
      //幅が新しい値に即座に更新されますが、アニメーション効果はありません。
      RaisedButton(
        onPressed: () => setState(() {
          _bigger = !_bigger; //ボタンが押されるたびに `_bigger` の値を反転
        }),
        child: Icon(Icons.star), //ボタンのアイコン
      ),
    ],
  );
}

２-２．AnimatedContainer に変更して duration パラメータを追加（アニメーション追加）

　次に、Container を AnimatedContainer に置き換え、duration パラメータを追加します。
これにより、ボタンを押して幅を変更すると、１秒間かけてスムーズにサイズが変わるアニメーションが追加されます。
AnimatedContainer は、古い値と新しい値の間を滑らかに遷移する「補間（interpolation）」を自動的に行ってくれます。
これで、ボタンが押されると、コンテナーは以前の幅の値から新しい値まで徐々にアニメーション化されます。

AnimatedContainer(
  width: _bigger ? 100 : 500,
  child: Image.asset('assets/star.png'),
  duration: Duration(seconds: 1),
),

２-３．AnimatedContainer の decoration プロパティに BoxDecoration を設定（補完しながらアニメーション実行）

　の説明では、AnimatedContainer がどのようにプロパティの変化をスムーズにアニメーションさせるかを説明しています。このアニメーションの過程で、古い値から新しい値へと徐々に変化させることを「補間（interpolation）」と呼びます。AnimatedContainer は、プロパティが変化するたびに自動的にその間の値を補間してアニメーションを作成します。

　この補間は、AnimatedContainer のすべてのプロパティに適用されます。たとえば、decoration プロパティ内のグラデーション（gradient）を変更すると、AnimatedContainer が古いグラデーションから新しいグラデーションにスムーズに変化するように補間を行います。

　以下のコード例では、AnimatedContainer の decoration プロパティに BoxDecoration が設定されています。その中の RadialGradient の colors と stops の値が _bigger の値に応じて変化します。このとき、AnimatedContainer が古い stops の値から新しい値へと補間しながらアニメーションを実行します。

（width は不要です。AnimatedContainer のアニメーション効果を得るために必要なのは、アニメーションさせたいプロパティの変化と duration です。この場合、アニメーションの対象は BoxDecoration の gradient プロパティであり、width プロパティの設定は必須ではありません。）　

AnimatedContainer(
  duration: Duration(seconds: 1), // アニメーションの持続時間を指定
  decoration: BoxDecoration(
    gradient: RadialGradient(
      colors: [Colors.purple, Colors.transparent],
      stops: [ _bigger ? 0.2 : 0.5, 1.0]
    ),
  ),
),

３．接続時間と曲線でアニメーションを制御する

３-１．curve プロパティに Curves クラスを設定（加速と減速の効果を与える）

　こちらの説明では、アニメーションの補間方法をカーブ (Curve) を使って制御する方法について述べられています。

　デフォルトでは、AnimatedContainer の補間（値の変化）は線形（リニア）で行われますが、これを curve プロパティを使用して変えることができます。Curves クラスにはさまざまなカーブが用意されており、例えば Curves.easeInOutQuint は、より強調された五次カーブ（quintic curve）で、開始と終了が滑らかで中間で速くなるという特性を持っています。これにより、アニメーションに自然な加速と減速の効果を加えることができます。

AnimatedContainer(
  width: _bigger ? 100 : 500,  // アニメーションの対象プロパティ
  child: Image.asset('assets/star.png'),
  duration: Duration(seconds: 1),  // アニメーションの持続時間
  curve: Curves.easeInOutQuint,  // 補間のカーブを指定
),

３-２．様々な Curves クラス（遅い開始で徐々に加速／バウンド／不連続な動き等）

　こちらの説明は、Flutterでアニメーションに個性を与えるために「カーブ（Curves）」を使用する方法について説明しています。Flutterにはさまざまなビルトインのカーブが用意されており、これによりアニメーションの動きを簡単に調整できます。また、自分でカスタムカーブを定義することも可能です。

（１）既存カーブの種類（Curves クラスの”静的フィールド”）

　ビルトインのカーブには、Curves.easeIn や Curves.bounceOut などのさまざまな種類があり、各々異なる動きを表現します。
（例えば、Curves.easeIn は開始が遅く徐々に加速するカーブで、Curves.bounceOut はバウンドするような動きを持っています。また、不連続な動き（鋸歯状の動き）を表現する SawTooth カーブもあります。）
（補足）Curves. の後ろにある部分は、Curves クラスの静的フィールドといいます。

（２）カスタムカーブの定義

　カスタムカーブも独自に定義可能で、以下はサイン関数を使った SineCurve というカーブの例です。
このカーブは、アニメーションにバウンドするような効果を与えます。

class SineCurve extends Curve {
  final double count; //サイン波の周期数を表す

  SineCurve({this.count = 1});

  @override
  double transformInternal(double t) {
    return sin(count * 2 * pi * t) * 0.5 + 0.5; //サイン関数（カーブを定義）
  }
}

AnimatedContainer(
  width: _bigger ? 100 : 500,
  child: Image.asset('assets/star.png'),
  duration: Duration(seconds: 1),
  curve: SineCurve(count: 3), // カスタムカーブを指定
),

４．ここまでの要点

　要約すると、Flutterには多くの暗黙的（Implicitly）アニメーションウィジェットが用意されており、これらは一般的なウィジェットのアニメーションバージョンです。これらのウィジェットのアニメーションを制御するために、duration（期間）やcurve（カーブ）プロパティを使用できます。

　特にAnimatedContainerは、見た目を変えるための様々なプロパティを持ち、全てが自動的に補間（interpolation）されるため、非常に強力なウィジェットです。（他の暗黙的アニメーションウィジェットも、コードの複雑さを増やさずに簡単にアニメーションを追加するための便利なオプションです。）

　また、これらのウィジェットを必ずしもStatefulWidgetに入れてsetStateで更新する必要はありません。
（例えば、StreamBuilder や FutureBuilder を使ってアニメーションをトリガーすることも可能です。この方法により、非同期データに基づいてウィジェットの更新を行い、その際にアニメーションを活用できます。）

５．補足（アニメーション作成時の選択肢）

　このサイトには、アニメーション作成時の選択肢についてのフローチャートがありますが、これをごく簡単なメモ程度に以下に転記しておきます。

（１）簡単なアニメーション

　単なるUI要素（既存図形、既存画像）を使った簡単な動作（移動、拡大、色の変更）によるアニメーション

　　→　① テキストベース

　　　　→　AnimatedDefaultTextStyle を利用する

　　→　② 方向性のあるアニメーション

　　　　→　暗黙的アニメーション化された AnimatedFoo ウイジェットがあれば利用する　⇒　以下の「６．（２）」（このブログ）

　　　　→　（既存組込が無ければ）TweenAnimationBuilder で独自にカスタマイズする　⇒　以下の「６．（３）」

　　→　③ 逆戻りや不連続なアニメーション

　　　　→　既存の FooTransition ウィジェットがあれば利用する
　　　　　　（例：SlideTransition、FadeTransition 等）　⇒　以下の「６．（４）」

　　　　→　既存組込が無い　⇒　以下の「６．（５）」

　　　　　　→　独立したウィジェットにしたい

　　　　　　　　→　AnimatedWidget をサブクラス化して独自のアニメーションを定義する
　　　　　　　　　　（状態は持たないが、管理がしやすくなる）

　　　　　　→　別のビルドメソッドにネストしたい

　　　　　　　　→　AnimatedBuilder を利用する
　　　　　　　　　　（対象の一部だけを更新する形でアニメーションを行う）

（２）複雑なアニメーション

　① 複雑なグラフィックスを含んだアニメーション

　　→　アニメーションフレームワーク（Flare、Lottie、等）を利用する

　② その他（上記Ａ．Ｂ．でパフォーマンスが悪い場合）

　　→　CustomPainter を利用する

６．アニメーションの掘り下げ

　暗黙的にアニメーションするウィジェットはアニメーションを追加する最初の選択肢ですが、Flutterのアニメーションシステムが提供するものはこれだけではありません。 このシリーズの続きでは、Flutterのアニメーションシステムの下層を探索し、アニメーションシステムを直接使って高度なアニメーションを構築する方法を紹介します。

（１）自分に最適な Flutter アニメーションウィジェットを選択するには

（２）（この記事）暗黙的なアニメーション（pre-packaged implicit animation）の基礎

　（参照動画）Implicit Animations

（３）暗黙的なアニメーションのカスタマイズ（TweenAnimationBuilder の利用）

（参照動画）TweenAnimationBuilder

（４）（ビルドインウィジェットがある場合）明示的な方向性のあるアニメーション

（参照動画）Built-in Explicit Animations

（５）（ビルドインウィジェットが無い場合）AnimatedBuilder または AnimatedWidget のサブクラスを利用する

（参照動画）AnimatedBuilder / AnimatedWidget

（６）アニメーションの詳細

（参考動画）Animation Deep Dive

７．参考資料

（１）Implicit Animations Codelab

　このコードラボでは、暗黙的アニメーションの使用方法をステップバイステップで解説し、インタラクティブな例も含まれています。AnimatedContainerや他の暗黙的アニメーションウィジェットを使い、コードの複雑さを抑えながら簡単にアニメーションを追加する方法が学べます。

（２）Animations Tutorial

　このチュートリアルでは、Flutterのアニメーションパッケージに含まれる基本的なクラス（AnimationController、Animatable、Curves、リスナー、ビルダー）について説明しています。Tweenアニメーションを使い、異なるアニメーションAPIの使用方法を順に紹介し、カスタムの明示的（Explicit）アニメーションの作成方法も学べます。

（３）Zero to One with Flutter (パート1とパート2)

　Mediumの記事で、Tweenアニメーションを使ってアニメーションチャートを作成する手順が紹介されています。基礎から応用までアニメーションの進化を段階的に学べる内容です。

（４）Write Your First Flutter App on the Web

　このコードラボでは、ユーザが入力フォームを埋めていく際に進捗状況をアニメーションで表示する方法を解説しています。Webアプリでアニメーションを実装する際に役立つ内容となっています。

８．アニメーションの種類

　Flutterのアニメーションには大きく分けて「Tweenアニメーション」と「物理ベースのアニメーション」の２種類があり、それぞれ異なる特性があります。

８-１．２種類（Tweenアニメーション／物理ベースのアニメーション）

（１）Tween Animation

　Tweenアニメーション（Tweenは「in-betweening」の略）では、開始点と終了点、タイムライン、そして遷移のタイミングや速度を定義するカーブを指定します。この情報をもとに、フレームワークが開始点から終了点までの中間状態を計算し、アニメーションを進行させます。
（例えば、サイズが小さい状態から大きい状態へのアニメーションや、色が変わるアニメーションなど、2つの状態間をスムーズに遷移させたい場合に利用されます。Flutterの基本的なアニメーションリソース（Animations tutorialなど）でも、例としてTweenアニメーションが使用されています。）

（２）Physics-based Animation

　物理ベースのアニメーションは、実世界の動きを模倣するために使用されます。
（例えば、ボールを投げたときに、ボールがどこに、どのタイミングで着地するかは、速度や地面までの距離などの物理的な要素に依存します。）

　Flutterでは、スプリング（バネ）のような力学モデルを使って、自然な動きや減速・加速を表現できます。
（これにより、例えばバウンドや反発といった動きを実現することが可能です。）

８-２．参考リソース

• Flutter cookbookにある「Animate a widget using a physics simulation」のレシピでは、物理シミュレーションを用いたウィジェットのアニメーション方法を紹介しています。
• また、AnimationController.animateWith と SpringSimulation のAPIドキュメントも、物理ベースのアニメーションの実装に役立ちます。

　このように、Tweenアニメーションは基本的に開始点から終了点までのスムーズな遷移を実現し、物理ベースのアニメーションは現実世界の動きを表現するためのものです。それぞれの特性を活かして、より自然で豊かなユーザ体験を提供するアニメーションを構築できます。

９．プリセットアニメーション（Pre-canned Animations）

　Flutterには、よく使われるアニメーションパターンを簡単に導入できる「プリセットアニメーション」が用意されています。
特に Materialデザインのウィジェットを使っている場合は、pub.dev にある animations パッケージ を活用することができます。
このパッケージには、次の様な一般的なアニメーションパターンが含まれています。

９-１．Container Transforms

　コンテナのサイズや位置、外観を変化させるアニメーション。
（例えば、リストアイテムの詳細ページへの遷移などで使われることが多いです。）

９-２．Shared Axis Transitions

　同じ方向（垂直・水平・ズーム）の動きを使って、２つの要素の切り替えをスムーズに表現するアニメーション。
（例えば、設定画面から詳細設定画面への遷移に使われます。）

９-３．Fade Through Transitions

　前の画面がフェードアウトし、次の画面がフェードインするアニメーションで、切り替えの際に一瞬で消えるようなエフェクトが特徴です。（例えば、ナビゲーション間の遷移がシンプルで、明確な区切りを表現したい場合に適しています。）

９-４．Fade Transitions

　ウィジェットを徐々に表示または非表示にする基本的なフェードアニメーション。
（例えば、ポップアップや通知など、画面上の要素をさりげなく表示したい場合に便利です。）

１０．一般的なアニメーションのパターン

　ほとんどのUXデザイナーやモーションデザイナーは、UIをデザインする際に特定のアニメーションパターンを繰り返し使用することに気づきます。 このセクションでは、よく使われるアニメーションパターンをいくつかリストアップし、さらに詳しく学べる場所を紹介します。

１０-１．アニメーションのサンプル

URL: https://flutter.github.io/samples/web/animations/

１０-２．Flutterサンプルとアプリの厳選リスト

URL: https://flutter.github.io/samples/#

１０-３．共有エレメントの移行

　共有エレメントトランジションとは、ユーザーがページ上の要素（一般的には画像）を選択し、選択した要素がアニメーションで新しい詳細ページへ移動するパターンのことです。Flutterでは、Heroウィジェットを使用することで、ルート（ページ）間での共有エレメントトランジションを簡単に実装できます。

（１）ヒーロー・アニメーション ２つのスタイルのヒーロー・アニメーションの作り方

　Heroウィジェットを使ったアニメーションには、次の２つのスタイルがあります。

① 位置とサイズの変更を伴ってページ間を飛ぶヒーロー

　要素がページ間で移動しながら位置やサイズが変化します。
（例えば、リストの画像をタップして、詳細ページに遷移する際に画像が大きく表示されるような動きを表現できます。
または、主人公は位置や大きさを変えながら、あるページから別のページへ飛んでいく、等）

② 形状が円から四角に変わりながらページ間を飛ぶヒーロー

　移動中にヒーローの境界（形状）が変化します。
（例えば、円形の画像が四角いフレームに拡張されて表示されるような、より視覚的に変化のあるトランジションを実現できます。
または、主人公の境界線は、あるページから別のページに飛ぶにつれて、円から四角へと形を変える、等）

（２）Hero、Navigator、PageRouteクラスのAPIドキュメントも参照してください。

　Flutterで共有エレメントトランジションを実装する際には、以下のクラスも併せて利用すると便利です。

• Hero
  　共有エレメントのトランジションを実現するための主要なウィジェットです。
  
• Navigator
  　ルート間のナビゲーションを管理します。
  Heroウィジェットを使ったページの間の遷移を実行するために使います。
  
• PageRoute
  　ルートに対するページトランジションを制御します。
  異なるページ間でスムーズなトランジションを構成するために利用します。

１１．ステガードアニメーション

１１-１．概要

　ステガードアニメーションとは、１つのアニメーションをいくつかの小さな動きに分け、各々にタイミングをずらして動きをつけるアニメーションの手法です。各小さなアニメーションは、連続して行われたり、部分的にまたは完全に重なり合って動くこともあります。Flutterでは、ステガードアニメーションを使うことで、より複雑でリズミカルなアニメーションを作成することができます。

１１-２．実装例

　Flutterでは、AnimationController や Tween を使用して、アニメーションの一部に ディレイ（遅延）を与えることができます。また、Interval クラスを使って、各小さなアニメーションの開始・終了時間を指定し、全体のアニメーションの中で異なるタイミングで再生されるように設定できます。

（例えば、画面上で複数のボックスが連続してアニメーションするような場面で、各ボックスが順次異なるタイミングでフェードインするように設定することで、滑らかな流れを感じさせることができます。）

　詳細なサンプルや実装方法については、Staggered Animations で確認できます。

　これにより、画面の見栄えがよりリッチになり、ユーザにとって視覚的に楽しい体験を提供できます。

１２．その他のリソース

　Flutterアニメーションについてさらに学ぶためのリソースは以下のとおりです：

• Animation samples from the Sample app catalog
  • サンプルアプリのカタログには、様々なアニメーションの例が収録されており、具体的なコードサンプルを通してアニメーションの実装方法を学ぶことができます。
    
• Animation recipes from the Flutter cookbook
  • Flutterのクックブックには、アニメーションのレシピがいくつも掲載されています。
    （ここでは、特定の機能やUIパターンに基づいたアニメーションの実装例が紹介されており、実際のアプリ開発で役立つ情報が得られます。）
    
• Animation videos from the Flutter YouTube channel
  • Flutterの公式YouTubeチャンネルでは、アニメーションの基礎から応用まで、ビデオ形式でわかりやすく解説しています。動画での解説により、視覚的に理解しやすくなっています。
    
• Animations: overview
  • アニメーションライブラリの主要なクラスや、Flutterのアニメーションアーキテクチャについての概観を提供するページです。アニメーションの構造や基本的なコンセプトを理解するのに役立ちます。
    
• Animation and motion widgets
  • Flutter APIで提供されているアニメーションウィジェットのカタログです。
    どのウィジェットがどの様なアニメーションを実現する為に使用できるかを学ぶのに役立ちます。
    
• The animation library in the Flutter API documentation
  • FlutterフレームワークのアニメーションAPIについての技術的な概要ページです。
    アニメーションの各種クラスやメソッドの詳細なドキュメントが記載されており、実装の際の参考になります。

これらのリソースを活用することで、Flutterでのアニメーション開発の理解が深まり、より洗練されたUI体験を提供できるようになります。