플러터(Flutter)는 UI를 빌드하고 애니메이션을 구현하는 데 사용되는 크로스 플랫폼 프레임워크입니다. 이번 튜토리얼에서는 Lottie를 사용하여 체력 및 에너지바 애니메이션을 구현하는 방법을 알아보겠습니다.

1. Lottie 소개

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리로, JSON 형식의 파일로 애니메이션을 구성할 수 있습니다. 이 라이브러리는 After Effects와 같은 디자인 도구에서 만든 애니메이션을 앱으로 가져올 수 있는 기능을 제공합니다.

2. Flutter 프로젝트 설정

먼저, Flutter 프로젝트를 설정합니다. 새로운 터미널 창을 열고 다음 명령어를 실행합니다:

flutter create energy_bar_animation
cd energy_bar_animation

3. Lottie 패키지 추가

pubspec.yaml 파일을 열고, dependencies 섹션에 다음 코드를 추가합니다:

dependencies:
  flutter_lottie: ^1.0.1

변경 사항을 적용하기 위해 터미널에서 다음 명령어를 실행합니다:

flutter pub get

4. Lottie 애니메이션 파일 가져오기

애니메이션을 표시할 Lottie 애니메이션 파일을 가져옵니다. 먼저, LottieFiles 또는 LottieFiles Github Repository에서 원하는 애니메이션 파일을 찾습니다. 예제에서는 “energy-bar.json” 파일을 사용합니다.

다운로드한 애니메이션 파일을 Flutter 프로젝트의 assets 폴더에 복사합니다.

5. 코드 구현

main.dart 파일을 열고 다음 코드를 추가합니다:

import 'package:flutter/material.dart';
import 'package:flutter_lottie/flutter_lottie.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Energy Bar Animation',
      home: EnergyBarAnimation(),
    );
  }
}

class EnergyBarAnimation extends StatefulWidget {
  @override
  _EnergyBarAnimationState createState() => _EnergyBarAnimationState();
}

class _EnergyBarAnimationState extends State<EnergyBarAnimation> {
  final String animationPath = 'assets/energy-bar.json';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Energy Bar Animation'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Lottie.asset(
          animationPath,
          repeat: true,
          reverse: true,
          animate: true,
          height: 200,
          width: 200,
        ),
      ),
    );
  }
}

위 코드에서는 flutter_lottie 패키지를 임포트하고, EnergyBarAnimation 위젯을 생성하여 애니메이션을 표시합니다. Lottie.asset 위젯을 사용하여 애니메이션 파일을 로드하고 설정합니다. 위젯의 height, width, repeat, reverse, animate 등의 속성을 변경하여 원하는 애니메이션 효과를 설정할 수 있습니다.

6. 애니메이션 실행

터미널에서 다음 명령어를 실행하여 앱을 실행합니다:

flutter run

앱이 성공적으로 실행되면, 화면에 체력이나 에너지를 나타내는 애니메이션 바가 표시될 것입니다. 애니메이션의 속도, 크기 또는 반복 횟수를 변경하려면 EnergBarAnimation 클래스의 Lottie.asset 위젯에 있는 속성들을 수정하면 됩니다.

이제 플러터와 Lottie를 사용하여 체력 및 에너지바 애니메이션을 구현하는 방법을 알게 되었습니다. Lottie를 통해 멋진 애니메이션 효과를 쉽게 구현할 수 있으며, Flutter의 강력한 UI 개발 기능을 사용하여 사용자에게 동적이고 시각적으로 매력적인 경험을 제공할 수 있습니다.

참고 자료:

• Flutter
• LottieFiles
• LottieFiles Github Repository
• flutter_lottie 패키지