Flutter 를 이용 하여'공작 풀 스크린'의 애니메이션 효 과 를 실현 합 니 다.

머리말
오늘'공작 풀 스크린'과 같은 애니메이션 효 과 를 공유 하고 새로운 페이지 를 열 때 새로운 페이지 는 화면 오른쪽 상단 에서 원형 으로 전체 화면 으로 점점 열 립 니 다.
일단 구체 적 인 효 과 를 볼 게 요.

이런 효과 모 르 겠 어 요.여러분 이름 이 뭐 예요?더 적합 한 이름 이 있 으 면 댓 글 에서 이 효 과 를 어떻게 실현 하 는 지 알려 주세요.
Navigator 를 사용 하여 새 페이지 에 들 어 갈 때 보통 다음 과 같이 사용 합 니 다.

Navigator.of(context).push(MaterialPageRoute(
 builder: (context){
  return PageB();
 }
));

MaterialPageRoute 는 페이지 를 전환 할 때의 애니메이션 효 과 를 포함 합 니 다.iOS 에 서 는 좌우 슬라이딩 전환,Android 에 서 는 위아래 로 미 끄 러 지 는 효과 가 있 습 니 다.사용자 정의 전환 효 과 를 얻 으 려 면 어떻게 해 야 합 니까?정 답 은 PageRouteBuilder 를 사용 하 는 것 입 니 다.용법 은 다음 과 같 습 니 다.

Navigator.of(context).push(PageRouteBuilder(pageBuilder:
  (BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation) {
 ...
}));

pageBuilder 함수 에서 animation 을 사용 하여 새 페이지 의 애니메이션 효 과 를 되 돌려 주면 됩 니 다.
새로운 페이지 는 원형 효과 로 점차 열 리 고 크기 조정 효과 가 없 기 때문에 새로운 페이지 는 줄 어 들 었 습 니 다.새로운 페이지 는 오른쪽 상단 을 원심 으로 하고 반경 이 점점 커지 면서 자 르 는 것 이 우리 가 원 하 는 효과 입 니 다.
위의 분석 을 통 해 ClipPath 를 사용 하여 새로운 페이지 를 재단 합 니 다.

Navigator.of(context).push(PageRouteBuilder(pageBuilder:
  (BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation) {
 return AnimatedBuilder(
  animation: animation,
  builder: (context, child) {
   return ClipPath(
    clipper: CirclePath(animation.value),
    child: child,
   );
  },
  child: PageB(),
 );
}));

중요 한 것 은 CirclePath 입 니 다.이것 이 바로 재단 의 경로 입 니 다.

class CirclePath extends CustomClipper<Path> {
 CirclePath(this.value);

 final double value;

 @override
 Path getClip(Size size) {
  var path = Path();
  double radius =
    value * sqrt(size.height * size.height + size.width * size.width);
  path.addOval(Rect.fromLTRB(
    size.width - radius, -radius, size.width + radius, radius));
  return path;
 }

 @override
 bool shouldReclip(CustomClipper<Path> oldClipper) {
  return true;
 }
}

Path 는 원형 API 함 수 를 직접 추가 하지 않 았 기 때문에 타원 방법 을 사용 하여 타원 의 사각형 영역 을 정사각형 으로 설정 하면 원형 으로 재단 된다.
반지름 의 최대 치 는 화면의 너비 나 높이 가 아니 라 화면의 대각선 길이 이다.
오른쪽 상단 에서 시작 되 고 자 른 사각형 구역 은 정사각형 이 어야 하기 때문에 자 른 사각형 구역 은 페이지 영역 을 초과 합 니 다.
만약 많은 페이지 가 이 효 과 를 사용 했다 면 패 키 징 을 할 수 있 습 니 다.MaterialPageRoute 와 유사 합 니 다.패 키 징 은 다음 과 같 습 니 다.

class CirclePageRoute extends PageRoute {
 CirclePageRoute({
  @required this.builder,
  this.transitionDuration = const Duration(milliseconds: 500),
  this.opaque = true,
  this.barrierDismissible = false,
  this.barrierColor,
  this.barrierLabel,
  this.maintainState = true,
 });

 final WidgetBuilder builder;

 @override
 final Duration transitionDuration;

 @override
 final bool opaque;

 @override
 final bool barrierDismissible;

 @override
 final Color barrierColor;

 @override
 final String barrierLabel;

 @override
 final bool maintainState;

 @override
 Widget buildPage(BuildContext context, Animation<double> animation,
   Animation<double> secondaryAnimation) {
  return AnimatedBuilder(
   animation: animation,
   builder: (context, child) {
    return ClipPath(
     clipper: CirclePath(animation.value),
     child: child,
    );
   },
   child: builder(context),
  );
 }
}

쓰다

Navigator.of(context).push(CirclePageRoute(builder: (context) {
 return PageB();
}));

Cupertino PageRoute,Material PageRoute,PageRoute Builder 의 소스 코드 를 보면 이 세 개가 모두 PageRoute 에서 계승 되 었 다 는 것 을 알 게 될 것 입 니 다.그래서 우 리 는 자신 도 모 르 게 사용자 정의 경 로 를 배 웠 습 니 다.
총결산
여기 서 Flutter 를 이용 하여'공작 풀 스크린'을 실현 하 는 애니메이션 효과 에 관 한 글 을 소개 합 니 다.Flutter 애니메이션 효과 에 관 한 더 많은 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 사랑 해 주세요!