[flutter] 플러터 애니메이션 (Animation) 적용하기

애니메이션은 사용자 인터페이스(UI)를 통해 움직임이나 변화를 부여하여 더욱 생동감있는 사용자 경험을 제공할 수 있는 기능입니다. Flutter에서는 간단하고 효과적인 애니메이션을 구현할 수 있는 다양한 방법들을 제공합니다. 이번 블로그 포스트에서는 플러터에서 애니메이션을 적용하는 방법에 대해 알아보겠습니다.

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

애니메이션을 효과적으로 제어하기 위해서는 애니메이션 컨트롤러를 생성해야 합니다. 이를 위해 AnimationController 클래스를 사용할 수 있습니다.

final animationController = AnimationController(
  duration: Duration(milliseconds: 500),
  vsync: this,
);

위 코드에서 duration은 애니메이션의 지속 시간을 의미하며, vsync는 애니메이션에 필요한 화면 갱신 신호를 받기 위한 인터페이스를 설정합니다.

애니메이션 정의하기

애니메이션을 정의하기 위해 Tween 클래스를 사용할 수 있습니다. Tween은 시작 값과 종료 값 사이의 애니메이션 값을 만들어 내는 역할을 합니다. 예를 들어, 크기가 0에서 1로 변하는 애니메이션을 만들고 싶다면 아래와 같이 코드를 작성할 수 있습니다.

final animation = Tween<double>(begin: 0.0, end: 1.0).animate(animationController);

애니메이션 실행하기

애니메이션을 실행하기 위해서는 animationController를 사용하여 forward() 또는 reverse() 메서드를 호출합니다. forward()는 애니메이션이 시작 값을 종료 값으로 이동하는 방향으로 실행되며, reverse()는 애니메이션이 종료 값을 시작 값으로 이동하는 방향으로 실행됩니다.

animationController.forward();

애니메이션 리스너 등록하기

애니메이션의 진행 상황을 감지하기 위해 addListener() 메서드를 사용하여 애니메이션 리스너를 등록할 수 있습니다. 이를 통해 애니메이션의 값이 변할 때마다 코드를 실행하거나 화면을 업데이트 할 수 있습니다.

animationController.addListener(() {
  setState(() {
    // 애니메이션 값 변경에 따른 코드 실행
  });
});

애니메이션 제거하기

애니메이션이 더 이상 필요하지 않을 때는 dispose() 메서드를 호출하여 애니메이션을 제거해야 합니다. 그렇지 않을 경우, 메모리 누수가 발생할 수 있습니다.

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

위의 코드에서 dispose() 메서드는 StatefulWidget의 생명 주기 중 일부로 호출되는 메서드입니다.

결론

Flutter에서는 다양한 방법으로 애니메이션을 적용할 수 있습니다. 이번 블로그 포스트에서는 기본적인 애니메이션 컨트롤러 생성, 애니메이션 정의, 애니메이션 실행, 애니메이션 리스너 등록 및 애니메이션 제거에 대해 알아보았습니다. 이를 참고하여 Flutter 앱에 멋진 애니메이션 효과를 적용해 보세요!

참고 자료