[flutter] 플러터 Lottie 애니메이션 전환 효과 주기

05 Dec 2023

flutter

소개

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리로, JSON 파일로부터 애니메이션을 생성하여 화면에 표시할 수 있습니다. 이번에는 플러터와 Lottie를 결합하여 애니메이션 전환 효과를 적용하는 방법에 대해 알아보겠습니다.

전환 효과 주기

Lottie 파일 가져오기

우선 사용할 Lottie 애니메이션 파일을 가져와야 합니다. 인터넷에서 무료로 제공되는 Lottie 애니메이션 파일을 다운로드하거나 직접 만들 수 있습니다.
애니메이션 컨트롤러 생성

다음으로, Lottie 애니메이션을 제어하기 위해 애니메이션 컨트롤러를 생성해야 합니다. AnimationController 클래스를 사용하여 컨트롤러를 만들 수 있습니다.
```
AnimationController _controller;
```
애니메이션 파일 연결

애니메이션 컨트롤러와 Lottie 파일을 연결해야 합니다. Lottie 파일을 flare_flutter 패키지에서 제공하는 FlareAnimationLayer()를 통해 가져올 수 있습니다.
```
final _animation = FlareAnimationLayer()
  ..animation = LottieComposition()
  ..animation.assignController(_controller);
```
전환 효과 주기

애니메이션 전환 효과를 주기 위해서는 애니메이션 컨트롤러의 값을 조정해야 합니다. 예를 들어, 버튼을 누를 때마다 애니메이션을 시작하거나 멈출 수 있습니다.
```
// 애니메이션 시작
_controller.forward();

// 애니메이션 일시 정지
_controller.stop();

// 애니메이션 되감기
_controller.reverse();
```
이 외에도 애니메이션의 재생 시간, 속도, 반복 등을 조정할 수 있습니다. AnimationController 클래스에서 제공하는 다양한 메서드와 속성을 활용하여 원하는 전환 효과를 주세요.

마무리

플러터와 Lottie를 사용하여 애니메이션 전환 효과를 쉽게 구현할 수 있습니다. 애니메이션 파일을 가져오고, 애니메이션 컨트롤러를 생성하고, 전환 효과를 주는 방법을 알아보았습니다. 이를 응용하여 다양한 애니메이션 효과를 구현해보세요!

참고 자료

Flutter Lottie 패키지: https://pub.dev/packages/flare_flutter