[flutter] 크로스페이드 애니메이션 구현하기
크로스페이드 애니메이션은 두 가지 이미지나 콘텐츠를 서서히 서로를 대체하면서 화면에 표시하는 기술입니다. 플러터에서도 AnimatedCrossFade 위젯을 사용하여 간단하게 이 기능을 구현할 수 있습니다.
AnimatedCrossFade 위젯 소개
AnimatedCrossFade 위젯은 상태에 따라 두 개의 자식 위젯을 서서히 교체하는 방식으로 애니메이션을 구현합니다. 이 위젯은 부모 위젯의 상태 변화에 반응하여 자식 위젯 간의 크로스페이드 효과를 제공합니다.
사용 예시
아래는 두 개의 이미지가 서서히 교체되는 예시 코드입니다.
bool _showFirst = true;
AnimatedCrossFade(
duration: Duration(seconds: 1),
firstChild: Image.asset('assets/first_image.png'),
secondChild: Image.asset('assets/second_image.png'),
crossFadeState: _showFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
layoutBuilder: (Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey) {
return Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
key: bottomChildKey,
left: 0.0,
top: 0.0,
child: bottomChild,
),
Positioned(
key: topChildKey,
left: 0.0,
top: 0.0,
child: topChild,
),
],
);
},
);
AnimatedCrossFade 위젯은 firstChild와 secondChild로 각각 첫 번째 이미지와 두 번째 이미지를 설정할 수 있습니다. crossFadeState를 통해 현재 표시할 이미지를 선택하고, duration으로 애니메이션의 지속 시간을 설정할 수 있습니다.
결론
AnimatedCrossFade 위젯을 활용하면 플러터 앱에서 간단하게 크로스페이드 애니메이션을 구현할 수 있습니다. 두 가지 콘텐츠 간의 자연스러운 전환 효과를 표현하고 싶을 때 유용하게 활용할 수 있습니다.