[flutter] 디자인 트렌드에 맞는 플러터 앱을 위한 클리퍼 애니메이션 구현 방법

05 Dec 2023

flutter

디자인 트렌드에 맞는 애니메이션은 앱의 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 플러터(Flutter)는 풍부한 애니메이션 기능을 제공하여 사용자와 상호작용하는 앱을 만들 수 있습니다. 이번 글에서는 클리퍼(clipper) 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

클리퍼 애니메이션?

클리퍼 애니메이션은 주어진 형태의 경계를 따라 컨텐츠를 자르는 애니메이션입니다. 이를 통해 앱 내의 요소들을 부드럽게 보여줄 수 있습니다. 클리퍼 애니메이션을 구현하는 데에는 다음과 같은 단계가 필요합니다:

클리퍼 생성
컨트롤러 생성
애니메이션 생성
애니메이션 적용

아래에서 각 단계를 자세히 살펴보겠습니다.

단계 1: 클리퍼 생성

클리퍼는 컨텐츠를 자르기 위해 사용되는 형태입니다. 플러터는 기본적으로 여러 종류의 클리퍼를 제공하며, 사용자 지정 클리퍼를 작성할 수도 있습니다. 예를 들어, ClipOval은 원형으로 컨텐츠를 자르는 클리퍼이며, ClipRRect는 둥근 모서리를 가진 사각형 클리퍼입니다.

ClipOval(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

단계 2: 컨트롤러 생성

애니메이션을 제어하기 위해 컨트롤러를 생성해야 합니다. AnimationController 클래스를 사용하여 컨트롤러를 만들 수 있습니다. 이 클래스는 애니메이션의 진행 상태를 관리하고, 애니메이션을 제어하는 메서드를 제공합니다.

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

단계 3: 애니메이션 생성

애니메이션을 생성하기 위해 Tween 클래스를 사용합니다. 이를 통해 시작 값과 종료 값 사이의 애니메이션 값 범위를 정의할 수 있습니다. 예를 들어, 위치 애니메이션을 위해 Tween<Offset>를 사용할 수 있습니다.

Animation<Offset> offsetAnimation = Tween<Offset>(
  begin: Offset(0.0, 0.0),
  end: Offset(1.0, 1.0),
).animate(controller);

단계 4: 애니메이션 적용

마지막으로, 애니메이션을 특정 위젯에 적용해야 합니다. 플러터는 AnimatedBuilder 위젯을 제공하여 위젯의 부분 트리를 리빌드하면서 애니메이션을 적용할 수 있습니다.

AnimatedBuilder(
  animation: controller,
  builder: (BuildContext context, Widget child) {
    return Align(
      alignment: offsetAnimation.value,
      child: child,
    );
  },
  child: ClipOval(
    child: Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ),
)

위 코드에서 AnimatedBuilder의 animation 속성에 컨트롤러를 전달하고, builder 콜백 함수에서 애니메이션 값을 이용하여 위젯을 구성합니다.

이제 클리퍼 애니메이션을 구현하는 방법을 알았습니다. 플러터를 사용하여 앱에 멋진 디자인 요소를 추가해보세요!

참고 자료

Flutter 애니메이션 가이드