Flutter의 Flare 애니메이션 사용법

Flutter는 다양한 애니메이션 기법을 지원하며, 그중 Flare는 벡터 그래픽 애니메이션을 쉽게 구현할 수 있는 강력한 도구입니다. Flare는 Rive에서 제공하는 도구로, 복잡한 애니메이션을 손쉽게 제작하고 Flutter 애플리케이션에 통합할 수 있게 해줍니다. 이번 글에서는 Flutter에서 Flare 애니메이션을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Flare 애니메이션 준비하기

먼저, Flare 애니메이션을 사용하려면 Rive에서 애니메이션 파일을 생성해야 합니다. Rive는 웹 기반 툴로, 벡터 애니메이션을 만들고 이를 .flr 파일 형식으로 내보낼 수 있습니다. Flare 애니메이션 파일을 준비한 후, Flutter 프로젝트에 추가합니다.

2. Flare 패키지 설치

flare_flutter 패키지를 사용하여 Flutter 프로젝트에 Flare 애니메이션을 통합할 수 있습니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flare_flutter: ^3.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Flare 애니메이션 파일 추가

Flare 애니메이션 파일을 Flutter 프로젝트의 assets 폴더에 추가하고, pubspec.yaml 파일에 해당 파일을 등록합니다.

flutter:
  assets:
    - assets/flare_animation.flr

 

4. Flare 애니메이션 표시

이제 flare_flutter 패키지를 사용하여 Flare 애니메이션을 표시할 수 있습니다. 다음은 Flare 애니메이션을 화면에 표시하는 간단한 예제입니다.

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlareAnimationExample(),
    );
  }
}

class FlareAnimationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flare Animation Example')),
      body: Center(
        child: FlareActor(
          'assets/flare_animation.flr',
          animation: 'idle',
        ),
      ),
    );
  }
}

 

위 코드는 FlareActor 위젯을 사용하여 Flare 애니메이션을 화면에 표시하는 예제입니다. animation 속성에는 실행할 애니메이션의 이름을 지정합니다.

 

 

반응형

 

 

5. 애니메이션 상태 제어

Flare 애니메이션은 다양한 상태를 가질 수 있으며, 상태에 따라 다른 애니메이션을 실행할 수 있습니다. 다음은 버튼을 눌러 애니메이션 상태를 변경하는 예제입니다.

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlareAnimationControlExample(),
    );
  }
}

class FlareAnimationControlExample extends StatefulWidget {
  @override
  _FlareAnimationControlExampleState createState() => _FlareAnimationControlExampleState();
}

class _FlareAnimationControlExampleState extends State<FlareAnimationControlExample> {
  String _animationName = 'idle';

  void _setAnimation(String animationName) {
    setState(() {
      _animationName = animationName;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flare Animation Control Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlareActor(
              'assets/flare_animation.flr',
              animation: _animationName,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _setAnimation('play'),
              child: Text('Play Animation'),
            ),
            ElevatedButton(
              onPressed: () => _setAnimation('idle'),
              child: Text('Idle Animation'),
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 두 개의 버튼을 사용하여 Flare 애니메이션 상태를 제어하는 예제입니다. 버튼을 클릭하면 해당 애니메이션이 실행됩니다.

 

 

728x90

 

6. 애니메이션 상호작용

Flare 애니메이션은 사용자 상호작용에 반응하도록 설정할 수 있습니다. 다음은 사용자가 화면을 탭할 때 애니메이션이 변경되는 예제입니다.

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlareAnimationInteractionExample(),
    );
  }
}

class FlareAnimationInteractionExample extends StatefulWidget {
  @override
  _FlareAnimationInteractionExampleState createState() => _FlareAnimationInteractionExampleState();
}

class _FlareAnimationInteractionExampleState extends State<FlareAnimationInteractionExample> {
  String _animationName = 'idle';

  void _onTap() {
    setState(() {
      _animationName = _animationName == 'idle' ? 'play' : 'idle';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flare Animation Interaction Example')),
      body: Center(
        child: GestureDetector(
          onTap: _onTap,
          child: FlareActor(
            'assets/flare_animation.flr',
            animation: _animationName,
          ),
        ),
      ),
    );
  }
}

 

 

위 코드는 화면을 탭할 때마다 Flare 애니메이션이 변경되는 예제입니다. GestureDetector를 사용하여 탭 이벤트를 감지하고 애니메이션을 전환합니다.

결론

Flutter에서 Flare 애니메이션을 사용하면 복잡한 벡터 애니메이션을 쉽게 구현할 수 있습니다. flare_flutter 패키지를 사용하여 애니메이션을 통합하고, 다양한 상태 제어 및 상호작용 기능을 통해 애니메이션을 더욱 풍부하게 만들 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 매력적이고 생동감 있는 애니메이션을 구현해보세요. Flare 애니메이션을 통해 사용자 경험을 크게 향상시킬 수 있습니다.