애니메이션(3) 인트로 화면 만들기
애니메이션(1) 그래프, 색상 변경, 불투명도
애니메이션은 위젯이 처음 위치에서 마지막 위치까지 어떻게 이동할 것인지를 정의하는 것이다. 이러한 동작을 매끄럽게 표현하려면 프레임 단위로 위젯의 위치를 구현해야 하지만 그러려면
shinjoo95.tistory.com
애니메이션(2) 페이지 이동, 회전
애니메이션 애니메이션은 위젯이 처음 위치에서 마지막 위치까지 어떻게 이동할 것인지를 정의하는 것이다. 이러한 동작을 매끄럽게 표현하려면 프레임 단위로 위젯의 위치를 구현해야 하지만
shinjoo95.tistory.com
앞 게시물처럼 Hero를 이용하면 페이지 연결을 자연스럽게 표현할 수 있고, AnimatedBuilder와 Tween을 이용하면 원하는 동작으로 애니메이션을 만들 수 있다. 이러한 내용을 바탕으로 나만의 인트로 화면을 구현하였다.
보통 인트로 화면은 앱을 시작할 때 제작사의 로고나 앱의 정체성을 표시하는 데 사용한다.
- saturnLaoding.dart 파일을 만든 뒤 StatefulWidget을 상속받는 SaturnLoading 클래스를 작성한다.
그 다음 State 클래스를 상속받는 _SaturnLoading 클래스를 만든 후
AnimationController와 Animation 변수를 생성해 initState() 함수에서 초기화한다.
애니매이션 컨트롤러는 3초 동안 현재 화면에서 동작하도록 설정한다.
- _animationController 3초 동안 동작하는 애니메이션 컨트롤러 정의
- _animation 애니메이션 시작점과 끝점 정의
- Stack 위젯은 겹쳐서 구성할 수 있는데 스택 자료구조의 특성상 먼저 넣을수록 뒤에 놓인다. 따라서 원을 먼저 선언하고 이어서 태양, 토성 순서로 배치한다.
- Transform.rotate() 함수에서는 origin에 Offset을 지정하였다. origin은 회전의 기준점을 의미한다. 토성 이미지의 크기가 가로세로 20픽셀이므로 이미지의 중심은 (10,10)이다. 그러나 패딩값을 5로 설정했으므로 (15,15)가 된다. 여기서 가로세로 35픽셀만큼 오프셋한 곳을 기준으로 놓으면 X축 50, Y축 50이 된다. 즉, 토성 이미지는 태양으로부터 35픽셀 떨어져서 회전한다.
- start(), stop() 함수를 만들어서 애니메이션을 시작하고 멈출 수 있게 하였다.
- 앞에서 정의한 애니메이션을 보여줄 인트로 화면을 만들어 보겠다. intro.dart파일을 새로 만든 후 IntroPage클래스에 앱이 시작될 때 앞에서 정의한 애니메이션이 동작하는 인트로 화면이 보이다가 5초 후 메인 화면으로 넘어가는 코드를 작성하였다.
- main.dart 파일의 home 부분을 introPage()로 변경한 후 앱을 빌드한다.
앱을 실행하면 토성이 태양 주위를 도는 애니메이션이 동작하는 인트로 화면이 나오고
5초후에 메인 화면으로 변경되는 것을 확인할 수 있다.