[flutter] 플러터 Lottie로 지도 네비게이션 앱의 경로 탐색 애니메이션 구현하기

05 Dec 2023

flutter

지도 네비게이션 앱을 개발할 때 사용자에게 경로를 시각적으로 보여주는 애니메이션은 매우 중요합니다. 이번에는 플러터와 Lottie를 사용하여 지도 네비게이션 앱에서 경로 탐색 애니메이션을 구현하는 방법을 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리로, JSON 형식으로 저장된 애니메이션 파일을 사용하여 앱 내에서 애니메이션을 표시할 수 있습니다. Lottie는 플렛폼에 구애받지 않고 안드로이드, iOS, 웹 모두에서 사용할 수 있어 매우 유용합니다.

1. Lottie 패키지 추가하기

프로젝트의 pubspec.yaml 파일에 다음과 같이 lottie 패키지를 추가합니다.

dependencies:
  lottie: ^1.0.1

pubspec.yaml 파일을 저장한 후 터미널에서 flutter packages get 명령을 실행하여 패키지를 다운로드 받습니다.

2. 애니메이션 파일 준비하기

Lottie 애니메이션 파일을 준비해야 합니다. Lottie 파일은 온라인 도구나 Adobe After Effects와 같은 프로그램을 사용하여 만들 수 있습니다. Lottie 파일은 JSON 형식으로 저장되며, .json 확장자를 가집니다.

3. 애니메이션 파일 추가 및 설정하기

프로젝트에 애니메이션 파일을 추가하고 설정해보겠습니다.

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

class RouteAnimationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Lottie.asset(
          'assets/animations/route_animation.json',
          height: 200,
          width: 200,
        ),
      ),
    );
  }
}

애니메이션 파일을 프로젝트에 추가한 경우, assets 폴더 안에 animations 폴더를 생성하고 애니메이션 파일을 저장하세요. 위의 코드에서는 route_animation.json 파일을 사용하고 있습니다. 필요에 따라 파일의 경로나 크기를 조정할 수 있습니다.

4. 경로 탐색 애니메이션 추가하기

이제 경로 탐색 애니메이션을 구현해보겠습니다.

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

class RouteAnimationScreen extends StatefulWidget {
  @override
  _RouteAnimationScreenState createState() => _RouteAnimationScreenState();
}

class _RouteAnimationScreenState extends State<RouteAnimationScreen> with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animationController.repeat();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Lottie.asset(
          'assets/animations/route_animation.json',
          height: 200,
          width: 200,
          controller: _animationController,
        ),
      ),
    );
  }
}

위의 코드에서는 AnimationController를 사용하여 애니메이션을 제어하고 있습니다. initState에서 AnimationController를 초기화하고 dispose에서 정리합니다. build 메서드에서는 controller 속성을 사용하여 애니메이션을 제어합니다. 위의 코드에서는 애니메이션이 무한 반복하도록 설정되어 있습니다.

5. 경로 탐색 애니메이션 화면에 표시하기

이제 애니메이션을 화면에 표시해보겠습니다. 예를 들어 MapScreen 위젯에서 경로 탐색 애니메이션을 표시하려면 다음과 같이 코드를 작성할 수 있습니다.

import 'package:flutter/material.dart';

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 지도 UI 관련 코드
          
          SizedBox(height: 16),
          
          RouteAnimationScreen(), // 경로 탐색 애니메이션 표시
        ],
      ),
    );
  }
}

위의 코드에서는 Column 위젯 안에 RouteAnimationScreen을 추가하여 경로 탐색 애니메이션을 표시하고 있습니다. 경로 탐색 애니메이션을 원하는 위치에 추가하고 UI와 조화롭게 배치할 수 있습니다.

이제 플러터와 Lottie를 사용하여 지도 네비게이션 앱의 경로 탐색 애니메이션을 구현하는 방법을 알아봤습니다. Lottie를 사용하면 앱에 다양한 애니메이션을 추가할 수 있으니 참고해보시기 바랍니다.

참고 자료