[読書会]暗黙的なアニメーション

1.概要

 Flutterのアニメーションライブラリを使うことで、UI内のウィジェットに動きを加えたり、視覚的なエフェクトを作成したりすることができます。
アニメーションライブラリの一部には、アニメーションを自動で管理してくれるウィジェットの一式が含まれています。
これらのウィジェットは、暗黙的アニメーション(implicit animations)、または暗黙的アニメーションウィジェット(implicitly animated widgets)と呼ばれ、ImplicitlyAnimatedWidgetクラスを基にしています。

 このような暗黙的アニメーションを学ぶためのリソースが複数提供されています。これらを活用することで、Flutterでの暗黙的アニメーションについて深く理解し、実装に役立てることができます。

ポイント:

  • 暗黙的アニメーションウィジェットは、アニメーションの詳細設定を開発者が行う必要がなく、プロパティが変更されると自動でアニメーションを行います。
  • ImplicitlyAnimatedWidgetクラスに由来するウィジェットであり、初心者でも簡単にアニメーションを追加できる手軽な手法として広く使われています。

 Flutterでは、このような暗黙的アニメーションを使うことで、アプリに動きと視覚的効果を簡単に追加できます。

2.(参照)ドキュメント

2.1 暗黙的アニメーションの事例

 インタラクティブな例とステップバイステップの手順を使用して、暗黙的なアニメーションの使用方法を説明します。

2.2 AnimatedContainer サンプル

 AnimatedContainer の暗黙的にアニメーション化されたウィジェットを使用するための、Flutter クックブックからのステップバイステップのレシピ。

2.3 ImplicitlyAnimatedWidget クラス

 すべての暗黙的なアニメーションは、ImplicitlyAnimatedWidget クラスを拡張します。

 以下は、一般的な暗黙的にアニメーション化されたウィジェットです。

  1. TweenAnimationBuilder
  2. AnimatedAlign
  3. AnimatedContainer
  4. AnimatedContainer
  5. AnimatedDefaultTextStyle
  6. AnimatedScale
  7. AnimatedRotation
  8. AnimatedSlide
  9. AnimatedOpacity
  10. AnimatedPadding
  11. AnimatedPhysicalModel
  12. AnimatedPositioned
  13. AnimatedPositionedDirectional
  14. AnimatedTheme
  15. AnimatedCrossFade
  16. AnimatedSize
  17. AnimatedSwitcher

3.(参照)注目ビデオ

 Flutter in Focus ビデオには、すべての Flutter 開発者が知っておく必要のあるテクニックを徹底的に網羅した、実際のコードを使用した 5 ~ 10 分のチュートリアルが含まれています。次のビデオでは、暗黙的なアニメーションに関連するトピックを取り上げます。

3.1 Implicit Animations

3.2 TweenAnimationBuilder

4.(参照)つまらない小話

4.1 ニュースアプリへの暗黙的アニメーション追加

 ニュース アグリゲータ アプリでの暗黙的なアニメーションの使用について説明します。

5.(参照)今週の動画 – ウィジェット編 –

 毎週の短いアニメーション ビデオ シリーズでは、それぞれ特定のウィジェットの重要な機能を紹介します。
約 60 秒で、各ウィジェットの実際のコードとその動作のデモが表示されます。
次の「今週のウィジェット」ビデオでは、暗黙的にアニメーション化されたウィジェットについて説明します。

5.1 AnimatedOpacity

5.2 AnimatedPadding

5.3 AnimatedPositioned

5.4 AnimatedSwither

コメントを残す