Flutter開発入門52 FlutterでAnimationControllerの使い方

Daichi Mizuno

2か月前

はじめに

アニメーションは、アプリケーションにインタラクティブ性や視覚的な魅力を加える強力なツールです。Flutterでは、AnimationControllerを使って高度なアニメーションを簡単に作成できます。このチュートリアルでは、AnimationControllerの基本的な使い方を紹介し、シンプルなアニメーションをFlutterで実装する方法を詳しく解説します。

AnimationControllerは、アニメーションの進行状態を管理するために使用され、タイムラインのようにアニメーションを再生・停止・逆再生することが可能です。この記事を読めば、Flutterアプリにアニメーションを加える方法が理解でき、視覚的な要素を強化する手法を身につけることができます。

AnimationControllerとは
1. 主な特徴
AnimationControllerを使ったアニメーションの基本
1. AnimationControllerのセットアップ
Tweenを使ったアニメーションの強化
1. Tweenの基本
2. Tweenを使ったサンプルコード
AnimationControllerを使ったその他の操作
1. アニメーションの停止・再開
2. ループアニメーション
まとめ

AnimationControllerとは

AnimationControllerは、Flutterのアニメーションを制御するためのクラスで、アニメーションの進行を管理します。このコントローラーは、指定した期間に渡って0から1までの値を生成し、アニメーションの再生、停止、逆再生、ループなどを制御します。AnimationControllerを使うことで、簡単なアニメーションから複雑なアニメーションまで幅広く作成できます。

主な特徴

制御の自由度：アニメーションの再生、停止、逆再生、リピートなどを自由に制御可能。
タイムラインの管理：アニメーションの進行を指定した時間で管理できる。
連携可能：Tweenなどと連携することで、具体的な数値やカラーの変化をアニメーションで表現できる。

AnimationControllerを使ったアニメーションの基本

AnimationControllerのセットアップ

まず、AnimationControllerを使ってシンプルなアニメーションを作成する準備を行います。AnimationControllerは、TickerProviderStateMixinを使用してライフサイクルに合わせて適切に管理します。

基本的なコード例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimationExample(),
    );
  }
}

class AnimationExample extends StatefulWidget {
  @override
  _AnimationExampleState createState() => _AnimationExampleState();
}

class _AnimationExampleState extends State<AnimationExample> with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,  // TickerProvider
    )..repeat(reverse: true);  // アニメーションの繰り返し
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimationController Example'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform.scale(
              scale: _controller.value + 1,  // 値の範囲を1-2にする
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

解説

AnimationController：2秒間のアニメーションを設定しています。vsync: thisは、TickerProviderStateMixinを使ってアニメーションのパフォーマンスを最適化しています。
repeat(reverse: true)：アニメーションを繰り返し実行し、逆方向にもアニメーションする設定です。
AnimatedBuilder：アニメーションの状態に応じてUIを再ビルドします。_controller.valueの値を使用して、四角のサイズが変わるアニメーションを作成しています。
Transform.scale：スケール（拡大・縮小）アニメーションを適用し、_controller.valueに基づいてサイズを動的に変更します。

Tweenを使ったアニメーションの強化

次に、Tweenを使って値の範囲を指定することで、アニメーションの動きをさらにカスタマイズする方法を見てみましょう。

Tweenの基本

Tweenを使えば、数値の変化を任意の範囲で制御できます。たとえば、アニメーションの進行に応じて色や位置、サイズなどを変化させることが可能です。

Tweenを使ったサンプルコード

class _AnimationExampleState extends State<AnimationExample> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat(reverse: true);

    _colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Tween Animation Example'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Container(
              width: 100,
              height: 100,
              color: _colorAnimation.value,  // 色をアニメーション
            );
          },
        ),
      ),
    );
  }
}

解説

ColorTween：青色から赤色への変化をアニメーションします。beginとendで色の範囲を指定します。
_colorAnimation：Tweenによるアニメーションの値を管理します。
Containerのcolor：Tweenによってアニメーションされた色を、Containerの色に反映させています。

AnimationControllerを使ったその他の操作

アニメーションの停止・再開

AnimationControllerを使えば、アニメーションの再生や停止も簡単に制御できます。以下のメソッドを使用して、アニメーションをコントロールします。

start()：アニメーションを開始する。
stop()：アニメーションを一時停止する。
reset()：アニメーションの状態をリセットする。
forward()：アニメーションを前方向に再生する。
reverse()：アニメーションを逆再生する。

FloatingActionButton(
  onPressed: () {
    if (_controller.isAnimating) {
      _controller.stop();
    } else {
      _controller.forward();
    }
  },
  child: Icon(Icons.play_arrow),
)

ループアニメーション

repeat()メソッドを使うことで、アニメーションを無限に繰り返すことができます。また、reverse: trueを指定すれば、逆方向にもアニメーションを実行します。

まとめ

AnimationControllerを使えば、Flutterで高度なアニメーションを簡単に作成できます。今回紹介した基本的なスケーリングアニメーションやTweenによる色の変化は、アプリに動的な要素を加えるための基本的な方法です。

アニメーションは、アプリにインタラクティブなフィードバックを与える強力なツールです。AnimationControllerとTweenを活用して、より洗練されたアニメーションをFlutterアプリに追加してみてください。