Flutter의 Rive 애니메이션 사용법

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 애니메이션을 통해 사용자 경험을 크게 향상시킬 수 있습니다.