2020/10/25 Flutter : アニメーションチュートリアルの訳

 

このチュートリアルでは、Flutter で明示的なアニメーションを作成する方法を示します。アニメーション ライブラリで重要な概念、クラス、メソッドをいくつか紹介した後、5 つのアニメーションの例を紹介します。この例は互いに構築され、アニメーション ライブラリのさまざまな側面を紹介します。

Flutter SDK には、フェードトランジションサイズトランジションスライドトランジションなどの暗黙的なトランジション アニメーションも用意されています。これらの単純なアニメーションは、開始点と終了点を設定することによってトリガーされます。ここで説明する明示的なアニメーションよりも実装が簡単です。


Essential animation concepts and classes

ポイントは?

  • AnimationクラスはFlutterのアニメーションライブラリのコアクラスであり、アニメーションを動かすために使われる値を補間します。
  • Animationオブジェクトはアニメーションの現在の状態(state)を把握しています。(例えば、スタートしているか、停止しているか、順方向の再生か、逆方向か?など。)しかし、スクリーン上でどのように表示されているかは把握していません。
  • AnimationControllerはAnimationクラスを管理します。
  • CurvedAnimationクラスは、非リニアカーブのアニメーション進行を定義します。
  • Tweenは、アニメーション化されているオブジェクトによって使用されるデータの範囲を補間します。 たとえば、Tweenは、赤から青、または0から255への補間を定義することができます。
  • リスナーとStatusListenerを使用して、アニメーションの状態の変化を監視します。
Flutterのアニメーションシステムは、Animationオブジェクトに基づいています。 ウィジェットは、現在の値を読み取って状態の変化を聞くことにより、これらのアニメーションをビルド関数に直接組み込むことができます。または、他のウィジェットに渡す、より複雑なアニメーションの基礎としてアニメーションを使用することもできます。

Animation<double>

Flutterでは、Animationオブジェクトはスクリーン上の表示は感知しません。Animatinクラスは、「現在値」と「ステート」(dismissed(開始時点)かcompleted(終了時点))を把握する抽象クラスです。

最もよく使われるanimationの型はAnimation<double>型です。

Animationオブジェクトは、特定の期間(duration)にわたって2つの値の間で補間された数値を順次生成します。

Animationオブジェクトの出力は、線形、曲線(非線形)、階段関数、またはその他の考案可能なマッピングである可能性があります。

線形、曲線など、予めFlutterで用意されている出力を使うこともできるし、独自に出力を定義することもできる、ということ。