Flutter 는 fluro 의 필드 전환 애니메이션 을 사용 하여 페이지 전환 을 진행 합 니 다.

fluro 에서 프로세서 Handler 를 정의 할 때 이 페이지 의 기본 전환 형식 을 지정 하거나 navigateTo 방법 을 사용 하면 페이지 전환 transition 파 라 메 터 를 설정 하여 맞 춤 형 전환 형식 을 설정 할 수 있 습 니 다.이 편 은 fluro 에 내 장 된 전환 애니메이션 을 보 여 주 었 는데 효 과 는 다음 그림 과 같다.

전환 형식
fluro 의 전환 형식 은 Transition Type 을 통 해 다음 과 같이 정 의 됩 니 다.

enum TransitionType {
  native, //    ，        ，  
  nativeModal, //      
  inFromLeft,  //    
  inFromTop,   //     
  inFromRight, //    
  inFromBottom,//     
  fadeIn,      //  
  custom,      //   ，     transitionBuilder   
  material,    //      
  materialFullScreenDialog, //         （         ）
  cupertino,   //iOS     
  cupertinoFullScreenDialog,//iOS       （         ）
  none,				 //     
}

페이지 기본 전환 방식 설정
Handler 를 정의 할 때 필드 전환 애니메이션 의 transition 을 지정 할 수 있 습 니 다.다음 과 같 습 니 다.

//...
router.define(transitionPath,
  handler: transitionHandler,
  transitionType: TransitionType.inFromBottom);
//...

이 럴 때 navigateTo 방법 에 전환 애니메이션 이 지정 되 지 않 으 면 경로 가 미리 정 의 된 방식 으로 전환 합 니 다.
점프 할 때 필드 전환 방식 을 지정 합 니 다.
FluroRouter 의 navigateTo 방법 은 지정 한 필드 전환 애니메이션 형식 을 표시 할 수 있 습 니 다.transition 매개 변수 에 대응 하 는 매 거 진 값 만 지정 하면 됩 니 다.예제 코드 는 다음 과 같 습 니 다.

RouterManager.router.navigateTo(
  context, RouterManager.transitionPath,
  transition: TransitionType.inFromRight);

전환 애니메이션 의 시간 을 제어 하려 면 transition Duration 인 자 를 설정 할 수 있 습 니 다.transition Duration 은 Duration 대상 입 니 다.사용자 의 대기 시간 과 체험 을 고려 하여 일반 전환 애니메이션 은 200-300 밀리초 사 이 를 권장 합 니 다.예제 코드 는 다음 과 같다.

RouterManager.router.navigateTo(
  context, RouterManager.transitionPath,
  transition: TransitionType.fadeIn,
  transitionDuration: Duration(milliseconds: 1000));

총결산
이 를 통 해 알 수 있 듯 이 fluro 자체 가 제공 하 는 프 리 셋 애니메이션 은 대부분 장면 의 사용 을 만족 시 킬 수 있 습 니 다.페이지 의 등장 형식 이 고정 적 이면 경로 가 정 의 될 때 지정 하여 모든 점프 가 transition 파 라 메 터 를 설정 해 야 하지 않도록 하 는 것 을 권장 합 니 다.다른 필드 애니메이션 이 필요 하 다 면 transition Builder 를 사용 하여 구축 할 수 있 습 니 다.다음 편 은 사용자 정의 필드 애니메이션 을 구축 하 는 방법 을 소개 합 니 다.
이상 은 Flutter 가 fluo 의 필드 전환 애니메이션 을 사용 하여 페이지 전환 을 하 는 상세 한 내용 입 니 다.Flutter fluo 필드 전환 애니메이션 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 십시오!