[Flutter] After Effects로 작업한 애니메이션을 flutter에 적용하는 방법 (Lottie)

 

캐릭터 디자이너와 프로젝트를 하면서
움직이는 애니메이션 캐릭터를 어플리케이션에 적용해야했다.
Rive를 사용하려 했지만 Rive는 아직 베타버전이기 때문에 다른 방안을 찾다 Lottie 프로그램을 알게 되었다.

Lottie는 애니메이션 모션을 gif로 저장할 필요 없이 코드로 적용할 수 있는 오픈소스 라이브러리이다. 

Android와 iOS, 웹에서 Adobe After Effects에서 작업한 애니메이션을 Bodymovin이라는 플러그인을 사용하여  json 파일로 생성해준다.

코드를 바로 적용하기 때문에 해상도 걱정은 안해도 된다는 장점이 있다고 한다!

 

Lottie를 위해 Flutter에서 사용할 수 있는 패키지가 있어 사용해보았다.

 

 

 

1-1) After Effects에서 중간 플러그인인 Bodymovin을 이용해 JSON 파일을 생성하는 법

 

medium.com/@congjang/f-%EB%B2%88%EC%99%B8%ED%8E%B8-lottie%EB%A1%9C-animation-%EB%A7%8C%EB%93%A4%EA%B8%B0-93135f18e450

Lottie Animation 만들기(1)

1-2) After Effects에서 Bodymovin 오픈소스를 이용해 만든 Lottiefiles 플러그인으로 JSON 파일을 생성하는 법

 

medium.com/@congjang/lottiefiles-plugin-%EC%9C%BC%EB%A1%9C-lottie-animation-%EB%82%B4%EB%B3%B4%EB%82%B4%EA%B8%B0-437a623d0cb3

Lottie Animation 만들기(2)

 

 

2) lottie package 추가 

 

lottie: ^0.6.0

 

import 'package:lottie/lottie.dart';

 

 

3) 코드상에서의 추가 - 이미지 추가하는 방법과 동일하다.

 

- 변환한 lottie json 파일을 asset 파일에 넣고 Lottie.asset()를 통해 불러온다.

Lottie.asset(
    'assets/lottie_file.json',
  repeat: false,
  reverse: false,
  animate: false,
),

- Lottie.network()는 JSON Animation 파일의 URL을 보여준다.

Lottie.network(
    'https://assets8.lottiefiles.com/packages/lf20_HX0isy.json',
    repeat:  false,
    reverse: false,
    animate: false,
),

 

 

4) Flutter web 빌드

 

flutter에서는 UI를 생성할 때 고유한  C++ 그래픽 라이브러리 SKIA를 사용하는데

flutter web에서는 이게 바로 지원이 안되는지 빌드할 때 FLUTTER_WEB_USE_SKIA 값을

true로 지정해줘야한다고 한다.

 

flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --web-port 5000

 

 

---

Lottie 관련 참고 사이트 

 

> Lottie에서 지원되는 After Effects의 디자인 항목

lottiefiles.zendesk.com/hc/en-us/articles/900000997203-When-I-render-my-animation-in-the-plugin-it-doesn-t-look-like-how-I-ve-designed-it-in-After-Effects

 

 

> Lottie - flutter package

pub.dev/packages/lottie

lottie | Flutter Package

 

> lottiefiles 공식 사이트 

lottiefiles.com/

Free Lottie Animation Files, Tools & Plugins - LottieFiles