Flutter 는 사용자 정의 필드 전환 애니메이션 으로 페이지 전환 을 실현 합 니 다.

fluo 필드 전환 애니메이션 소스 코드 는 사용자 정의 필드 전환 애니메이션 을 사용 하기 전에 fluo 의 소스 코드 를 먼저 벗 기 고 소스 코드 를 통 해 이러한 표준 적 인 필드 전환 방법 을 발견 할 수 있 습 니 다.

RouteTransitionsBuilder _standardTransitionsBuilder(
      TransitionType? transitionType) {
    return (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      if (transitionType == TransitionType.fadeIn) {
        return FadeTransition(opacity: animation, child: child);
      } else {
        const Offset topLeft = const Offset(0.0, 0.0);
        const Offset topRight = const Offset(1.0, 0.0);
        const Offset bottomLeft = const Offset(0.0, 1.0);

        Offset startOffset = bottomLeft;
        Offset endOffset = topLeft;
        if (transitionType == TransitionType.inFromLeft) {
          startOffset = const Offset(-1.0, 0.0);
          endOffset = topLeft;
        } else if (transitionType == TransitionType.inFromRight) {
          startOffset = topRight;
          endOffset = topLeft;
        } else if (transitionType == TransitionType.inFromBottom) {
          startOffset = bottomLeft;
          endOffset = topLeft;
        } else if (transitionType == TransitionType.inFromTop) {
          startOffset = Offset(0.0, -1.0);
          endOffset = topLeft;
        }

        return SlideTransition(
          position: Tween<Offset>(
            begin: startOffset,
            end: endOffset,
          ).animate(animation),
          child: child,
        );
      }
    };
  }

원본 코드 를 통 해 알 수 있 듯 이 매 거 진 에 따라 서로 다른 애니메이션(즉 transition Builder)을 되 돌려 주 었 습 니 다.그 중에서 Transition Type.fadeIn 은 Flutter 가 자체 적 으로 가지 고 있 는 FadeTransition 을 사용 하여 투명 도 를 바 꾸 어 애니메이션 을 완성 합 니 다.다른 왼쪽 슬라이딩,오른쪽 슬라이딩,슬라이딩,위 슬라이딩 은 모두 초기 오프셋 위치 에서 끝 위치 로 미 끄 러 지 며 SlideTransition 을 사용 합 니 다.Flutter 는 상기 FadeTransition,SlideTransition 을 제외 하고 다음 과 같은 자주 사용 하 는 전환 형식 도 있 습 니 다.
회전
Scale Transition:크기 조정
그렇다면 우 리 는 조롱박 을 따라 바 가 지 를 그 릴 수 있 으 며,먼저 시스템 의 다른 전환 효과 로 사용자 정의 전환 을 해 볼 수 있다.
회전 필드 애니메이션
먼저 회전 하 는 회전 장 RotationTransition 을 살 펴 보고 RotationTransition 의 구조 방법 은 다음 과 같다.

const RotationTransition({
    Key? key,
    required Animation<double> turns,
    this.alignment = Alignment.center,
    this.child,
  })  : assert(turns != null),
        super(key: key, listenable: turns);

그 중에서 turns 는 애니메이션 제어 로 회전 하 는 라디안 수 를 나타 내 며 애니메이션 제어 값 에 2 pi 를 곱 하 는 것 과 같다.alignment 는 회전 이 둘러싸 인 중심 위 치 를 표시 합 니 다.기본 값 은 가운데 입 니 다.회전 하 는 라디안 이 너무 크 지 않 으 면 애니메이션 이 너무 빨 라 서 예 쁘 지 않 습 니 다.검증 을 통 해 추천 하 는 시작 값 은 0.2 에서 0.3 사이 이 고 끝 값 은 0 으로 정상 적 인 위치 로 돌아 가 는 것 을 나타 냅 니 다.시작 값 이 마이너스 라면 시계 방향 입 니 다.만약 정규 가 시계 반대 방향 이 라면 예시 코드 는 다음 과 같다.

//         
RouterManager.router.navigateTo(
  context,
  RouterManager.transitionPath,
  transition: TransitionType.custom,
  transitionBuilder:
      (context, animation, secondaryAnimation, child) {
    return RotationTransition(
      turns: Tween<double>(
        begin: 0.25,
        end: 0.0,
      ).animate(animation),
      child: child,
    );
  },
);

//...
//          
RouterManager.router.navigateTo(
  context,
  RouterManager.transitionPath,
  transition: TransitionType.custom,
  transitionBuilder:
      (context, animation, secondaryAnimation, child) {
    return RotationTransition(
      alignment: Alignment.bottomLeft,
      turns: Tween<double>(
        begin: -0.25,
        end: 0.0,
      ).animate(animation),
      child: child,
    );
  },
);

그 중에서 Tween 은 시스템 자체 의 선형 플러그 인 방법 이다.
전환 애니메이션 크기 조정
크기 조정 필드 와 같은 것 은 그림 미리 보기 에서 흔히 볼 수 있 습 니 다.보통 작은 비율 에서 1:1 비율 로 크기 조정 합 니 다.사용 방식 은 회전 필드 와 유사 합 니 다.예제 코드 는 다음 과 같 습 니 다.

RouterManager.router.navigateTo(
  context,
  RouterManager.transitionPath,
  transition: TransitionType.custom,
  transitionBuilder:
      (context, animation, secondaryAnimation, child) {
    return ScaleTransition(
      scale: Tween<double>(
        begin: 0.5,
        end: 1.0,
      ).animate(animation),
      child: child,
    );
  },
);

사용자 정의 필드 전환 애니메이션
원본 코드 를 읽 으 면 RotationTransition,Scale Transition 이 모두 Animated Widget 에서 계승 되 었 음 을 알 수 있 습 니 다.따라서 저 희 는 Animated Widget 에서 사용자 정의 Transition 을 작성 하여 build 방법 에서 Transform 대상 을 되 돌려 주면 됩 니 다.이런 방식 을 통 해 사용자 정의 전환 애니메이션 효 과 를 만 들 수 있다.우 리 는 변형 을 예 로 들 어 Matrix 4 의 skew 방법 을 이용 하여 x 와 y 축 을 변형 시 키 면 카드 변형 과 유사 한 효 과 를 얻 을 수 있다.X 축 이나 Y 축 에서 만 변형(skewX 와 skewY 방법)할 수 있다.여기 서 x,y 축 을 동시에 변형 시 켜 서 필드 애니메이션 을 정의 합 니 다.

class SkewTransition extends AnimatedWidget {
  const SkewTransition({
    Key key,
    Animation<double> turns,
    this.alignment = Alignment.center,
    this.child,
  })  : assert(turns != null),
        super(key: key, listenable: turns);

  Animation<double> get turns => listenable as Animation<double>;

  final Alignment alignment;

  final Widget child;

  @override
  Widget build(BuildContext context) {
    final double turnsValue = turns.value;
    final Matrix4 transform =
        Matrix4.skew(turnsValue * pi * 2.0, turnsValue * pi * 2.0);
    return Transform(
      transform: transform,
      alignment: alignment,
      child: child,
    );
  }
}

사용 방식 은 RotationTransition 과 유사 합 니 다.

RouterManager.router.navigateTo(
  context,
  RouterManager.transitionPath,
  transition: TransitionType.custom,
  transitionBuilder:
      (context, animation, secondaryAnimation, child) {
    return SkewTransition(
      turns: Tween<double>(
        begin: -0.05,
        end: 0.0,
      ).animate(animation),
      child: child,
    );
  },
);

실제 적 으로 X 축 을 중심 으로 회전 하고 Y 축 을 중심 으로 회전 하 며 중심 점 위치(alignment)를 변경 하여 서로 다른 애니메이션 전환 효 과 를 실현 할 수 있 습 니 다.만약 에 더욱 복잡 한 애니메이션 효과 가 필요 하 다 면 애니메이션 의 실현 을 연구 할 수 있 고 후속 장 은 애니메이션 에 대한 소개 가 있 을 것 이다.
실행 효과
다음 그림 과 같이 실행 효과:

이상 은 Flutter 가 사용자 정의 전환 애니메이션 으로 페이지 전환 을 실현 하 는 상세 한 내용 입 니 다.Flutter 사용자 정의 전환 애니메이션 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!