動画
要約
- Flutterでアニメーションを実現する方法のひとつにAnimatedBuilderがある
- 開発者はbuilderメソッド内でアニメーションの状態に応じて自由にwidgetを構築することができる
内容
Flutterのアニメーションフレームワークはwidgetを簡単にアニメートでき、開発者に多くの選択肢を提供しています。
特にAnimatedBuilderはオススメです。
使い方は簡単で、まずAnimatedBuilderにanimationを渡します。
ここではTweenを使っています。
Tweenは開始と終了の数値を定義し、数値が開始の値から終了の値まで変化するアニメーションです。
今回は開始を0、終了を 2 * pi = 360としており、この数値の変化を利用して、widgetを0°から360°まで回転させるアニメーションを作ります。
animationを指定したら、次はbuilderです。
builderではanimationの状態（今回の場合はanimation.value）を考慮して、結果widgetを返すように実装します。
ここではTransform.rotateを使用し、angleにanimation.valueを指定しています。
結果、アニメーションが実行されます。
また、AnimatedBuilderに子widgetを渡すこともできます。
AnimationControllerの管理は特に決まった方法はありませんが、おすすめの方法としてはStatefulWidgetを作成してその中で管理することです。
まとめ
Widget of the Weekの#27 AnimatedBuilderの日本語翻訳版でした。
AnimatedBuilderを使えば、自由自在にwidgetをアニメートすることができます。
AnimatedContainerなど、各widgetに特化したAnimated widgetと使い分けて、最適なアニメーションを実現しましょう。
■ 次の記事はこちら
#28 – Dismissible
■Widget of the Week まとめ
Widget of the Week 一覧