アニメーションの概要

コンテンツ

Flutter のアニメーションシステムは型指定に基づいています。Animationオブジェクト。ウィジェットは次のいずれかを行うことができますこれらのアニメーションをビルドに組み込む現在の値を読み取り、その値を聞くことによって直接機能します。状態の変化や、より精巧なアニメーションの基礎として使用することもできます。他のウィジェットに渡すアニメーション。

アニメーション

アニメーションシステムの主な構成要素は次のとおりです。Animationクラス。アニメーションは値を表します生涯にわたって変化する可能性がある特定のタイプのアニメーション。アニメーションを実行するほとんどのウィジェットを受け取るAnimationオブジェクトをパラメータとして、そこからアニメーションの現在の値を読み取ります。そして、その値の変更をリッスンします。

`addListener`

アニメーションの値が変化するたびに、アニメーションは、追加されたすべてのリスナーに通知します。addListener。通常、Stateアニメーション呼び出しをリッスンするオブジェクトsetStateリスナーコールバック内でそれ自体に対してウィジェットシステムに次の必要があることを通知します。アニメーションの新しい値で再構築します。

このパターンは非常に一般的であるため、ウィジェットが 2 つありますアニメーションの値が変更されたときにウィジェットを再構築するのに役立ちます。AnimatedWidgetとAnimatedBuilder。最初、AnimatedWidget、最も役立つのはステートレスなアニメーションウィジェット。使用するにはAnimatedWidget、それをサブクラス化して実装するだけです。build関数。二番目、AnimatedBuilder、より複雑なウィジェットに役立ちますより大きなビルド機能の一部としてアニメーションを含めたい場合。使用するにはAnimatedBuilder、ウィジェットを構築するだけですそしてそれを渡しますbuilder関数。

`addStatusListener`

アニメーションはまた、AnimationStatus、これは、アニメーションが時間の経過とともにどのように進化するかを示します。アニメーションのステータスが変化するたびに、アニメーションは、追加されたすべてのリスナーに通知します。addStatusListener。通常、アニメーションが開始されます。外でdismissedステータス、つまり、彼らの範囲の最初に。例えば、 0.0 から 1.0 に進むアニメーションになるだろうdismissed値が 0.0 の場合。アニメーションが実行される可能性がありますforward(0.0から1.0まで) あるいはおそらくreverse(1.0から0.0まで)。最終的に、アニメーションが範囲の終わりに達すると、 (1.0)、アニメーションは次のレベルに達します。completedスターテス。

アニメーションコントローラー

アニメーションを作成するには、まずAnimationController。アニメーションそのものであると同時に、AnimationControllerアニメーションを制御できます。例えば、コントローラーにアニメーションを再生するように指示できますforwardまたstopアニメーション。あなたもすることができますflingアニメーション、バネなどの物理シミュレーションを使用します。アニメーションを駆動します。

アニメーションコントローラーを作成したら、これに基づいて他のアニメーションの構築を開始できます。たとえば、次のように作成できます。ReverseAnimation元のアニメーションをミラーリングしていますが、逆方向 (1.0 から 0.0)。同様に、CurvedAnimationその値は、Curve。

トゥイーン

0.0 から 1.0 の間隔を超えてアニメーション化するには、Tween<T>の間を補間します。beginとend価値観。多くのタイプには特定のTweenタイプ固有の補間を提供するサブクラス。例えば、ColorTween色間を補間し、RectTween四角形の間を補間します。を作成することで独自の補間を定義できます。あなた自身のサブクラスTweenそしてそのオーバーライドlerp関数。

トゥイーン自体は、補間方法を定義するだけです 2 つの値の間。具体的な値を取得するには、アニメーションの現在のフレームには、現在の状態を判断するアニメーション。トゥイーンを結合するには 2 つの方法があります具体的な値を取得するにはアニメーションを使用します。

あなたはできるevaluate現在のトゥイーンアニメーションの価値。このアプローチが最も役立ちますすでにアニメーションをリッスンしているウィジェットの場合アニメーションの値が変更されるたびに再構築します。
あなたはできるanimateアニメーションに基づいたトゥイーン。 animate 関数は単一の値を返すのではなく、新しいものを返しますAnimationこれにはトゥイーンが組み込まれています。このアプローチは、次のような場合に最も役立ちます。別のウィジェットに新しく作成されたアニメーション、これにより、現在値を読み取ることができます。トゥイーンと値の変更をリッスンします。

建築

アニメーションは実際には、多数のコア構成要素から構築されています。

スケジューラ

のSchedulerBindingシングルトンクラスです Flutter スケジューリングプリミティブを公開します。

この説明では、重要なプリミティブはフレームコールバックです。フレームを画面に表示する必要があるたびに、 Flutter のエンジンは「フレーム開始」コールバックをトリガーします。スケジューラは、次を使用して登録されたすべてのリスナーに多重化します。scheduleFrameCallback()。これらすべてのコールバックは、フレームの公式タイムスタンプが与えられると、の形Durationある任意の時代から。すべてのコールバックには同じ時間があり、これらからトリガーされるアニメーションはすべて同じです。コールバックは正確に同期されているように見えます。実行に数ミリ秒かかる場合。

ティッカー

のTickerクラスがスケジューラにフックされるscheduleFrameCallback()ティックごとにコールバックを呼び出すメカニズム。

あTickerを開始および停止できます。開始すると、を返しますFuture停止すると解決します。

ティックごとに、Tickerコールバックを提供します開始後の最初のティックからの継続時間。

ティッカーは常に最初の時間からの相対的な経過時間を表示するため、開始後にチェックマークを付けます。ティッカーはすべて同期されています。もし、あんたが 2 つのティック間の異なる時間に 3 つのティッカーを開始すると、それらはすべてそれでも同じ開始時刻に同期され、その後、足並みを揃えて進みます。バス停にいる人々のように、すべてのティッカーは定期的に発生するイベントを待ちます（カチカチ音）動き始めます（時間を数えます）。

シミュレーション

のSimulation抽象クラスマップに対する相対時間値（経過時間） double 値であり、完了の概念があります。

原則としてシミュレーションはステートレスですが、実際にはいくつかのシミュレーション (たとえば、BouncingScrollSimulationとClampingScrollSimulation) クエリ時に状態を不可逆的に変更します。

があるさまざまな具体的な実装のSimulationさまざまな効果のクラス。

アニメータブル

のAnimatable抽象クラスマップ double を特定の型の値に変換します。

Animatableクラスはステートレスで不変です。

トゥイーン

のTween<T>抽象クラスは double をマップします名目上の値は 0.0 ～ 1.0 の範囲で、入力された値まで (たとえば、Color、または別のダブル）。それはAnimatable。

出力タイプの概念があります (T）、ある68d52dc7-81a5-4bb9-ベッド9-e7b95c9a265c値とendその型の値、そして補間する方法(lerp) 始まりの間指定された入力値の終了値 (名目上は倍精度浮動小数点数) 範囲は 0.0 ～ 1.0)。

Tweenクラスはステートレスで不変です。

アニメーション可能オブジェクトの作成

を渡す0F39EBBF-9C0E-48F8-9D7D-21271F6DD92A（親）にAnimatableのchain()メソッドは新しいものを作成しますAnimatableを適用するサブクラス親のマッピング、次に子のマッピング。

曲線

のCurve抽象クラスマップの倍精度名目上は 0.0 ～ 1.0 の範囲で 2 倍になります名目上は 0.0 ～ 1.0 の範囲です。

Curveクラスはステートレスで不変です。

アニメーション

のAnimation抽象クラスが提供するのは、指定された型の値、アニメーションの概念方向とアニメーションのステータス、およびリスナーインターフェイス値またはステータスが変更されたときに呼び出されるコールバックを登録します。

のいくつかのサブクラスAnimation決して変わらない価値観を持っている (kAlwaysCompleteAnimation、kAlwaysDismissedAnimation、AlwaysStoppedAnimation);コールバックの登録コールバックは決して呼び出されないため、これらは効果がありません。

のAnimation<double>バリアントは次の目的で使用できるため特別です。名目上 0.0 ～ 1.0 の範囲の double を表します。これは入力ですによって期待されるCurveとTweenクラスとその他のクラスのサブクラスAnimation。

いくつかのAnimationサブクラスはステートレスであり、リスナーを両親に転送するだけです。非常にステートフルなものもあります。

構成可能なアニメーション

多くのAnimationサブクラスは明示的な「親」を受け取りますAnimation<double>。彼らはその親によって動かされています。

のCurvedAnimationサブクラスはAnimation<double>クラス（親）と数人Curveクラス (順方向と逆方向) カーブ) を入力として使用し、親の値を入力として使用します。曲線を使用して出力を決定します。CurvedAnimation不変であり、ステートレス。

のReverseAnimationサブクラスはAnimation<double>クラスを親として反転しますアニメーションのすべての値。親を想定しています名目上 0.0 ～ 1.0 の範囲の値を使用しており、値を返します。 1.0 ～ 0.0 の範囲の値。親の立場と方向性アニメーションも反転します。ReverseAnimation不変であり、ステートレス。

のProxyAnimationサブクラスはAnimation<double>としてクラス化その親であり、その親の現在の状態を転送するだけです。ただし、親は変更可能です。

のTrainHoppingAnimationサブクラスは 2 つの親を受け取ります。値が交差すると、それらの間で切り替わります。

アニメーションコントローラー

のAnimationControllerステートフルですAnimation<double>を使用するTicker自分自身に命を与えること。開始と停止が可能です。ティックごとに時間がかかります開始されてから経過した時間を取得し、それをSimulation入手する価値。それがレポートされる値です。もしSimulationその時点で終了したことを報告し、コントローラが停止します自体。

アニメーションコントローラーには下限と上限を与えることができます。と期間の間でアニメーション化します。

単純なケースでは（使用forward()またreverse())、アニメーションコントローラーは単純に線形処理を実行します。下限から上限への補間 (またはその逆) 逆方向の場合)、指定された期間にわたって。

使用するときrepeat()、アニメーションコントローラーはリニアを使用します。指定された期間にわたる指定された境界間の補間ですが、止まらない。

使用するときanimateTo()、アニメーションコントローラーは線形を実行します。現在の値から指定された期間にわたる補間与えられた目標。メソッドに期間が指定されていない場合、デフォルトのコントローラーの持続時間とコントローラーの範囲下限と上限は、速度を決定するために使用されます。アニメーション。

使用するときfling()、Force特定のを作成するために使用されますシミュレーションは、コントローラーの駆動に使用されます。

使用するときanimateWith()、指定されたシミュレーションは、コントローラ。

これらのメソッドはすべて、Ticker提供し、これはコントローラが次に停止または変更されたときに解決されますシミュレーション。

アニメーションへのアニメーション可能オブジェクトのアタッチ

を渡すAnimation<double>(新しい親) にAnimatableのanimate()メソッドは新しいものを作成しますAnimation次のように動作するサブクラスのAnimatableしかし、与えられた親から駆動されます。