【Flutter】拡大と縮小を繰り返すアニメーションを実装する

はじめに

Flutterでこのような拡大縮小を繰り返すアニメーションを実装してみます。

実装方法

今回はAnimationControllerとScaleTransitionを使って実装します。

1. AnimationControllerを定義する

StatefulWidgetを定義し、最初にinitState()内でAnimationControllerの初期化をします。
ここで、アニメーションのDurationを設定し、初期化しています。また、ついでにcascade記法を使って、repeat()関数の実行もしています。repeat()を呼び出すとアニメーションの繰り返しを自動で行ってくれます。

また、repeat()メソッドでreverse: trueをセットしている理由としては、デフォルトだと「start->end,start->end」といった感じで単方向のアニメーションが繰り返される感じになってしまい、end->startに戻る時のアニメーションが実行されないためです。

main.dart

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    )..repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    ...
  }
}

2. ScaleTransitionを定義して、AnimationControllerをセットする

ScaleTransitionはウィジェットのスケールをアニメーションさせるための便利ウィジェットです。
アニメーションさせたいウィジェットをラップし、scaleプロパティにて、先ほど定義したAnimationControllerをセットします。
ここでは、AnimationControllerのdrive()を呼び出す必要があります。

また、Tweenをdrive()の引数に含めることで、アニメーション開始時と終了時でどれくらい大きくするかの倍率を指定することができます。今回は、開始時はx1,終了時はx1.2で指定しています。

main.dart

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    )..repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ScaleTransition(
          scale: _animationController.drive(
            Tween<double>(
              begin: 1,
              end: 1.2,
            ),
          ),
          child: Image.asset(
            'images/sample.jpg',
            width: 200,
            height: 150,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

あと補足ですが、これにプラスして、別のTweenを指定するには、chain()メソッドを使って、複数のTweenを指定することができます。

main.dart

// 上記抜粋
Center(
  child: ScaleTransition(
    scale: _animationController.drive(
      Tween<double>(
        begin: 1,
        end: 1.2,
      ).chain(  // chainを使って、Tweenを追加する
        CurveTween(
          curve: Curves.easeInOutSine,
        ),
      ),
    ),
    child: Image.asset(
      'images/sample.jpg',
      width: 200,
      height: 150,
      fit: BoxFit.cover,
    ),
  ),
),

まとめ

小ネタですが、紹介させていただきました。コードはこちらにあげております。

ご覧いただきありがとうございました。