<h1 id="%E5%89%8D%E8%A8%80">
<a class="header-anchor-link" href="#%E5%89%8D%E8%A8%80" aria-hidden="true"></a> 前言</h1>
<p>前回<a href="https://zenn.dev/reinf0rce/articles/98b0c6ae994f46" target="_blank">FlutterレアWidgets選</a>たくさんのLikeをいただいてありがとうございました。<br>
継続的に更新していますよ〜<br>
3年前で、<a href="https://github.com/2d-inc/HistoryOfEverything" target="_blank" rel="nofollow noopener noreferrer">こちらの作品</a>のアニメーション（UX？）に驚かせて、今後Flutterの時代だなぁと思いました。</p>
<p>自分は理解しているアニメーションについて、Flutterでは<br>
基本的に、パラメータのステータスをAnimationControllerにコントロールさせ、継続的にパラメータのステータスを変更することによって、アニメーションを実現することになります。</p>
<p>FlutterのアニメーションWidget数多くて、そしてバラバラ紹介する場所は多くありました。</p>
<blockquote>
<p>どんな時どんなやつ使うだろうか？<br>
このアニメーションどう実現するの？<br>
パフォーマンス落ちたりする？<br>
ライブラリー使うべき？</p>
</blockquote>
<p>上記みたいに迷ったことがありました。<br>
この記事でFlutterのアニメーションシステムを系統的に、自分で使い分けしやすくなるように、下記の難易度で進めたら参考価値あるかと思います。</p>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__72470de2701e" src="https://embed.zenn.studio/mermaid#zenn-embedded__72470de2701e" data-content="graph%20LR%0A%20%20%20ImplicitlyAnimatedWidget%20--%3E%20AnimatedWidget%20%26%20AnimatedBuilder%20--%3E%20CustomPainter" frameborder="0" scrolling="no" loading="lazy"></iframe></span><p></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>前の記事でcodepen試してコード書いてみましたが、アニメーションは自由度あって、情報１００％の方がいいので、本記事は公式のリンク貼り付けようと思いました。<br>
リンク先のYoutubeやコードを見れば自分用にすぐ使えるかと思います。</p>
</div></aside>
<h1 id="implicitlyanimatedwidget">
<a class="header-anchor-link" href="#implicitlyanimatedwidget" aria-hidden="true"></a> ImplicitlyAnimatedWidget</h1>
<p>Implicitly、Flutterデフォルトとしてあるものとして理解していただいたら良いかと思います。<br>
或いは、Flutter提供していたアニメーション固定のアニメーションUIパーツです。<br>
AnimationController書く必要が時になく、<br>
簡単に扱うものは多く、<br>
個人開発者とかに、デモアプリや、プロダクトタイプに愛用する部分ではないかと思います。<br>
わかりやすく説明すると、アニメーションは一回だけ再生するのは多く、ループにプレイすることがなく、普通にStatefulと組み合わせかなぁと思います</p>
<p>近年はvsyncを廃置しました、別にTickerProvider系をextendする必要がなくなりました。</p>
<h2 id="animatedsize">
<a class="header-anchor-link" href="#animatedsize" aria-hidden="true"></a> AnimatedSize</h2>
<p>サイズを変更したりすることです。<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedSize-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedSize</a></p>
<h2 id="animatedpositioned">
<a class="header-anchor-link" href="#animatedpositioned" aria-hidden="true"></a> AnimatedPositioned</h2>
<p>位置座標を変更したりすることです。<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedPositioned-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedPositioned</a></p>
<h2 id="animatedalign">
<a class="header-anchor-link" href="#animatedalign" aria-hidden="true"></a> AnimatedAlign</h2>
<p>位置の一つにもなれるかなぁと思って、FlutterなかのAlignの場所に動く感じです。<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedAlign-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedAlign</a></p>
<h2 id="animatedpositioneddirectional">
<a class="header-anchor-link" href="#animatedpositioneddirectional" aria-hidden="true"></a> AnimatedPositionedDirectional</h2>
<p>Directionalityと組み合わせて、位置情報をアニメーションさせることです。<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedPositionedDirectional-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedPositionedDirectional</a></p>
<h2 id="animatedopacity">
<a class="header-anchor-link" href="#animatedopacity" aria-hidden="true"></a> AnimatedOpacity</h2>
<p>透明度をアニメーションさせることです。<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedOpacity</a></p>
<h2 id="animatedcontainer">
<a class="header-anchor-link" href="#animatedcontainer" aria-hidden="true"></a> AnimatedContainer</h2>
<p>Containerのすべでの要素をアニメーションさせることが可能です。<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedContainer</a></p>
<h2 id="animateddefaulttextstyle">
<a class="header-anchor-link" href="#animateddefaulttextstyle" aria-hidden="true"></a> AnimatedDefaultTextStyle</h2>
<p>childはTextになり、TextStyleをこのWidgetの中にアニメーションすることです。<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedDefaultTextStyle-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedDefaultTextStyle</a></p>
<h2 id="animatedpadding">
<a class="header-anchor-link" href="#animatedpadding" aria-hidden="true"></a> AnimatedPadding</h2>
<p>Containerのpaddingパラメータをアニメーションさせることです。<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedPadding-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedPadding</a></p>
<h2 id="animatedphysicalmodel">
<a class="header-anchor-link" href="#animatedphysicalmodel" aria-hidden="true"></a> AnimatedPhysicalModel</h2>
<p>Widgetに影が描画され、影の色や形などを設定することです。<br>
shapeというものになります。<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedPhysicalModel-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedPhysicalModel</a></p>
<h2 id="animatedtheme">
<a class="header-anchor-link" href="#animatedtheme" aria-hidden="true"></a> AnimatedTheme</h2>
<p>アプリのテーマを変更するときになります。<br>
<a href="https://api.flutter.dev/flutter/material/AnimatedTheme-class.ht" target="_blank" rel="nofollow noopener noreferrer">AnimatedTheme</a></p>
<h2 id="animatedicon">
<a class="header-anchor-link" href="#animatedicon" aria-hidden="true"></a> AnimatedIcon</h2>
<p>アイコンの変化をアニメーションさせることです。（個人好きなやつだ<br>
<a href="https://api.flutter.dev/flutter/material/AnimatedIcon-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedIcon</a></p>
<h2 id="animatedcrossfade">
<a class="header-anchor-link" href="#animatedcrossfade" aria-hidden="true"></a> AnimatedCrossFade</h2>
<p>二つのWidgetを切り替えは、スムーズに？UX？に見せるためにつけるアニメーションです。<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedCrossFade</a></p>
<h2 id="animatedlist">
<a class="header-anchor-link" href="#animatedlist" aria-hidden="true"></a> AnimatedList</h2>
<p>リストのUXを最高レベルまで引き上げることができます。（体験したらわかる<br>
<a href="https://api.flutter.dev/flutter/widgets/AnimatedList-class.html" target="_blank" rel="nofollow noopener noreferrer">AnimatedList</a></p>
<h2 id="tweenanimationbuilder">
<a class="header-anchor-link" href="#tweenanimationbuilder" aria-hidden="true"></a> TweenAnimationBuilder</h2>
<p>Tweenアニメーションの名前は知っている人多いかと思いまして、Flutter提供したTweenのクラスを自分なりに定義して、Widget達を組み合わせたりします。<br>
これの難易度は、AnimatedXXX系（AnimatedWidgetに除く）よりちょっと高めかと思います。<br>
<a href="https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder-class.html" target="_blank" rel="nofollow noopener noreferrer">TweenAnimationBuilder</a></p>
<hr>
<h1 id="animatedbuilder%E3%83%BBanimatedwidget">
<a class="header-anchor-link" href="#animatedbuilder%E3%83%BBanimatedwidget" aria-hidden="true"></a> AnimatedBuilder・AnimatedWidget</h1>
<p>気を付けましょう、これだけはImplicitly系ではないです、直でStatefulWidgetになっています。<br>
原因はなんでしょうというと、Flutterはデフォルト提供したものは開発者の仕様に合わない時はあることです。<br>
そういう組み合わせやフルカスタムアニメーション、結構複雑系になりますので、AnimatedBuilder・AnimatedWidgetで実現しましょうということです。<br>
AnimationController必須かと思います。<br>
下記のリストはAnimatedXXXとあんまに変わりないですけど、アニメーションの組み合わせパーツで認識していた方がいいかと思います。（正直、これはデザイナにお願いしたいです</p>
<h2 id="aligntransition">
<a class="header-anchor-link" href="#aligntransition" aria-hidden="true"></a> AlignTransition</h2>
<p>相対の位置情報によって、場所をアニメーションさせるものです。<br>
AnimatedAlignの動きと認識したらいいかと思います。</p>
<p><a href="https://api.flutter.dev/flutter/widgets/AlignTransition-class.html" target="_blank" rel="nofollow noopener noreferrer">AlignTransition</a></p>
<h2 id="decoratedboxtransition">
<a class="header-anchor-link" href="#decoratedboxtransition" aria-hidden="true"></a> DecoratedBoxTransition</h2>
<p>decorationはContainerの要素一つのため、このTransitionはこちらをコントロールするものになります。<br>
<a href="https://api.flutter.dev/flutter/widgets/DecoratedBoxTransition-class.html" target="_blank" rel="nofollow noopener noreferrer">DecoratedBoxTransition</a></p>
<h2 id="defaulttextstyletransition">
<a class="header-anchor-link" href="#defaulttextstyletransition" aria-hidden="true"></a> DefaultTextStyleTransition</h2>
<p>AnimatedDefaultTextStyleの動きと認識したらいいかと思います。<br>
Textのtextstyleをコントロールするやつです。<br>
<a href="https://api.flutter.dev/flutter/widgets/DefaultTextStyleTransition-class.html" target="_blank" rel="nofollow noopener noreferrer">DefaultTextStyleTransition</a></p>
<h2 id="fadetransition">
<a class="header-anchor-link" href="#fadetransition" aria-hidden="true"></a> FadeTransition</h2>
<p>フィードインとフィードアウトになります。<br>
AnimatedOpacityの動きです。<br>
<a href="https://api.flutter.dev/flutter/widgets/FadeTransition-class.html" target="_blank" rel="nofollow noopener noreferrer">FadeTransition</a></p>
<h2 id="positionedtransition">
<a class="header-anchor-link" href="#positionedtransition" aria-hidden="true"></a> PositionedTransition</h2>
<p>普通の位置情報アニメーションになります。<br>
<a href="https://api.flutter.dev/flutter/widgets/PositionedTransition-class.html" target="_blank" rel="nofollow noopener noreferrer">PositionedTransition</a></p>
<h2 id="relativepositionedtransition">
<a class="header-anchor-link" href="#relativepositionedtransition" aria-hidden="true"></a> RelativePositionedTransition</h2>
<p>Relativeですので、Stackの中に、位置情報のアニメーションになります。<br>
<a href="https://api.flutter.dev/flutter/widgets/RelativePositionedTransition-class.html" target="_blank" rel="nofollow noopener noreferrer">RelativePositionedTransition</a></p>
<h2 id="rotationtransition">
<a class="header-anchor-link" href="#rotationtransition" aria-hidden="true"></a> RotationTransition</h2>
<p>回転ですね。<br>
<a href="https://api.flutter.dev/flutter/widgets/RotationTransition-class.html" target="_blank" rel="nofollow noopener noreferrer">RotationTransition</a></p>
<h2 id="scaletransition">
<a class="header-anchor-link" href="#scaletransition" aria-hidden="true"></a> ScaleTransition</h2>
<p>大きさ変わるものですけど、 Fitしているので、拡大縮小と呼んだ方がいいかもしれない。<br>
<a href="https://api.flutter.dev/flutter/widgets/ScaleTransition-class.html" target="_blank" rel="nofollow noopener noreferrer">ScaleTransition</a></p>
<h2 id="sizetransition">
<a class="header-anchor-link" href="#sizetransition" aria-hidden="true"></a> SizeTransition</h2>
<p>サイズ変更用のもの<br>
<a href="https://api.flutter.dev/flutter/widgets/SizeTransition-class.html" target="_blank" rel="nofollow noopener noreferrer">SizeTransition</a></p>
<h2 id="slidetransition">
<a class="header-anchor-link" href="#slidetransition" aria-hidden="true"></a> SlideTransition</h2>
<p>スライドで画面入っていく動きです。<br>
Navigatorのページ切り替え機能はデフォルトに入っているものです。<br>
<a href="https://api.flutter.dev/flutter/widgets/SlideTransition-class.html" target="_blank" rel="nofollow noopener noreferrer">SlideTransition</a></p>
<hr>
<h1 id="custompainter">
<a class="header-anchor-link" href="#custompainter" aria-hidden="true"></a> CustomPainter</h1>
<p>CustomPainterはパフォーマンス一番重視されて、且つ、デザイナの複雑なアニメーションを完璧に実現できます。<br>
これを使って、アニメーション作った人が師匠と呼んでもいいかと思います。<br>
自分ならば、両手上げ、デザイナー様に土下座して、デザイナー領域のものが神アニメーションライブラリーと連携したいとお願いします。<br>
<a href="https://api.flutter.dev/flutter/rendering/CustomPainter-class.html" target="_blank" rel="nofollow noopener noreferrer">CustomPainter</a></p>
<hr>
<h1 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E9%A0%98%E5%9F%9F">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E9%A0%98%E5%9F%9F" aria-hidden="true"></a> デザイナー領域</h1>
<p>CustomPainter例みたいに、超素敵なアニメつけたい、UXは豪華にしたいとかある時が、デザイナーに頼んでください。</p>
<p><a href="https://pub.dev/packages/rive" target="_blank" rel="nofollow noopener noreferrer">rive</a>と<a href="https://lottiefiles.com/" target="_blank" rel="nofollow noopener noreferrer">lottie</a>両方でFlutterとデザイナー結ぶことができます。（パフォーマンス高いよ</p>
<p>自分はlottie経験あったので、今は大好きになりました。<br>
2019年、当時はLottie公式ライブラリなくて、結構<a href="https://pub.dev/packages/flutter_lottie" target="_blank" rel="nofollow noopener noreferrer">古いやつ</a>を使っていても、lottieをすごく楽しめました。<br>
今は公式ライブラリー出ていまして、しかも1.xバージョンで、安定していて、安心して使えますね。<br>
riveは0.8.xになっているので、lottieと比べてやや若いので、今後期待できるかと思います。</p>
<h1 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/GXIJJkq_H8g" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span>
<p>momoさんの記事も参考になれるかと思います。<br>
[momoさんのImplicitlyAnimatedWidget]（<a href="https://medium.com/flutter-jp/implicit-animation-b9d4b7358c28%EF%BC%89" target="_blank" rel="nofollow noopener noreferrer">https://medium.com/flutter-jp/implicit-animation-b9d4b7358c28）</a><br>
<a href="https://medium.com/flutter-jp/transition-9c57528c84b8" target="_blank" rel="nofollow noopener noreferrer">momoさんのTransition</a></p>
<p>最後に、Flutterエンジニアはデザイナー素質あるべきですね。</p>


Flutter Animationパターン

Discussion