[flutter] 플러터 Lottie로 아날로그 시계 앱의 초침 애니메이션 구현하기

05 Dec 2023

flutter

안녕하세요! 이번에는 플러터와 Lottie 라이브러리를 사용하여 아날로그 시계 앱의 초침 애니메이션을 구현하는 방법에 대해 알려드리겠습니다.

Lottie 라이브러리란?

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리로, JSON 형식으로 제작된 애니메이션을 플렛폼 독립적으로 사용할 수 있도록 도와줍니다. Lottie를 통해 디자이너가 After Effects와 같은 프로그램을 사용하여 제작한 애니메이션을 앱에서 손쉽게 사용할 수 있습니다.

플러터로 Lottie 사용하기

Lottie를 플러터 앱에서 사용하기 위해 lottie 패키지를 우선 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  lottie: ^1.0.1

의존성을 추가한 뒤, 패키지를 가져올 수 있습니다:

import 'package:lottie/lottie.dart';

아날로그 시계 초침 애니메이션 구현

아날로그 시계 초침 애니메이션을 구현하기 위해 먼저 Lottie JSON 파일을 준비해야 합니다. 이 예제에서는 clock_animation.json이라는 이름으로 파일을 준비했습니다.

Lottie.asset(
  'assets/clock_animation.json',
  controller: _animationController,
  height: 200,
  width: 200,
),

위의 코드에서 Lottie.asset 위젯을 사용하여 애니메이션을 적용할 수 있습니다. controller 매개변수에는 애니메이션을 제어할 수 있는 컨트롤러를 전달합니다.

여기서는 _animationController를 사용하였는데, AnimationController 객체를 생성하여 애니메이션을 제어할 수 있습니다. 예를 들어, 애니메이션을 시작하고 멈추기 위해 다음과 같이 컨트롤할 수 있습니다:

AnimationController _animationController;

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

void startAnimation() {
  _animationController.forward();
}

void stopAnimation() {
  _animationController.stop();
}

위와 같이 initState에서 _animationController를 초기화하고, 필요에 따라 애니메이션을 시작하거나 멈출 수 있습니다.

이렇게 구현된 애니메이션은 아날로그 시계 앱에 초침으로 사용할 수 있습니다. 앱 디자인에 맞게 시계와 애니메이션을 조합하여 보다 더 흥미로운 앱을 만들어보세요!

이상으로 플러터와 Lottie를 사용하여 아날로그 시계 앱의 초침 애니메이션을 구현하는 방법에 대해 알아보았습니다. 더 자세한 내용은 Lottie 문서를 참고해보시기 바랍니다. 감사합니다!

목차

Lottie 라이브러리란?

플러터로 Lottie 사용하기

아날로그 시계 초침 애니메이션 구현