Flutter のアニメーションシステムは、型付けされたアニメーションオブジェクトに基づいています。
ウィジェットは、現在の値を読み取って状態の変化を聞くことにより、これらのアニメーションをビルド関数に直接組み込むことができます。または、他のウィジェットに渡すより複雑なアニメーションの基礎としてアニメーションを使用することもできます。
Contents
Animation
アニメーションシステムの初級のビルディングブロックはAnimationクラスです。
animation(インスタンス)は、アニメーションのライフタイムのなかで変更される特定の値を表します。
アニメーションを実行するほとんどのウィジェットは、パラメーターとしてAnimationオブジェクトを受け取り、そこからアニメーションの現在の値を読み取り、その値の変更をリッスンします。
addListener
animationの値が変更された時、animationは、addListenerによって追加された全てのlistener(リスナー)に(値の変更を)知らせます。
通常、アニメーションをリッスンするStateオブジェクトは、リスナーコールバックでsetStateを呼び出し、アニメーションの新しい値で再構築する必要があることをウィジェットシステムに通知します。
このパターンは非常に一般的であるため、アニメーションの値が変更されたときにウィジェットを再構築するのに役立つ2つのウィジェット、AnimatedWidgetとAnimatedBuilderが用意されています。
最初のAnimatedWidgetは、ステートレスアニメーションウィジェットに最も役立ちます。 AnimatedWidgetを使用するには、サブクラス化してビルド関数を実装するだけです。 2番目のAnimatedBuilderは、より大きなビルド関数の一部としてアニメーションを含めたい、より複雑なウィジェットに役立ちます。 AnimatedBuilderを使用するには、ウィジェットを作成してビルダー関数を渡すだけです。
addStatusListener
アニメーションは、アニメーションが時間の経過とともにどのような状態にあるか示すAnimationStatus(列挙型、enum)も提供します。
アニメーションの進捗状況を表す列挙型AnimationStatusが定義されている。
AnimationStatusのケースは
- AnimationStatus.dismissed : アニメーションの開始時点の状態
- AnimationStatus.foward : アニメーションが開始時点から終了時点に向かって進んでいる状態
- AnimationStatus.completed : アニメーションが終了時点で停止している状態
- AnimationStatus.reverse : アニメーションが終了時点から開始時点に向かって逆走している状態
以上の四種類。
アニメーションの進行に伴ってアニメーションのステータスが変更するたびに、アニメーションはaddStatusListenerメソッドによって追加されたすべてのリスナーに(ステータスの変更を)通知します。 通常、アニメーションは
dismissedステータス
で始まります。このステータスはアニメーションの範囲の開始時点を表します。
たとえば、0.0から1.0に進行するアニメーションでは、値が0.0の状態がdismissedです。
アニメーションは順方向（0.0から1.0）または逆方向（1.0から0.0）に実行される可能性があります。 最終的に、アニメーションが範囲の終わり（1.0）に達すると、アニメーションは
completedステータス
になります。
AnimationController
アニメーションを作成するには、最初にAnimationControllerを作成します。 AnimationControllerを使用すると、アニメーション自体であるかのように、アニメーションを制御できます。
たとえば、アニメーションを前方に再生するか、アニメーションを停止するようにコントローラーに指示できます。 スプリングなどの物理シミュレーションを使用してアニメーションを駆動するフリングアニメーション化することもできます。
animation controllerを生成すると、それに基づいて別のアニメーションを構築することができます。例えば、ReverseAnimation(クラス)を使うと、オリジナルのアニメーションを反映したものですが、再生方向が逆のアニメーションを作ることができます。Curveの指定に基づいて(アニメーションの)値が変化する「CurvedAnimation」を作ることもできます。
Tweens
0.0から1.0の間隔を超えてアニメーション化するには、開始値(begin)と終了値(end)の間を補間するTween <T>を使用できます。
多くのタイプには、タイプ固有の補間を提供する特定のTweenサブクラスがあります。 たとえば、ColorTweenは色の間を補間し、RectTweenは四角形の間を補間します。
Tweenの独自のサブクラスを作成し、そのlerp関数をオーバーライドすることで、独自の補間を定義できます。
トゥイーン自体は、2つの値の間を補間する方法を定義するだけです。
アニメーションの現在のフレームの具体的な値を取得するには、現在の状態を判別するためのアニメーションも必要です。
トゥイーンとアニメーションを組み合わせて具体的な値を取得するには、次の2つの方法があります。
工事中🏗
2.アニメーションに基づいてトゥイーンをアニメーション化できます。 単一の値を返すのではなく、animate関数はトゥイーンを組み込んだ新しいアニメーションを返します。
このアプローチは、新しく作成されたアニメーションを別のウィジェットに渡したい場合に最も役立ちます。ウィジェットは、トゥイーンを組み込んだ現在の値を読み取り、値の変更をリッスンできます。
_controller = AnimationController(
duration: Duration(
seconds: 3,
),
vsync: this,
);
animation = Tween(begin:0.0,end:150.0,).animate(_controller);
↑の記述をすれば、_controllerでコントロールするアニメーションで、なおかつ開始値0.0、終了値150.0のアニメーションを生成できる、ということらしい。
こういう文章だけではダメだろう笑
Architecture
アニメーションは、実際にはいくつかのコアビルディングブロックから構築されています。
Scheduler
SchedulerBinding は、Flutter のスケジューリングプリミティブを公開するシングルトンクラスです。
工事中🏗
Tickers
Tickerクラスは、スケジューラのscheduleFrameCallback（）メカニズムにフックして、ティックごとにコールバックを呼び出します。
Animatables
Animatable抽象クラスは、「特定の型」と「double型」をマッピングします。
Animatableクラスはステートレスでイミュータブル (不変)です。
Tweens
Tween<T>抽象クラスは「doube型の値(名目上0.0〜1.0の範囲)」と「特定の型の値」(例えばColor、あるいは別のdouble型の値)をマッピングします。TweenクラスはAnimatableクラスを継承しています。
参考
https://flutter.dev/docs/development/ui/animations/overview
