Flutter-animation
フラッター-アニメーション
アニメーションは、モバイルアプリケーションでは複雑な手順です。 複雑さにもかかわらず、Animationはユーザーエクスペリエンスを新しいレベルに高め、リッチなユーザーインタラクションを提供します。 その豊富さにより、アニメーションは現代のモバイルアプリケーションの不可欠な部分になります。 Flutterフレームワークは、アニメーションの重要性を認識し、あらゆる種類のアニメーションを開発するためのシンプルで直感的なフレームワークを提供します。
前書き
アニメーションは、特定の時間内に特定の順序で一連の画像/画像を表示して、動きの錯覚を与えるプロセスです。 アニメーションの最も重要な側面は次のとおりです-
- アニメーションには、開始値と終了値の2つの異なる値があります。 アニメーションは_Start_値から始まり、一連の中間値を通過し、最終的に終了値で終了します。 たとえば、ウィジェットをアニメーション化してフェードアウトさせる場合、初期値は完全な不透明度になり、最終値は不透明度ゼロになります。
- 中間値は、本質的に線形または非線形(曲線)であり、構成できます。 アニメーションは設定どおりに機能することを理解してください。 各構成は、アニメーションに異なる感触を提供します。 たとえば、ウィジェットのフェードは本質的に線形になりますが、ボールの跳ね返りは本質的に非線形になります。
- アニメーションプロセスの継続時間は、アニメーションの速度(低速または高速)に影響します。
- アニメーションの開始、アニメーションの停止、アニメーションの繰り返し回数の設定、アニメーションのプロセスの反転など、アニメーションプロセスを制御する機能。
- Flutterでは、アニメーションシステムは実際のアニメーションを行いません。 代わりに、画像をレンダリングするためにすべてのフレームで必要な値のみを提供します。
アニメーションベースのクラス
フラッターアニメーションシステムは、アニメーションオブジェクトに基づいています。 コアアニメーションクラスとその使用法は次のとおりです-
アニメーション
特定の期間にわたって2つの数値の間に補間値を生成します。 最も一般的なアニメーションのクラスは-
- Animation <double> -2つの10進数の間の値を補間します
- Animation <Color> -2つの色の間の色を補間する
- Animation <Size> -2つのサイズの間のサイズを補間します
- AnimationController -アニメーション自体を制御する特別なアニメーションオブジェクト。 アプリケーションが新しいフレームの準備ができるたびに新しい値を生成します。 リニアベースのアニメーションをサポートし、値は0.0から1.0で始まります
ここで、コントローラーはアニメーションを制御し、持続時間オプションはアニメーションプロセスの持続時間を制御します。 vsyncは、アニメーションで使用されるリソースを最適化するために使用される特別なオプションです。
曲線アニメーション
AnimationControllerに似ていますが、非線形アニメーションをサポートしています。 CurvedAnimationは、以下のようにAnimationオブジェクトとともに使用できます-
トゥイーン<T>
Animatable <T>から派生し、0と1以外の2つの数値の間の数値を生成するために使用されます。 animateメソッドを使用して実際のAnimationオブジェクトを渡すことにより、Animationオブジェクトと共に使用できます。
- Tweenは、以下のようにCurvedAnimationとともに使用することもできます-
ここで、コントローラーは実際のアニメーションコントローラーです。 curveは非線形性のタイプを提供し、customTweenは0〜255のカスタム範囲を提供します。
Flutter Animationのワークフロー
アニメーションのワークフローは次のとおりです-
- StatefulWidgetのinitStateでアニメーションコントローラーを定義して開始します。
- アニメーションベースのリスナー、addListenerを追加して、ウィジェットの状態を変更します。
- ビルドインウィジェット、AnimatedWidgetおよびAnimatedBuilderを使用して、このプロセスをスキップできます。 両方のウィジェットはAnimationオブジェクトを受け入れ、アニメーションに必要な現在の値を取得します。
- ウィジェットのビルドプロセス中にアニメーション値を取得し、元の値の代わりに幅、高さ、または関連するプロパティに適用します。
実用的なアプリケーション
Flutterフレームワークのアニメーションの概念を理解するために、簡単なアニメーションベースのアプリケーションを作成しましょう。
- Androidスタジオでproduct_animation_appに新しい_Flutter_アプリケーションを作成します。
- アセットフォルダーをproduct_nav_appからproduct_animation_appにコピーし、pubspec.yamlファイル内にアセットを追加します。
- デフォルトの起動コード(main.dart)を削除します。
- インポートと基本的なメイン機能を追加します。
- StatefulWidgtetから派生したMyAppウィジェットを作成します。
- _MyAppStateウィジェットを作成し、デフォルトのビルドメソッドに加えてinitStateを実装して破棄します。
ここに、
- initStateメソッドでは、アニメーションコントローラーオブジェクト(コントローラー)、アニメーションオブジェクト(アニメーション)を作成し、controller.forwardを使用してアニメーションを開始しました。
- disposeメソッドでは、アニメーションコントローラーオブジェクト(コントローラー)を破棄しました。
- buildメソッドで、コンストラクターを介してMyHomePageウィジェットにアニメーションを送信します。 これで、MyHomePageウィジェットはアニメーションオブジェクトを使用してそのコンテンツをアニメーション化できます。
- 次に、ProductBoxウィジェットを追加します
- 新しいウィジェットMyAnimatedWidgetを作成して、不透明度を使用した単純なフェードアニメーションを作成します。
- ここでは、AniatedBuilderを使用してアニメーションを作成しました。 AnimatedBuilderは、同時にアニメーションを実行しながらコンテンツを構築するウィジェットです。 アニメーションオブジェクトを受け入れて、現在のアニメーション値を取得します。 アニメーション値、animation.valueを使用して、子ウィジェットの不透明度を設定しました。 実際には、ウィジェットは不透明度の概念を使用して子ウィジェットをアニメーション化します。
- 最後に、MyHomePageウィジェットを作成し、アニメーションオブジェクトを使用してそのコンテンツをアニメーション化します。
ここでは、FadeAnimationとMyAnimationWidgetを使用して、リストの最初の2つのアイテムをアニメーション化しました。 FadeAnimationはビルドインアニメーションクラスであり、不透明度の概念を使用して子をアニメーション化するために使用しました。
- 完全なコードは次のとおりです-
- アプリケーションをコンパイルして実行し、結果を確認します。 アプリケーションの初期および最終バージョンは次のとおりです-