[Flutter]CurveAnimationをするには？

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

曲線的な変化をする「CurveAnimation」をする方法を紹介します。

方法

CurveAnimationをするには、まず「AnimationController」を用意します。

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

そして、CurvedAnimationクラスのインスタンスを作成します。

Animation _curveAnimation = CurvedAnimation(
    parent: _controller, //AnimationController
    curve: Curves.bounceIn, //変化を設定
  );

「parent」には、AnimationControllerを設定します。

また、引数「curve」には、変化の仕方を「Curves」から指定します。

後は、このCurveAnimationを、必要な場所に設定します。

        AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, child) => child!,
          child: Transform.scale(
            scale: _curveAnimation.value,
            child: Container(
              height: 100,
              width: 100,
              color: Colors.blue,
            ),
          ),
        ),