Hero class
자식 위젯을 히어로 애니메이션의 후보로 표시하는 위젯입니다.
Navigator를 사용하여 PageRoute를푸시하거나 팝 하면전체 화면 콘텐츠가 교체됩니다. 이전 경로는 사라지고 새 경로가 나타납니다. 두 경로에 공통적인 시각적 특징이 있는 경우, 경로 전환 중에 해당 특징이 한 페이지에서 다른 페이지로 물리적으로 이동하도록 사용자에게 안내하는 데 도움이 될 수 있습니다. 이러한 애니메이션을 히어로 애니메이션이라고 합니다. 히어로 위젯은 전환 중에 Navigator 오버레이에서 "비행"하며, 이동 중에는 기본적으로 이전 경로와 새 경로의 원래 위치에 표시되지 않습니다.
위젯에 이러한 기능을 지정하려면 Hero 위젯으로 감싸세요. 탐색이 발생하면 각 경로에 있는 Hero 위젯은 HeroController에 의해 식별됩니다.동일한 태그를 가진 각 Hero 위젯 쌍에 대해 Hero 애니메이션이 실행됩니다.
탐색이 시작될 때 Hero가 이미 비행 중이 면 비행 애니메이션이 새 목적지로 리디렉션 됩니다. 전환 중 비행 중에 표시되는 위젯은 기본적으로 목적지 경로의 Hero 자식 위젯입니다.
영웅 애니메이션이 트리거 되려면 영웅이 새 페이지 애니메이션의 첫 번째 프레임에 존재해야 합니다.
경로에는 각 태그 에 대해 두 명 이상의 영웅이 포함될 수 없습니다.
예제 코드
Hero 는 플러터에서 화면 넘어갈 때 애니메이션 주는 위젯? 이라고 생각하면 편한 좋은 위젯이다.
예전 플러터에서는 그냥 이거 사용하기만 해도 알아서 애니메이션을 넣어 줬던 것 같은데 업데이트를 꾸준히 하는 플-황 이기 때문에 이제는 바뀌어서 우리가 직접 넣어줘야 한다. 한번 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| tag | Object | – | 같은 태그를 가진 Hero끼리 화면 전환 시 애니메이션 |
| createRectTween | CreateRectTween? | null | 위치 및 크기 변화를 정의하는 Rect Tween 생성 함수 |
| flightShuttleBuilder | HeroFlightShuttleBuilder? | null | 이동하는 동안 보여줄 위젯을 커스터마이징할 수 있음 |
| placeholderBuilder | HeroPlaceholderBuilder? | null | 이동 중일 때 원래 자리에 보여질 위젯을 정의함 |
| transitionOnUserGestures | bool | false | 사용자의 제스처에 따라 Hero 전환 여부를 결정함 |
| child | Widget | – | 화면 전환 시 애니메이션 효과가 적용될 위젯 |
사용 법은 간단하다. 자신이 다음 화면에서 보여주고 싶은? 따라가고 싶은 이미지에 tag 를 넣어준다.
Hero(
tag: '1',
child: Image.network(
나는 귀찮아서 그냥 '1' 로 해놨다. 코틀린이나 웹을 할 줄 해본 사람들이라면 익숙하겠지만 그렇다. id 넣어주는 거다. 그렇게 생각하면 이 위젯이 굉장히 쉬워질 거라고 확신한다.
그리고 다른 화면 (넘어갈 화면)에서 이미지가 됐든 컨테이너가 됐든 Hero 로 감싸고 tag 를 붙여주면 그 친구를 전화면에서 현화면으로 따라온다고 보면 된다. 당연하겠지만 tag 는 일치해야 한다. 원래는 이것만 하면 애니메이션이 적용이 되어 알아서 따라가지는 느낌이 들었는데 지금은 삭제되어서 직접 삽입을 해줘야 한다. 애니메이션을 넣기 전에는 "이게 되는 건가?" 싶을 테지만 넣고 나면 확실하게 Hero 의 동작을 알 수 있을 것이다. 나는 PageRouteBuilder 과 FadeTransition 를 사용해 간단히 만들었다.
Navigator.of(context).push(PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) {
return FadeTransition(opacity: animation, child: PhotoDetailPage(),);
이렇게 하면 전화면에서 현재 화면으로 넘어갈 때 시각적 연속성을 유저한테 줄 수 있다.
Hero class 에 대해서 알아보았다. 솔직히 기본 애니메이션이 삭제된 것은 많이 아쉬운 일인 것 같다. 어째서 플러터 개발자형님들은 Hero 에다가 애니메이션 속성을 추가해 주는 하위 속성을 만들지 않았던 걸까... 암튼 도움이 되었길 바라며 마치겠다.
