Zenn
🦁

【Flutter Widget of the Week #7】FadeTransitionを使ってみた

2022/10/02に公開
Flutter
初心者
fadetransition
tech

はじめに

Flutter Widget of the Week #7 FadeTransition についてまとめましたので、紹介します。
https://youtu.be/rLwWVbv3xDQ

FadeTransition とは

Flutter では様々なアニメーションを作ることができます。
その中でもシンプルなアニメーションであるフェードイン、フェードアウト。
これらのアニメーションを作りたいときに使う Widget が今回紹介する FadeTransition です。
さっそくサンプルを動かしてみましょう。

サンプルは2秒ごとに Flutter ロゴが表示されたり消えたりするものとなってます。

main.dart
class FadeTransitionSample extends StatefulWidget {
  const FadeTransitionSample({super.key});

  @override
  State<FadeTransitionSample> createState() => _FadeTransitionSampleState();
}

/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _FadeTransitionSampleState extends State<FadeTransitionSample>
    with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
  );

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: FadeTransition(
        opacity: _animation,
        child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()),
      ),
    );
  }
}

FadeTransition のプロパティについて

サンプルコード を例に見ていきます。

main.dart
child: FadeTransition(
  opacity: _animation,
  child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()),
),

①child

アニメーションさせたいウィジェットを設定する

②opacity

透明度0〜1の値で設定できる
AnimationController を使うことで動的に設定することもできる
型は Animation<double>

Animation<double> についてもう少し詳しくみてみましょう。
サンプルコードでは _animation の部分です。

main.dart
late final AnimationController _controller = AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
)..repeat(reverse: true);

late final Animation<double> _animation = CurvedAnimation(
  parent: _controller, // アニメーションの設定をする（上の_controller）
  curve: Curves.easeIn, // アニメーションの種類を指定する
);

まず AnimationController でアニメーションの長さや終了するときの値、最初や最後に停止するかどうかなど動きの設定を作ります。
そして、CurvedAnimation の parent プロパティにそれらの設定、curve プロパティにアニメーションの種類を指定することで動き方が決まります。
curve プロパティに入れるアニメーションの種類が他にどんなのがあるか知りたい方は以下を参考にしてください。
https://zenn.dev/faucon/articles/99f8249b21583e#アニメーションの種類

AnimationController のプロパティについて

AnimationController のプロパティについて

main.dart
(new) AnimationController AnimationController({
  double? value,
  Duration? duration,
  Duration? reverseDuration,
  String? debugLabel,
  double lowerBound = 0.0,
  double upperBound = 1.0,
  AnimationBehavior animationBehavior = AnimationBehavior.normal,
  required TickerProvider vsync,
})

①value

アニメーションの現在の値を指定する

②duration

アニメーションの長さを Duration型 で指定する

③reverseDuration

アニメーションが逆方向に進むときの時間の長さを指定する

④debugLabel

toString 出力で使用されるラベル
デバッグ出力でアニメーションコントローラインスタンスを識別するのに役立つ

⑤lowerBound

アニメーションの開始する値を指定する
デフォルトでは0.0

⑥upperBound

アニメーションの停止する値を指定する
デフォルトでは1.0

⑦animationBehavior

AccessibilityFeatures.disableAnimationsがtrueの場合のコントローラの動作を指定する
値は AnimationBehavior enum の normal, preserve があります。

最後に

今回は FadeTransition を紹介しました。フェードイン、フェードアウトはアプリを使っていたらよく見るアニメーションではないでしょうか。一度は見たことのあるアニメーションがこれだけで作れると思うと便利な Widget ですね。
次は #8 FloatingActionButton です。またお会いしましょう。

参考記事

https://api.flutter.dev/flutter/widgets/FadeTransition-class.html
https://api.flutter.dev/flutter/animation/AnimationController-class.html

Discussion