目次
Flutterアニメーション入門
このページはこちらの翻訳により成り立っています。
Flutter Animationsドキュメント
うまく設計されたアニメーションは、UIをより直感的に感じさせ、洗練されたアプリの滑らかな外観に貢献させ、そしてユーザーエクスペリエンスを向上させます。
Flutterのアニメーションサポートにより、さまざまな種類のアニメーションを簡単に実装できます。多くのウィジェット、特にマテリアルデザインウィジェットは、デザインスペックで定義されている標準のモーションエフェクトが付属していますが、これらのエフェクトをカスタマイズすることも可能です。
以下のリンクは、アニメーションコードの書き方を段階的に示しているため、Flutterアニメーションフレームワークの学習を始めるためにおすすめです。
- Animations tutorial
- Flutterアニメーションパッケージの基本的なクラス（controllers、Animatable、curves、listeners、builders）についてのリンクです。
- アニメーションAPIのさまざまな側面を使用してtween animationsの進行を案内します。
- tween:アニメーション化されているオブジェクトで使用されているデータ範囲を補間します。例えば、トゥイーンは赤から青、または0から255までの補間を定義します。
- Zero to One with Flutter, part 1 and part 2
- medium記事。tweenを使用してアニメーションチャートを作成する方法を示しています。
- Building Beautiful UIs with Flutter
- Codelabを使って美しいUIを構築し、簡単なチャットアプリケーションを構築する方法を説明します。ステップ7（アプリのアニメート）では、新しいメッセージをアニメートする方法を示します。入力領域からメッセージリストまでスライドさせます。
アニメーションの種類
アニメーションは、tweenまたは物理ベースの2つのカテゴリのいずれかに分類されます。次のセクションでは、これらの用語の意味を説明し、さらに学ぶことができるリソースを紹介します。
Tween animation
tweenはin-betweening（中間）の略です。tween animationでは、開始点と終了点、タイムライン、およびトランジションのタイミングと速度を定義する曲線が定義されています。フレームワークは、始点から終点への遷移方法を計算します。
Animations tutorialなどのドキュメントは、具体的にはtweenに関するものではありませんが、それらの例ではtweenを使用しています。
物理ベースのアニメーション
物理ベースのアニメーションでは、モーションは現実世界の動作に似せてモデル化されています。たとえば、投げられたボールの軌道は、いつどこでボールを投げたかによって決まります。同様に、スプリングに取り付けられたボールを落とすと、弦に取り付けられたボールを落とすのとは異なる方法で落下（および跳ね返り）します。
詳しくはAnimationController.animateWithおよびSpringSimulationのAPIドキュメントも参照してください。
一般的なアニメーションパターン
ほとんどのUXやモーションデザイナーは、UIをデザインするときに特定のアニメーションパターンが繰り返し使用されることに気付きます。
このセクションでは、一般的に使用されているアニメーションパターンのいくつかを紹介し、どこでもっと学ぶことができるかを説明します。
アニメーションリストまたはグリッド
このパターンは、リストまたはグリッドからの要素の追加または削除をアニメートすることを含みます。
上記リンクのデモでは、要素をリストに追加したり、選択した要素を削除したりする方法について説明します。ユーザーがプラス（+）ボタンとマイナス（ – ）ボタンを使用してリストを変更すると、内部のDartリストが同期されます。
共有要素の遷移
このパターンでは、ユーザーはページから要素（多くの場合は画像）を選択し、UIは選択された要素をより詳細な新しいページにアニメートします。
Flutterでは、Heroウィジェットを使用して、ルート（ページ）間の共有要素トランジションを簡単に実装できます。
Hero Animations の2つのスタイルを作成する方法：
Heroは、位置やサイズを変えながら、あるページから別のページに飛びます。
Heroの境界は、あるページから別のページに飛ぶにつれて、円から正方形に変わります。
Hero、Navigator、およびPageRouteクラスのAPIドキュメントも参照してください。
時差アニメーション
いくつかの動きが遅れる小さな動きに分割されるアニメーション。
小さいアニメーションは連続していても、部分的にまたは完全に重なっていてもよい。
その他の資料
Flutterアニメーションの詳細については、次のリンクを参照してください。
Animations: Technical Overview
アニメーションライブラリのいくつかの主要なクラスとFlutterのアニメーションアーキテクチャをご覧ください。
Animation and Motion Widgets
Flutter APIで提供されているアニメーションウィジェットのいくつかのカタログ。