[flutter] 회전 애니메이션 구현하기

Flutter는 강력한 애니메이션 기능을 제공하여 화면 요소들을 멋지고 동적인 방식으로 표현할 수 있게 해줍니다. 여기서는 Flutter를 사용하여 회전 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

애니메이션 컨트롤러 생성하기

먼저, 회전 애니메이션을 제어하기 위한 AnimationController를 생성해야 합니다. AnimationController는 애니메이션의 진행 상황을 제어하고 애니메이션의 지속 시간 및 커브를 설정하는 데 사용됩니다.

AnimationController _controller;

AnimationController를 초기화하고 회전 애니메이션의 지속 시간을 2초로 설정하는 예제 코드를 살펴보겠습니다.

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

애니메이션 적용하기

다음으로, 회전 애니메이션을 적용할 화면 요소에 애니메이션을 적용해야 합니다. 이를 위해 Transform 위젯을 사용하여 요소를 회전시킬 수 있습니다.

Transform.rotate(
  angle: _controller.value * 2.0 * math.pi,
  child: // 회전 애니메이션을 적용할 화면 요소,
)

위의 예제 코드에서 _controller.value는 AnimationController의 값에 따라 회전 각도가 변하도록 설정되었습니다.

애니메이션 시작 및 정지

애니메이션을 시작하거나 정지시키는 방법에 대해 알아보겠습니다.

애니메이션을 시작하려면 다음과 같이 _controllerforward 메서드를 호출하면 됩니다.

_controller.forward();

애니메이션을 정지시키려면 다음과 같이 _controllerstop 메서드를 호출하면 됩니다.

_controller.stop();

이제 Flutter에서 간단한 회전 애니메이션을 구현하는 방법에 대해 알아보았습니다. 애니메이션 컨트롤러를 사용하여 애니메이션을 제어하고 Transform 위젯을 사용하여 화면 요소를 회전시킬 수 있습니다.

더 많은 세부적인 내용은 Flutter 애니메이션 문서를 참고하시기 바랍니다.