[Flutter]消えるアニメーションをするには？

どうも、ちょげ(@chogetarou)です。

消えるアニメーションをする方法を紹介します。

方法

消えるアニメーションをするには、FadeTransitionウェジェットを使います。

まず、AnimationControllerを用意します。

  late AnimationController _controller;
  late Animation<double> _fadeAnimation;

次に、initStateで初期化、disposeで破棄をします。

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: Duration(milliseconds: 1),
      vsync: this,
    );

    _controller.addListener(() {
      setState(() {});
      print(_controller.value);
    });

    _fadeAnimation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
  }

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

そして、アニメーションを操作するための関数を用意しておきます。

  void _animationChange() {
   //アニメーションの状態で分岐
    if (_controller.status == AnimationStatus.completed) {
       //逆向きのアニメーション
      _controller.reverse();
    } else {
     //アニメーションの開始
      _controller.forward();
    }
  }

あとは、FadeTransitionウェジェットにアニメーションの設定をします。

        FadeTransition(
          opacity: _fadeAnimation, //アニメーションの設定
          child: Container(
            height: 100,
            width: 100,
            color: Colors.blue,
          ),
        ),

あとは、タップやスワイプなどのトリガーに用意した関数を指定するだけです。

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        FadeTransition(
          opacity: _fadeAnimation,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.blue,
          ),
        ),
        TextButton(
          onPressed: _animationChange,
          child: Text('Switch!'),
        )
      ],
    ));
  }

まとめ

消えるアニメーションをするには、FadeTransitionウェジェットを使います。

使用したコード

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _fadeAnimation;

  void _animationChange() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _controller.addListener(() {
      setState(() {});
      print(_controller.value);
    });

    _fadeAnimation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        FadeTransition(
          opacity: _fadeAnimation,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.blue,
          ),
        ),
        TextButton(
          onPressed: _animationChange,
          child: Text('Switch!'),
        )
      ],
    ));
  }
}