Flutter 프로젝트를 진행하기 위해 찾은 정보 모음5 - Animated Splash Screen 구현하기(Timer, initState, AssetImage, AnimatedContainer, AnimatedOpacity)

기존에 만든 앱 내부에 애니메이션이 꽤 여기저기 적용되어 있어서, 이 부분들을 Flutter로 가져올 수 있을지가 의문이었는데

다행히 애니메이션 지원 라이브러리도 꽤 준비되어 있는 모양이었다.

 

우리 앱은 시작부터 출렁거리는 애니메이션 배경으로 시작하고, Fade in out이 자주 등장하기 때문에

이르지만 바로 애니메이션 작업에 필요한 정보들을 서칭하기 시작했다.

아, 먼저 그 전에 Splash 화면 구현에 필요한 내용부터 확인했는데 initState에서 Timer를 사용하면 쉽게 해결할 수 있었다.

자세한 내용은 아래 포스팅을 확인. 이전에 다른 내용으로도 도움 받은 적이 있는 코딩하는 범이님의 블로그이다.

 

https://velog.io/@chb1828/%EC%B2%AB-%EB%A1%9C%EB%94%A9%ED%99%94%EB%A9%B4-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0Splash-%ED%99%94%EB%A9%B4

첫 로딩화면 구현하기(Splash 화면)

 

Splash 화면 구성을 하기 전에, 로컬 이미지 사용을 위해 먼저 Asset 등록을 해야할 필요가 있는데 이와 관련해서는 아래 링크를 확인.

파일을 한 개 한 개 등록하는 방법도 있지만 귀찮기 때문에 폴더 위치를 등록하는 것을 추천한다.

하지만 등록을 해도 코드에서는 풀경로를 입력해야한다. (도대체 왜일까)

 

https://dev-yakuza.posstree.com/ko/flutter/widget/image/

[Flutter] Image 위젯

 

어쨌든 회사 Bi를 띄운 뒤 메인 화면으로 넘어가는 데까지는 별 문제가 없었으나,

아직 Fade in, Fade out 에니메이션 효과가 필요하다.

 

플러터 애니메이션에는 두 종류가 있는데 아래와 같다.

- Implicit Animation (암시적 애니메이션)

- Explicit Animation (명시적 애니메이션)

 

암시적 애니메이션은 굳이 명시하지 않아도 자동으로 애니메이션 처리를 해주는 것이고

명시적 애니메이션은 어떤 식으로 동작할지에 대해서 하나씩 Customizing 해서 처리하는 방식이다.

자세한 내용은 아래 링크를 참조.

 

https://beomseok95.tistory.com/320

Flutter Animation(플러터 애니메이션) - 1 (암시적 애니메이션)

 

이번 Splash 로고에 필요한 작업은 Fade in과 Fade out이 4초 안에 모두 자연스럽게 연결되는 것이다.

애니메이션 repeat 같은 작업은 explicit을 사용해야한다고 하지만,

단 한번의 Fade in out 정도는 암시적 애니메이션으로도 가능하지 않을까 싶어 찾아보았더니 역시 가능했다.

 

먼저 AnimatedContainer 클래스를 통해 Container에 implicit animation을 이용하는 방법을 확인하고 시도해보았지만

https://mobikul.com/implicit-animation-in-flutter/

How can add Implicit Animation In Flutter - Mobikul

어째서인지 Opacity에 대해서 만큼은 animation 적용이 되지 않았다.

이때문에 Opacity Animation 에 대해서만 별도로 검색했더니

 

 

버튼 액션을 통한 Fade in, Fade out 처리에 대한 정보를 공식 사이트에서 확인할 수 있었다.

https://docs.flutter.dev/cookbook/animation/opacity-animation

Fade a widget in and out

Opacity를 통한 Fade in, Fade out 처리는 아무래도 AnimatedContainer 가 아닌 AnimatedOpacity를 통해서만 가능한 모양이었다.

 

 

Container단위에 implicit Animation 적용이 버튼 액션을 통해서 처리가 가능하다면,

우리는 Splash 화면 구현하기를 통해서 Timer 클래스를 활용하는 방법을 이미 확인했기 때문에

같은 프로세스를 버튼이 아닌 Timer로 이동시키기만 하면

자동으로 Fade in, Fade out 처리한 뒤 다음 페이지로 이동하는 일 역시 가능할 것이다.

 

해보니 역시 잘 된다.

Timer 를 움직임 순서대로 2, 6, 8초 duration으로 배치했다.

다음은 로그인 페이지에 들어가는 물이 출렁이는 배경을 만들어야 한다.