[flutter] 플러터 Lottie로 워크아웃 앱의 운동 동작 애니메이션 표시하기

05 Dec 2023

flutter

운동 동작 애니메이션은 모바일 앱에서 사용자에게 시각적인 피드백을 제공하는 데 중요한 요소입니다. 플러터에서는 Lottie 라이브러리를 사용하여 운동 동작 애니메이션을 쉽게 표시할 수 있습니다. Lottie는 JSON 형식의 애니메이션 파일을 지원하며, After Effects를 사용하여 애니메이션을 디자인할 수 있습니다.

Lottie 라이브러리 설치하기

먼저, Lottie 라이브러리를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고, dependencies 섹션에 아래의 코드를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.1.0

이후, 터미널에서 다음 명령어를 실행하여 Lottie 라이브러리를 설치합니다:

flutter packages get

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

Lottie 애니메이션 파일은 이미지, 텍스트, 그리고 애니메이션의 다양한 요소들을 포함하는 JSON 파일입니다. 이 파일은 After Effects 등의 디자인 도구에서 생성할 수 있습니다. Lottie 애니메이션 파일을 얻은 후, 프로젝트의 assets 디렉토리에 저장합니다.

Lottie 애니메이션 표시하기

Lottie 애니메이션을 표시하기 위해 먼저 해당 JSON 파일을 가져와야 합니다. 우리는 flutter/services.dart 패키지의 rootBundle을 사용하여 애니메이션 파일을 로드할 것입니다. 애니메이션 파일을 복사하여 pubspec.yaml 파일에서 정의한 assets 경로로 이동시켜야 합니다.

다음은 Lottie 애니메이션 파일을 로드하는 예시 코드입니다:

import 'package:flutter/services.dart' show rootBundle;
import 'package:lottie/lottie.dart';

class WorkoutAnimationWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: rootBundle.load('assets/workout_animation.json'),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Lottie.asset(
            'assets/workout_animation.json',
            package: 'workout_app',
          );
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

위의 코드에서 FutureBuilder를 사용하여 애니메이션 파일이 로드될 때까지 로딩 화면을 표시합니다. Lottie.asset() 위젯을 사용하여 애니메이션을 화면에 표시합니다. package 매개변수를 사용하여 프로젝트의 패키지 이름을 지정할 수 있습니다.

결론

플러터에서 Lottie 라이브러리를 사용하여 운동 동작 애니메이션을 표시하는 방법에 대해 알아보았습니다. Lottie를 사용하면 앱에서 다양한 종류의 애니메이션을 쉽게 표시할 수 있으며, 사용자에게 보다 풍부한 경험을 제공할 수 있습니다. 참고 자료를 통해 더 많은 정보를 얻어보세요.