Flutter는 매력적이고 복잡한 애니메이션을 구현할 수 있는 강력한 도구를 제공합니다. 그중 하나가 바로 Rive입니다. Rive는 벡터 그래픽 애니메이션을 손쉽게 제작하고 Flutter 애플리케이션에 통합할 수 있는 웹 기반 도구입니다. 이번 글에서는 Flutter에서 Rive 애니메이션을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.
1. Rive 애니메이션 준비하기
먼저, Rive에서 애니메이션 파일을 생성해야 합니다. Rive는 웹 기반 툴로, 벡터 애니메이션을 만들고 이를 .riv 파일 형식으로 내보낼 수 있습니다. Rive 애니메이션 파일을 준비한 후, Flutter 프로젝트에 추가합니다.
2. Rive 패키지 설치
rive 패키지를 사용하여 Flutter 프로젝트에 Rive 애니메이션을 통합할 수 있습니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.
dependencies:
flutter:
sdk: flutter
rive: ^0.7.22
그리고 pub get 명령어를 실행하여 패키지를 설치합니다.
3. Rive 애니메이션 파일 추가
Rive 애니메이션 파일을 Flutter 프로젝트의 assets 폴더에 추가하고, pubspec.yaml 파일에 해당 파일을 등록합니다.
flutter:
assets:
- assets/animation.riv
4. Rive 애니메이션 표시
이제 rive 패키지를 사용하여 Rive 애니메이션을 표시할 수 있습니다. 다음은 Rive 애니메이션을 화면에 표시하는 간단한 예제입니다.
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: RiveAnimationExample(),
);
}
}
class RiveAnimationExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Rive Animation Example')),
body: Center(
child: RiveAnimation.asset(
'assets/animation.riv',
),
),
);
}
}
위 코드는 RiveAnimation.asset 위젯을 사용하여 Rive 애니메이션을 화면에 표시하는 예제입니다.
5. 애니메이션 상태 제어
Rive 애니메이션은 다양한 상태를 가질 수 있으며, 상태에 따라 다른 애니메이션을 실행할 수 있습니다. 다음은 버튼을 눌러 애니메이션 상태를 변경하는 예제입니다.
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: RiveAnimationControlExample(),
);
}
}
class RiveAnimationControlExample extends StatefulWidget {
@override
_RiveAnimationControlExampleState createState() => _RiveAnimationControlExampleState();
}
class _RiveAnimationControlExampleState extends State<RiveAnimationControlExample> {
Artboard? _artboard;
StateMachineController? _controller;
SMIInput<bool>? _isPlaying;
@override
void initState() {
super.initState();
rootBundle.load('assets/animation.riv').then(
(data) async {
final file = RiveFile.import(data);
final artboard = file.mainArtboard;
final controller = StateMachineController.fromArtboard(artboard, 'State Machine 1');
if (controller != null) {
artboard.addController(controller);
_isPlaying = controller.findInput<bool>('isPlaying');
}
setState(() => _artboard = artboard);
},
);
}
void _togglePlay() {
setState(() => _isPlaying?.value = !_isPlaying!.value);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Rive Animation Control Example')),
body: Center(
child: _artboard == null
? const SizedBox()
: Rive(
artboard: _artboard!,
),
),
floatingActionButton: FloatingActionButton(
onPressed: _togglePlay,
child: Icon(Icons.play_arrow),
),
);
}
}
위 코드는 버튼을 사용하여 Rive 애니메이션 상태를 제어하는 예제입니다. StateMachineController를 사용하여 애니메이션 상태를 제어하고, 버튼을 클릭할 때마다 애니메이션 상태가 변경됩니다.
6. 애니메이션 상호작용
Rive 애니메이션은 사용자 상호작용에 반응하도록 설정할 수 있습니다. 다음은 사용자가 화면을 탭할 때 애니메이션이 변경되는 예제입니다.
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: RiveAnimationInteractionExample(),
);
}
}
class RiveAnimationInteractionExample extends StatefulWidget {
@override
_RiveAnimationInteractionExampleState createState() => _RiveAnimationInteractionExampleState();
}
class _RiveAnimationInteractionExampleState extends State<RiveAnimationInteractionExample> {
Artboard? _artboard;
StateMachineController? _controller;
SMIInput<bool>? _isTapped;
@override
void initState() {
super.initState();
rootBundle.load('assets/animation.riv').then(
(data) async {
final file = RiveFile.import(data);
final artboard = file.mainArtboard;
final controller = StateMachineController.fromArtboard(artboard, 'State Machine 1');
if (controller != null) {
artboard.addController(controller);
_isTapped = controller.findInput<bool>('isTapped');
}
setState(() => _artboard = artboard);
},
);
}
void _onTap() {
setState(() => _isTapped?.value = !_isTapped!.value);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Rive Animation Interaction Example')),
body: Center(
child: GestureDetector(
onTap: _onTap,
child: _artboard == null
? const SizedBox()
: Rive(
artboard: _artboard!,
),
),
),
);
}
}
위 코드는 화면을 탭할 때마다 Rive 애니메이션이 변경되는 예제입니다. GestureDetector를 사용하여 탭 이벤트를 감지하고 애니메이션을 전환합니다.
결론
Flutter에서 Rive 애니메이션을 사용하면 복잡한 벡터 애니메이션을 쉽게 구현할 수 있습니다. rive 패키지를 사용하여 애니메이션을 통합하고, 다양한 상태 제어 및 상호작용 기능을 통해 애니메이션을 더욱 풍부하게 만들 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 매력적이고 생동감 있는 애니메이션을 구현해보세요. Rive 애니메이션을 통해 사용자 경험을 크게 향상시킬 수 있습니다.
'Flutter' 카테고리의 다른 글
Flutter의 온보딩 화면(Onboarding Screen) 만들기 (1) | 2024.10.16 |
---|---|
Flutter의 캐러셀(Carousel) 위젯 사용법 (0) | 2024.10.15 |
Flutter의 Flare 애니메이션 사용법 (1) | 2024.10.14 |
Flutter의 애니메이션 라이브러리(Animations Library) 사용법 (1) | 2024.10.14 |
Flutter의 페이지 전환 애니메이션(Page Transition Animation) 사용법 (0) | 2024.10.13 |