AnimatedOpacity class

주어진 불투명도가 변경될 때마다 지정된 기간 동안 자식의 불투명도를 자동으로 전환하는 불투명도의 애니메이션 버전입니다.

불투명도를 애니메이션으로 구현하는 작업은 자식을 중간 버퍼에 그려야 하기 때문에 상대적으로 비용이 많이 듭니다.

공식 문서 코드

앱을 시작했을 때 앱을 제작한 회사라든지 뭐 로고 같은 것이 나오는 화면, 스플래쉬 화면을 본 적이 있을 것이다. 그런 화면에서 주로 로고들은 처음엔 보이지 않았다가 서서히 보이게 된다. 그니까 처음엔 투명도가 0이어서 완전 투명이었다가 나중엔 1이 되면서 그냥 불투명이 되어버리면서 그렇게 보이게 된다는 것이다.

이러한 동작을 아주 간단하게 실행시켜주는 위젯이 있는데 바로 AnimatedOpacity 이다.

이 위젯은 자식 위젯의 투명도(opacity)를 애니메이션 효과로 자연스럽게 변경할 때 사용된다. 쉽게 말해 위젯을 서서히 나타나게 하거나 서서히 사라지게 할 수 있다는 것이다. 스플래쉬 화면을 예제로 한번 알아보자.

하위 속성

속성명	타입	기본값	설명
child	Widget?	–	투명도 애니메이션을 적용할 자식 위젯
opacity	double	–	목표 투명도 값으로 0.0은 완전히 투명, 1.0은 완전히 불투명
curve	Curve	Curves.linear	애니메이션이 진행되는 속도 곡선
duration	Duration	–	투명도 변경 애니메이션에 걸리는 시간
onEnd	VoidCallback?	–	애니메이션이 완료된 후 호출되는 콜백 함수
alwaysIncludeSemantics	bool	false	투명도에 관계없이 자식 위젯의 시멘틱 정보를 항상 포함할지 여부

일단은 바로 이 위젯을 사용해 주기 전에 opacity 값을 제어해 줄 변수를 하나 만들고 가야 한다.

bool isOpacity = false;

위의 하위 속성표에 나와 있는 것을 보면 타입이 bool 인데 이 이유는 이 값을 false 로 변경해 주는 메서드를 만들고 AnimatedOpacity 안에서는 삼항연산자로 이용할 것이기 때문이다.

암튼 이렇게 투명도를 제어해 줄 변수를 하나 만들었다면 거의 반은 왔다.

@override
void initState() {
  super.initState(); // 화면이 렌더링 되는 시점에 호출
  WidgetsBinding.instance.addPostFrameCallback((timeStamp) async { // 오류 방지
    await Future.delayed(Duration(milliseconds: 1500)); // 비동기로 실행하여 딜레이 효과
    setState(() {
      isOpacity = true;
    });
  },);
}

그다음엔 화면이 사용자에게 나타내게 되면 1500 밀리초를 기다린 후에 isOpacity 를 true 로 바꿔주게 만들었다.

이제 진짜 다 왔다. 지금 opacity 값을 제어할 변수와 그 값을 변경해 줄 메서드, 이제 AnimatedOpacity 위젯만 사용해 주면 된다.

AnimatedOpacity(
  opacity: isOpacity ? 1 : 0, // true 라면 불투명 false 라면 투명
  duration: Duration(seconds: 2), // 2 초 동안 실행!
),

간단하다. opacity 에 만들어둔 값을 넣어주고 삼항 연사자를 사용하여 투명도를 조절해 주면 된다.

이렇게 만들어준다면 화면이 빌드되었을 때 iniState() 가 실행되면서 1500 밀리초 후 isOpacity 값이 바뀌게 된다. 여기서 이 isOpacity 값을 갖고 있던 AnimatedOpacty 내의 opacity: isOpacity 의 값이 false => ture 가 되면서 처음에 0, 투명이었던 상태가 2초에 걸쳐 불투명하게 바뀌게 되는 것이다.

이제 여기에 child 로 자식을 넣어주게 되면..

child: FlutterLogo(size: 100),

플러터 로고가 서서히 나타나는 화면이 완성되게 된다.

이렇게 간단하게 AnimatedOpacity 위젯을 사용하여 스플래쉬 화면을 만들어 보았다. 정말 정말 간단한 사용법 덕분에 많이 사용하는 위젯인데 특히 초보자들이 애니메이션 위젯을 배울 때 가장 먼저 배우면 좋을 위젯이라고 생각한다. 도움이 되었길 바라며 마치겠다.