Flutter의 사용자 지정 라우팅 전환 애니메이션

Flutter에서는 라우팅 점프 및 리턴을 포함하여 Navigator를 통해 라우팅 관리를 구현할 수 있습니다. 기본적으로 Flutter는 몇 가지 간단한 라우팅 전환 애니메이션을 제공하지만 때때로 사용자 경험을 개선하기 위해 일부 특수 애니메이션 효과를 사용자 지정해야 합니다. 이 기사에서는 Flutter에서 사용자 지정 라우팅 전환 애니메이션을 구현하는 방법을 소개합니다.

1. 애니메이션의 원리

Flutter에서 라우팅 전환 애니메이션은 실제로 라우팅 페이지의 전환 애니메이션을 통해 실현됩니다. 일반적으로 라우팅 페이지를 전환할 때 다음과 같은 전환 효과가 있습니다.

그라데이션 전환: 새 페이지는 투명에서 불투명으로 점진적으로 변경되고 이전 페이지는 점차 불투명에서 투명으로 변경됩니다.
확대/축소 전환: 새 페이지는 작은 화면에서 큰 화면으로 점진적으로 확대되고 이전 페이지는 전체 화면에서 점차 축소되어 사라집니다.
회전 전환: 새 페이지는 아래쪽 또는 위쪽에서 회전하고 이전 페이지는 아래쪽 또는 위쪽에서 회전합니다.

Flutter의 애니메이션 라이브러리를 통해 이러한 전환 효과를 얻을 수 있습니다.

2. 사용자 지정 경로 전환 애니메이션

Flutter는 PageRouteBuilder 클래스를 제공하여 경로 전환 애니메이션을 맞춤설정합니다. PageRouteBuilder 클래스를 상속하고 buildTransitions 메서드와 buildPage 메서드를 다시 작성하여 고유한 경로 전환 애니메이션을 실현할 수 있습니다.

class CustomPageRoute extends PageRouteBuilder {
  final Widget widget;

  CustomPageRoute(this.widget)
      : super(
          transitionDuration: Duration(seconds: 1),
          pageBuilder: (BuildContext context, Animation<double> animation,
              Animation<double> secondaryAnimation) {
            return widget;
          },
          transitionsBuilder: (BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
              Widget child) {
            // 自定义路由动画
          });
}

위의 코드에서는 PageRouteBuilder 클래스에서 상속되는 CustomPageRoute 클래스를 정의합니다. 위젯 매개변수는 이동하려는 페이지를 나타냅니다. 생성자에서 super 메서드를 호출하고 세 가지 매개 변수를 전달합니다.

transitionDuration: 라우팅 전환 애니메이션의 지속 시간을 나타냅니다.
pageBuilder: 리디렉션할 페이지를 나타내며 여기서는 위젯을 직접 반환합니다.
transitionsBuilder: 라우팅 전환 애니메이션의 빌더를 나타내며 여기에서 라우팅 전환 애니메이션을 사용자 지정할 수 있습니다.

다음으로 회전 전환으로 라우팅 전환 애니메이션을 구현해 보겠습니다.

class CustomPageRoute extends PageRouteBuilder {
  final Widget widget;

  CustomPageRoute(this.widget)
      : super(
          transitionDuration: Duration(seconds: 1),
          pageBuilder: (BuildContext context, Animation<double> animation,
              Animation<double> secondaryAnimation) {
            return widget;
          },
          transitionsBuilder: (BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
              Widget child) {
            return RotationTransition(
              turns: Tween<double>(begin: 0, end: 1).animate(animation),
              child: child,
            );
          });
}

위의 코드에서 transitionsBuilder 메서드의 반환 값을 RotationTransition 구성 요소로 설정했습니다. 그 중 회전 매개변수는 회전각도를 나타내는데 Tween을 사용하여 회전 시작각도와 종료각도를 설정한 후 Tween의 animate 메소드에 animation 매개변수를 전달하여 애니메이션의 실행 진행 상황을 표시합니다. 마지막으로 하위 매개변수를 RotationTransition의 하위 구성요소로 전달하여 애니메이션을 수행할 페이지를 나타냅니다.

3. 맞춤 라우팅을 사용하여 애니메이션 전환

사용자 지정 경로를 사용하여 애니메이션을 전환하는 것은 매우 간단합니다. 우리가 정의한 CustomPageRoute 클래스를 Navigator의 푸시 메서드에 전달하기만 하면 됩니다.

Navigator.of(context).push(CustomPageRoute(NextPage()));

그중 NextPage는 우리가 건너뛰고 싶은 페이지를 나타냅니다.

4. 요약

라우팅 전환 애니메이션을 사용자 지정하여 Flutter 애플리케이션에 더 멋진 애니메이션 효과를 추가하고 사용자 경험을 개선할 수 있습니다. 특정 구현 방법은 필요에 따라 다른 애니메이션 라이브러리 및 애니메이션 효과를 선택할 수 있습니다. 이 글은 구현 방법 중 하나만 소개하고 있으며, 독자들에게 도움이 되었으면 합니다.