Flutter Animationパターン

前言

前回FlutterレアWidgets選たくさんのLikeをいただいてありがとうございました。
継続的に更新していますよ〜
3年前で、こちらの作品のアニメーション（UX？）に驚かせて、今後Flutterの時代だなぁと思いました。

自分は理解しているアニメーションについて、Flutterでは
基本的に、パラメータのステータスをAnimationControllerにコントロールさせ、継続的にパラメータのステータスを変更することによって、アニメーションを実現することになります。

FlutterのアニメーションWidget数多くて、そしてバラバラ紹介する場所は多くありました。

どんな時どんなやつ使うだろうか？
このアニメーションどう実現するの？
パフォーマンス落ちたりする？
ライブラリー使うべき？

上記みたいに迷ったことがありました。
この記事でFlutterのアニメーションシステムを系統的に、自分で使い分けしやすくなるように、下記の難易度で進めたら参考価値あるかと思います。

graph LR
   ImplicitlyAnimatedWidget --> AnimatedWidget & AnimatedBuilder --> CustomPainter

ImplicitlyAnimatedWidget

Implicitly、Flutterデフォルトとしてあるものとして理解していただいたら良いかと思います。
或いは、Flutter提供していたアニメーション固定のアニメーションUIパーツです。
AnimationController書く必要が時になく、
簡単に扱うものは多く、
個人開発者とかに、デモアプリや、プロダクトタイプに愛用する部分ではないかと思います。
わかりやすく説明すると、アニメーションは一回だけ再生するのは多く、ループにプレイすることがなく、普通にStatefulと組み合わせかなぁと思います

近年はvsyncを廃置しました、別にTickerProvider系をextendする必要がなくなりました。

AnimatedSize

サイズを変更したりすることです。
AnimatedSize

AnimatedPositioned

位置座標を変更したりすることです。
AnimatedPositioned

AnimatedAlign

位置の一つにもなれるかなぁと思って、FlutterなかのAlignの場所に動く感じです。
AnimatedAlign

AnimatedPositionedDirectional

Directionalityと組み合わせて、位置情報をアニメーションさせることです。
AnimatedPositionedDirectional

AnimatedOpacity

透明度をアニメーションさせることです。
AnimatedOpacity

AnimatedContainer

Containerのすべでの要素をアニメーションさせることが可能です。
AnimatedContainer

AnimatedDefaultTextStyle

childはTextになり、TextStyleをこのWidgetの中にアニメーションすることです。
AnimatedDefaultTextStyle

AnimatedPadding

Containerのpaddingパラメータをアニメーションさせることです。
AnimatedPadding

AnimatedPhysicalModel

Widgetに影が描画され、影の色や形などを設定することです。
shapeというものになります。
AnimatedPhysicalModel

AnimatedTheme

アプリのテーマを変更するときになります。
AnimatedTheme

AnimatedIcon

アイコンの変化をアニメーションさせることです。（個人好きなやつだ
AnimatedIcon

AnimatedCrossFade

二つのWidgetを切り替えは、スムーズに？UX？に見せるためにつけるアニメーションです。
AnimatedCrossFade

AnimatedList

リストのUXを最高レベルまで引き上げることができます。（体験したらわかる
AnimatedList

TweenAnimationBuilder

Tweenアニメーションの名前は知っている人多いかと思いまして、Flutter提供したTweenのクラスを自分なりに定義して、Widget達を組み合わせたりします。
これの難易度は、AnimatedXXX系（AnimatedWidgetに除く）よりちょっと高めかと思います。
TweenAnimationBuilder

AnimatedBuilder・AnimatedWidget

気を付けましょう、これだけはImplicitly系ではないです、直でStatefulWidgetになっています。
原因はなんでしょうというと、Flutterはデフォルト提供したものは開発者の仕様に合わない時はあることです。
そういう組み合わせやフルカスタムアニメーション、結構複雑系になりますので、AnimatedBuilder・AnimatedWidgetで実現しましょうということです。
AnimationController必須かと思います。
下記のリストはAnimatedXXXとあんまに変わりないですけど、アニメーションの組み合わせパーツで認識していた方がいいかと思います。（正直、これはデザイナにお願いしたいです

AlignTransition

相対の位置情報によって、場所をアニメーションさせるものです。
AnimatedAlignの動きと認識したらいいかと思います。

AlignTransition

DecoratedBoxTransition

decorationはContainerの要素一つのため、このTransitionはこちらをコントロールするものになります。
DecoratedBoxTransition

DefaultTextStyleTransition

AnimatedDefaultTextStyleの動きと認識したらいいかと思います。
Textのtextstyleをコントロールするやつです。
DefaultTextStyleTransition

FadeTransition

フィードインとフィードアウトになります。
AnimatedOpacityの動きです。
FadeTransition

PositionedTransition

普通の位置情報アニメーションになります。
PositionedTransition

RelativePositionedTransition

Relativeですので、Stackの中に、位置情報のアニメーションになります。
RelativePositionedTransition

RotationTransition

回転ですね。
RotationTransition

ScaleTransition

大きさ変わるものですけど、 Fitしているので、拡大縮小と呼んだ方がいいかもしれない。
ScaleTransition

SizeTransition

サイズ変更用のもの
SizeTransition

SlideTransition

スライドで画面入っていく動きです。
Navigatorのページ切り替え機能はデフォルトに入っているものです。
SlideTransition

CustomPainter

CustomPainterはパフォーマンス一番重視されて、且つ、デザイナの複雑なアニメーションを完璧に実現できます。
これを使って、アニメーション作った人が師匠と呼んでもいいかと思います。
自分ならば、両手上げ、デザイナー様に土下座して、デザイナー領域のものが神アニメーションライブラリーと連携したいとお願いします。
CustomPainter

デザイナー領域

CustomPainter例みたいに、超素敵なアニメつけたい、UXは豪華にしたいとかある時が、デザイナーに頼んでください。

riveとlottie両方でFlutterとデザイナー結ぶことができます。（パフォーマンス高いよ

自分はlottie経験あったので、今は大好きになりました。
2019年、当時はLottie公式ライブラリなくて、結構古いやつを使っていても、lottieをすごく楽しめました。
今は公式ライブラリー出ていまして、しかも1.xバージョンで、安定していて、安心して使えますね。
riveは0.8.xになっているので、lottieと比べてやや若いので、今後期待できるかと思います。

参考