Flutter入門

【5分でわかる】アニメーション(Animation)の実装 | Flutter入門


ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事では、Flutterでアニメーションを実装する方法を解説しています。

想定読者

Flutterでアニメーションを実装したい方

アニメーション(Animation)の実装する方法

実装する手段を決める

Flutterでは、アニメーションを実装する際に複数のアプローチが存在します。

具体的に言うと、大きく3つのカテゴリに分かれ、8つのアプローチがあります。

カテゴリアプローチ
Animation FrameworkriveやLottieなどのフレームワーク
Low-Level AnimationCustomPainter
Explicit Animation・AnimatedBuilder
・FooTransition
・Subclass AnimatedWidget
Implicit Animation・AnimatedDefaultTextStyle
・AnimatedFoo
・TweenAnimationBuilder

こんなにいっぱいあるとどれを選べばいいのか悩みますよね…。

でも大丈夫です!

Flutterの公式で以下のような判断軸で選ぶように推奨しています。

参考元:Introduction to animations – Flutter documentation

各フレームワークやウィジェットの概要

以下ではそれぞれのフレームワークやアニメーションウィジェットについて簡単にご紹介いたします。

rive

riveは2Dのアニメーションを簡単に作成できるツールであり、それらの作成した2DアニメーションのファイルはFlutterのライブラリを活用することで簡単に呼び出すことができます。

そのため、多くのアニメーションをチームで開発する場合、アニメーションの開発ツールとしてriveを利用し、riveを扱うためのFlutterのライブラリを利用することが想定されるでしょう。

Lottie

Lottieもrive同様、アニメーションを簡単に作成、導入することができるライブラリになります。

JSON情報を読み込むような形でアニメーションを導入するため、アニメーションが軽量でサクサク動きます。

前述したriveよりもFlutter界隈では利用者が多いように思います。(ライブラリのLIKE数もLottieが多い。)

CustomPainter

CustomPainterはお絵描きアプリなどを開発したいときに便利なクラスです。

ユーザーが入力した任意の座標に、複雑な図形などを描画することができます。

AnimatedBuilder

AnimatedBuilderは汎用的に使えるアニメーションクラスです。

設定した図形を回転させたり、縮小したり、拡大するような汎用的なアニメーションを自動的に継続するような設定ができます。

アニメーションを設定する対象を、子ウィジェットに設定することでウィジェットごとに複雑なアニメーションを設定したい場合はこちらのクラスを使うと良さそうです。

FooTransition

「FooTransition」のFooの部分は、~Transitionと呼ばれるウィジェットが他にもありそれらを総称して「FooTransition」としています。

一般的に使われるTransition系のウィジェットとして以下のようなものがあります。

ウィジェット名概要
AlignTransitionAlignのアニメーション
DecoratedBoxTransitionDecoratedBoxのアニメーション
DefaultTextStyleTransitionDefaultTextStyleのアニメーション
PositionedTransitionPositionedのアニメーション
RelativePositionedTransitionPositionedのアニメーション
RotationTransitionウィジェットの回転をアニメーション化
ScaleTransitionウィジェットのスケールをアニメーション化
SizeTransition独自のサイズをアニメーション化
SlideTransitionウィジェットの通常の位置を基準にアニメーション化
FadeTransitionOpacityのアニメーション
AnimatedModalBarrierModalBarrierのアニメーション

Subclass AnimatedWidget

ウィジェットをサブクラス化してビルド関数を実装すればAnimatedWidgetを利用することができます。

アニメーションのパラメーターをproviderで管理すれば、ChangeNotifierValueNotifierなどの変更通知を受け取りアニメーションに影響を与えることが可能です。

FooTransition系のウィジェットよりも複雑なアニメーションを行いたい場合に利用すると良いでしょう。

AnimatedDefaultTextStyle

AnimatedDefaultTextStyleは子ウィジェットとなるTextウィジェットの内容をアニメーション化します。

文字列をアニメーション化したい場合はこちらのウィジェットを選べば問題ないでしょうか。

AnimatedFoo

「AnimatedFoo」のFooの部分は、Animated~と呼ばれるウィジェットが他にもあり、それらを総称して「AnimatedFoo」としています。

一般的に使われるAnimated系のウィジェットとして以下のようなものがあります。

ウィジェット名概要
TweenAnimationBuilderTweenによって表現されたプロパティを指定されたターゲット値にアニメーション化
AnimatedAlignAlignをアニメーション化
AnimatedContainerContainerをアニメーション化
AnimatedDefaultTextStyleDefaultTextStyleをアニメーション化
AnimatedScaleTransform.scaleをアニメーション化
AnimatedRotationTransform.rotateをアニメーション化
AnimatedSlideウィジェットの通常の位置を基準にアニメーション化
AnimatedOpacityOpacityをアニメーション化
AnimatedPaddingPaddingをアニメーション化
AnimatedPhysicalModelPhysicalModelをアニメーション化
AnimatedPositionedPositionedをアニメーション化
AnimatedPositionedDirectionalPositionedDirectionalをアニメーション化
AnimatedThemeThemeをアニメーション化
AnimatedCrossFade指定された2つの子の間でクロスフェードし、サイズ間で自分自身をアニメーション化
AnimatedSize指定された期間にわたってサイズを自動的に移行
AnimatedSwitcherウィジェット間でフェード

TweenAnimationBuilder

永続的にアニメーションを実行したいが、AnimatedFooでは細かな設定ができない時はTweenAnimationBuilderが便利です。

子ウィジェットに表示したい内容を設定し、パラメーターでアニメーションを実行する時間を設定できます。

まとめ

Flutterでは、アニメーションを設定するためのアプローチが豊富に用意されています。

ぜひ、習得してアニメーション表現の幅を広げてみてください。

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する