[Flutter] Animation_00

애니메이션 효과를 간단하게 주는 방법 중, 방향을 돌리는 RotationTransition 대해서 메모 !

먼저 애니메이션 컨트롤러를 선언한다. 변환 하는 시간은 200 milliseconds로 설정.

late final AnimationController _animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 200),
  );

그리고 얼마만큼 각도를 돌릴지 시작과 끝 각도(0~1 == 0°~360°)를 정하고 컨트롤러도 정해준다.

late final Animation<double> _arrowAnimation =
      Tween(begin: 0.0, end: 0.5).animate(_animationController);

해당 Animation효과를 준 위젯을 컨트롤러를 이용하여 _arrowAnimation에서 설정한 값대로 진행(forward)하고 되감(reverse)을 수 있도록 onTap함수를 만든다.

void _onTitleTap() {
    if (_animationController.isCompleted) {
      _animationController.reverse();
    } else {
      _animationController.forward();
    }
  }

해당 Row위젯을 GestureDetector로 감싸고 onTap할 시 _onTitleTap 함수를 불러와서 RotationTransition을 동작(turn)시킨다. 얼만큼? _arrowAnimation에 설정한 만큼!

GestureDetector(
          onTap: _onTitleTap,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('All activity'),
              Gaps.h4,
              RotationTransition(
                turns: _arrowAnimation,
                child: const FaIcon(
                  FontAwesomeIcons.chevronDown,
                  size: Sizes.size14,
                ),
              ),
            ],
          ),
        ),