Flutterアプリで背景画像を滑らかに切り替える方法

2023年6月16日

URLをコピーしました！

つちのこあつめではゲーム内の時間経過に合わせて背景が二段階にアニメーションするようになっています。
今回はそれをどのように実装しているかを紹介します。

背景を重ねて表示させておく

まずは表示させたい画像をContainerとStackウィジェットを使って重ねて表示させておきます。
Containerのimageに設定されている画像が最初に表示され、AlignのChildに設定されているAnimatedOpacityのImageの画像が後から表示されます。
AnimatedOpacityは画像の透過度を徐々に変化させるために使用しています。opacityに与えられている変数の値を0から1に変化させることで、最初は表示されていなかった画像が表示されるようになります。


        body: Container(
            // 背景画像を設定
            decoration: const BoxDecoration(
                image: DecorationImage(
              image: AssetImage('assets/images/background/mura.png'),
              scale: 4.0,
              fit: BoxFit.cover,
            )),
            // 画像を任意の位置に配置するためにStackを使用
            child: Stack(children: [
              // 背景画像のAlign
              Align(
                alignment: const Alignment(0.0, 0.0),
                child: AnimatedOpacity(
                  opacity: bgOpacityEvening,
                  key: const ValueKey<String>('bgopacity_evening'),
                  curve: Curves.easeIn,
                  duration: const Duration(milliseconds: 2000),
                  child: Image.asset(
                    'assets/images/background/mura_evening.png',
                    scale: 1.0,
                    key: const ValueKey<String>('mura'), // Keyを付与
                    height: _size.height,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Align(
                alignment: const Alignment(0.0, 0.0),
                child: AnimatedOpacity(
                  opacity: bgOpacityNight,
                  key: const ValueKey<String>('bgopacity_night'),
                  curve: Curves.easeIn,
                  duration: const Duration(milliseconds: 2000),
                  child: Image.asset(
                    'assets/images/background/mura_night.png',
                    scale: 1.0,
                    key: const ValueKey<String>('mura'), // Keyを付与
                    height: _size.height,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ])),
          )

タイマーを使って任意のタイミングで透過度を変化させる

ウィジェットの準備ができたらあとは透過度を任意のタイミングで変化させることで画像の切り替えを行うことができます。
今回はタイマーを使うことでタイミングを指定しています。

  // 変数定義
  // 背景画像の透明度
  double bgOpacityEvening = 0.0;
  double bgOpacityNight = 0.0;

  void setTimer() {
      // 20秒後に夕方の背景に切り替える
      Timer _timer1 =
          Timer.periodic(const Duration(seconds: 20), (Timer _timer1) {
        _timer1.cancel();
        // 背景画像の透明度を変えてアニメーションさせる
        setState(() => bgOpacityEvening = 1);
      });

      // 27秒後に夜の背景に切り替える
      Timer _timer2 =
          Timer.periodic(const Duration(seconds: 27), (Timer _timer2) {
        _timer2.cancel();
        // 背景画像の透明度を変えてアニメーションさせる
        setState(() => bgOpacityNight = 1);
      });
  }

FlutterにはAnimatedOpacity以外にも様々な方法でウィジェットをアニメーションさせる方法が用意されています。
適切に利用することでアプリの魅力を高めていきたいですね！