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의 값에 따라 회전 각도가 변하도록 설정되었습니다.
애니메이션 시작 및 정지
애니메이션을 시작하거나 정지시키는 방법에 대해 알아보겠습니다.
애니메이션을 시작하려면 다음과 같이 _controller
의 forward
메서드를 호출하면 됩니다.
_controller.forward();
애니메이션을 정지시키려면 다음과 같이 _controller
의 stop
메서드를 호출하면 됩니다.
_controller.stop();
이제 Flutter에서 간단한 회전 애니메이션을 구현하는 방법에 대해 알아보았습니다. 애니메이션 컨트롤러를 사용하여 애니메이션을 제어하고 Transform 위젯을 사용하여 화면 요소를 회전시킬 수 있습니다.
더 많은 세부적인 내용은 Flutter 애니메이션 문서를 참고하시기 바랍니다.