[flutter] 플러터와 리버포드를 사용한 앱의 애니메이션 처리 방법

21 Dec 2023

flutter

플러터(Flutter)는 구글이 개발한 UI 툴킷으로, 다양한 디자인과 애니메이션을 쉽게 구현할 수 있는 기능을 제공합니다. 리버포드(Rive)는 벡터 기반의 디자인 및 애니메이션 도구로, 플러터 앱에서 화려한 애니메이션을 만들 수 있습니다.

애니메이션의 기초

애니메이션은 UI를 더욱 흥미롭게 만들어주는 핵심 요소입니다. 플러터에서는 AnimatedContainer, AnimatedOpacity, AnimatedPosition, AnimatedPadding 등과 같은 위젯을 사용하여 간단한 애니메이션을 제어할 수 있습니다.

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _isExpanded ? 200.0 : 100.0,
  height: _isExpanded ? 100.0 : 200.0,
  color: _isExpanded ? Colors.blue : Colors.green,
  child: FlutterLogo(size: 75),
),

리버포드 애니메이션 통합

리버포드의 애니메이션을 플러터 앱에 통합하기 위해 rive_flutter 패키지를 사용할 수 있습니다.

dependencies:
  rive_flutter: ^0.7.4

리버포드 디자이너를 통해 만든 .riv 파일을 assets 폴더에 추가하고 RiveFile.fromAsset(‘assets/sample.riv’) 메서드를 사용하여 로드할 수 있습니다.

RiveFile _riveFile;
Artboard _artboard;

void _loadRiveFile() async {
  final ByteData data = await rootBundle.load('assets/sample.riv');
  final RiveFile file = RiveFile();
  if (file.import(data)) {
    setState(() => _riveFile = file);
  }
}

@override
void initState() {
  super.initState();
  _loadRiveFile();
}

이후 RiveAnimation.network(‘assets/sample.riv’) 와 같은 방식으로 애니메이션을 컨트롤하고 화면에 표시할 수 있습니다.

결론

플러터와 리버포드를 이용하여 앱에 다채로운 애니메이션을 쉽게 구현할 수 있습니다. 애니메이션의 기초를 이해하고, 리버포드 패키지를 활용하여 더욱 다양하고 효과적인 애니메이션을 만들어보세요.

References:

Flutter 애니메이션 가이드: https://flutter.dev/docs/development/ui/animations
Rive 플러그인: https://pub.dev/packages/rive_flutter

위 내용들을 참고하여 플러터와 리버포드를 사용한 앱의 애니메이션 처리 방법에 대해 알아보았습니다. 만약 추가적인 질문이나 도움이 필요하시다면 언제든지 문의해주세요.