2020/10/25 Flutter : Implicit animations、サンプルなど

Implicit animations

Flutterのアニメーションライブラリを使えば、UIでウィジェットのモーションを追加し、視覚効果を作成できます。

アニメーションライブラリの一部は、アニメーションを管理するウィジェットの品揃えです。

これらのウィジェットは、まとめてimplicit animationsまたはimplicitly animated widgetsと呼ばれ、実装するImplicitlyAnimatedWidgetクラスから名前が付けられます。

次の一連のリソースは、Flutterのimplicit animationsについて学ぶための多くの方法を提供します。

Documentation

Implicit animations codelab

コードに飛び込んでください！このコードラボでは、インタラクティブな例と段階的な手順を使用して、暗黙的なアニメーションの使用方法を説明します。

AnimatedContainer sample

Flutter cookbookのコンテンツです。implicitly animated widgetであるAnimatedContainerの使い方を学ぶためのステップバイステップレシピです。

ImplicitlyAnimatedWidget API page

ImplicitlyAnimatedWidgetクラスを継承した全てのクラスについて。

Flutter in Focus videos

Flutter in Focusビデオは、すべてのFlutter開発者が上から下まで知る必要のあるテクニックをカバーする実際のコードを含む5〜10分のチュートリアルを特徴としています。

次のビデオは、implicit animationsに関連するトピックをカバーしています。

The Boring Show

…

2020年10月25日

2020/10/25 Flutter : Animate the properties of a containerの訳

Containerクラスは、幅、高さ、背景色、パディング、境界線などの特定のプロパティを持つウィジェットを作成するための便利な方法を提供します。

単純なアニメーションでは、多くの場合、これらのプロパティを時間の経過とともに変更する必要があります。

たとえば、背景色を灰色から緑色にアニメーション化して、アイテムがユーザーによって選択されたことを示すことができます。

これらのプロパティをアニメーション化するために、FlutterにはAnimatedContainerウィジェットが用意されています。

コンテナウィジェットと同様に、AnimatedContainerを使用すると、幅、高さ、背景色などを定義できます。

ただし、AnimatedContainerが新しいプロパティで再構築されると、古い値と新しい値の間で自動的にアニメーション化されます。 Flutterでは、これらのタイプのアニメーションは「暗黙のアニメーション」と呼ばれます。

このページでは、AnimatedContainerを使用して、ユーザーがボタンをタップしたときに、サイズ、背景色、および境界線の半径をアニメーション化する方法について次の手順で説明していきます。

デフォルトのプロパティの値でStatefulWidgetを生成する。
(1)で用いたプロパティを使ってAnimatedContainerウィジェットを生成する
新しいプロパティの値を用いてアニメーションをスタートさせる。

1. Create a StatefulWidget with default properties

まず、StatefulWidgetクラスとStateクラスを作成します。

カスタムStateクラスを使用して、時間の経過とともに変化するプロパティを定義します。

この例では、幅、高さ、色、境界線の半径が含まれています。各プロパティのデフォルト値を定義することもできます。

これらのプロパティはカスタムStateクラスに属しているため、ユーザーがボタンをタップしたときに更新できます。

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends

…

2020年10月25日2021年3月11日

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

2020年10月25日2021年2月7日

2020/10/25 Flutter : Animations overviewの訳工事中🏗

Flutter のアニメーションシステムは、型付けされたアニメーションオブジェクトに基づいています。

ウィジェットは、現在の値を読み取って状態の変化を聞くことにより、これらのアニメーションをビルド関数に直接組み込むことができます。または、他のウィジェットに渡すより複雑なアニメーションの基礎としてアニメーションを使用することもできます。

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ステータス…