タグ: AnimatedBuilder

投稿日:

2021/2/24 AnimatedBuilder classの訳

AnimatedBuilder class

一般的なアニメーションを構築するためのウィジェット。

buildメソッドの一部としてアニメーションを配置させたい(保持したい)ような、複雑なウィジェットにとって、AnimatedBuilderウィジェットが役に立ちます。

AnimatedBuilderウィジェットを使うことで、シンプルにウィジェットを構築し、それをbuilder関数に渡すことができます。

シンプルなケースで追加の状態(state)がない場合、AnimatedWidgetが適しているかもしれません。

 

 

 

 

参考

https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html

…
投稿日:

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で用意されている出力を使うこともできるし、独自に出力を定義することもできる、ということ。…