Flutter Animationパターン
前言
前回FlutterレアWidgets選たくさんのLikeをいただいてありがとうございました。
継続的に更新していますよ〜
3年前で、こちらの作品のアニメーション（UX？）に驚かせて、今後Flutterの時代だなぁと思いました。
自分は理解しているアニメーションについて、Flutterでは
基本的に、パラメータのステータスをAnimationControllerにコントロールさせ、継続的にパラメータのステータスを変更することによって、アニメーションを実現することになります。
FlutterのアニメーションWidget数多くて、そしてバラバラ紹介する場所は多くありました。
どんな時どんなやつ使うだろうか？
このアニメーションどう実現するの？
パフォーマンス落ちたりする？
ライブラリー使うべき？
上記みたいに迷ったことがありました。
この記事でFlutterのアニメーションシステムを系統的に、自分で使い分けしやすくなるように、下記の難易度で進めたら参考価値あるかと思います。
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の動きと認識したらいいかと思います。
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と比べてやや若いので、今後期待できるかと思います。
参考
momoさんの記事も参考になれるかと思います。
[momoさんのImplicitlyAnimatedWidget]（https://medium.com/flutter-jp/implicit-animation-b9d4b7358c28）
momoさんのTransition
最後に、Flutterエンジニアはデザイナー素質あるべきですね。
Discussion