Contents
Flutter 3.0でアニメーションを学ぶ前に
Flutter 3.0では、UIの動きやすさやユーザー体験向上に向けたアニメーション機能がさらに強化されています。本記事ではAnimationControllerの使い方から応用までを公式ドキュメントと実装サンプルを基に解説します。Flutterを学習中の初心者～中級者の方は、この記事でアニメーションの基本的な実装方法や新機能の活用法をマスターしましょう。
AnimationControllerの基本使い方
アニメーションを制御するためには、AnimationControllerが不可欠です。これを使いこなせば、スムーズなUI操作やフェードイン/アウト効果などが実装可能になります。
AnimationControllerの初期化手順
AnimationControllerはStatefulWidget内で作成し、vsyncパラメータを指定します。この際、SingleTickerProviderStateMixinを継承する必要があります。
AnimationControllerを宣言initState()でアニメーションの長さやフレームレートを設定dispose()でリソースを解放
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class MyWidget extends StatefulWidget { @override _MyWidgetState createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin { late AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); } @override void dispose() { _controller.dispose(); super.dispose(); } } |
注意：
dispose()でリソースを解放し忘れると、メモリリークの原因になります。
ステート管理とライフサイクル
アニメーションを実行する際には、forward()やreverse()メソッドで開始・停止を行います。また、addStatusListener()でアニメーションの状態変化を監視できます。
| メソッド | 説明 |
|---|---|
forward() |
アニメーションを再生する |
reverse() |
逆方向に再生する |
reset() |
初期値に戻す |
Tweenによる値の補間技術
UI要素の位置・色・サイズなどの値を滑らかに変化させるには、Tweenクラスが用いられます。特にColorTweenやCurvesはアニメーション効果を調整する際に必須です。
ColorTweenとCurvesの組み合わせ
ColorTweenで始点から終点までの色を指定し、Curvesで補間速度をカスタマイズします。この組み合わせにより、フェードインやスライドアニメーションが可能になります。
|
1 2 3 4 5 6 7 |
final colorTween = ColorTween(begin: Colors.red, end: Colors.blue); final curve = Curves.easeInOutCubic; _animation = Tween<double>(begin: 0.0, end: 1.0).animate( CurvedAnimation(parent: _controller, curve: curve), ); |
複数プロパティの補間例
複数のプロパティ（位置・サイズ）を同時に変化させるには、AnimatedContainerやLayoutBuilderと組み合わせて使用します。以下はサイズ変更アニメーションの一例です。
|
1 2 3 4 5 6 7 |
AnimatedContainer( width: _animation.value * 200, height: _animation.value * 150, color: colorTween.evaluate(_animation), duration: Duration(milliseconds: 500), ) |
AnimatedWidgetの実装方法
AnimatedWidgetは、アニメーションとUIを結びつけるための重要なクラスです。このクラスを使うことで、StatefulWidgetの再描画を最小限に抑えつつアニメーションを実行できます。
StatefulWidgetとの連携
AnimatedWidgetを使用する際には、Animationオブジェクトをプロパティとして受け取る必要があります。以下は簡単な実装例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyAnimatedWidget extends AnimatedWidget { MyAnimatedWidget({required Animation<double> animation}) : super(listenable: animation); @override Widget build(BuildContext context) { final value = listenable as Animation<double>; return Container( width: value * 100, height: value * 100, color: Colors.blueAccent.withOpacity(value), ); } } |
リッスン可能なアニメーション構造
AnimationListenerやStatusListenerを登録することで、アニメーションの開始・終了時に処理を実行できます。以下は終了時の処理例です。
|
1 2 3 4 5 6 |
_controller.addListener(() { if (_controller.status == AnimationStatus.completed) { print('アニメーションが完了しました'); } }); |
Flutter 3.0新機能の活用
Flutter 3.0では、Improved Animation APIやTransition Animationsの最適化など、従来よりパワフルな機能が追加されました。これらの技術を上手に使うことで、さらに高品質なUIアニメーションが実現できます。
Improved Animation APIの特徴
AnimationとAnimationControllerの分離により柔軟な制御が可能CurvedAnimationやTweenとの連携が容易- アニメーションのライフサイクル管理が強化
注意：
Improved Animation APIはFlutter 3.0の公式ドキュメントに記載されている技術であり、Transitionクラスとは無関係です。
Transition Animationsの最適化
ページ遷移やコンポーネント表示時のアニメーションを効率的に実装するには、PageRouteBuilderやFadeTransitionが役立ちます。
|
1 2 3 4 5 6 7 8 9 10 |
Navigator.push( context, PageRouteBuilder( pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition(opacity: animation, child: child); }, ), ); |
シンプルなトランジションアニメーションの作成例
ここでは、ボタンクリック時のフェードインアニメーションとページ遷移アニメーションを実装する具体的なコードサンプルを紹介します。
ボタンクリック時のフェードイン実装
以下のコードは、AnimatedOpacityを使用したシンプルなフェードインアニメーションです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
class FadeInButton extends StatefulWidget { @override _FadeInButtonState createState() => _FadeInButtonState(); } class _FadeInButtonState extends State<FadeInButton> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _animation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 500), vsync: this, ); _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller); } @override void dispose() { _controller.dispose(); super.dispose(); } void _startAnimation() { if (!_controller.isAnimating) { _controller.forward(); } } @override Widget build(BuildContext context) { return Column( children: [ AnimatedOpacity( opacity: _animation.value, duration: Duration(milliseconds: 500), child: Text('こんにちは！'), ), ElevatedButton( onPressed: _startAnimation, child: Text('フェードイン開始'), ), ], ); } } |
ページ遷移アニメーションサンプル
以下のコードは、PageRouteBuilderを使用したページ遷移時のスライドアニメーションです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Navigator.push( context, PageRouteBuilder( pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(), transitionsBuilder: (context, animation, secondaryAnimation, child) { return SlideTransition( position: Tween<Offset>( begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0), ).animate(animation), child: child, ); }, ), ); |
記事のまとめ
- AnimationControllerを用いた基本的なアニメーション実装方法
- Tweenクラスで値の補間を制御する技術
- AnimatedWidgetによるUIとアニメーションの連携
- Flutter 3.0のImproved Animation APIやTransition Animationsの活用法
- ボタンクリック時のフェードインやページ遷移アニメーションのコード例
記事下部のサンプルコードをコピーして実際に動かしてみましょう。Flutter 3.0のアニメーション機能をマスターすれば、UIの使いやすさとユーザー体験の向上が期待できます。