[Flutter] 플러터 Lottie

오늘은 로띠에 사용 방법에 대해 알아보았습니다.

● 로띠란

→ 에어비엔비에서 개발한 라이브러리로, 벡터 기반 애니메이션입니다.

벡터의 저용량에 해상도 이슈도 안생기는 특징을 그대로 갖고 있으며, JSON형태로 저장하여 사용합니다.

사용하는 로띠의 경우 흔히들 말하는 움짤과 같은 짧고 반복하는 이미지를 보실 수 있습니다.

 

● 로띠 사용 방법

1.로띠 사이트에서(https://lottiefiles.com/) 다운받기 혹은 JSON링크 연결 합니다

2.로띠 파일 저장 후 패키지 설치

→ 통상의 이미지와 동일하게 assets폴더 내에 로띠파일을 넣고 pubspec.yaml - assets부분에 - assets/  추가해주시고 pubspec.yaml - dependencies에 lottie: ^2.7.0 을 넣어주시면 됩니다, 현재 최신버전이 2.7.0이고 prerelease버전은 3.0.0으로 오류가 있을 수 있기에 최신버전을 추천합니다.

버전 확인은 https://pub.dev/packages/lottie/install에서 확인이 가능합니다.

3. 로띠사용

→ 로띠의 경우 스플래시화면(앱 구동할 때 보여주는 시작 화면) 혹은 이미지 대신 움짤이 들어가는 경우 사용하게 되며,

스플래시화면에 사용할 경우 StatefulWidget으로 사용해주시면 사용하기 편합니다.

라이프사이클의 경우 https://sangd.tistory.com/5 해당 링크를 참고하여 주시고,

스플래시화면은 아래와 같이 사용해주면 됩니다.

@override
void initState(){
  super.initState();

  new Future.delayed(
    // Duration은 스플래시 지속시간
    const Duration(seconds: 1),
          () => Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: BuildContext context) => MyApp()), (route) => false)
  );
}

참조 : https://blog.naver.com/PostView.nhn?blogId=kbomin98&logNo=222299244975

 

로띠는 AnimationController에 넣어 사용하며

이벤트 없이 바로 재생시키려면 _animationcontroller.forward(); 함수를

이미지를 반복을 시키기 위해서는 _animationcontroller.repeat(); 함수를 사용해주시면 됩니다.

 

추가로 repeat에는 min, max, period, reverse 옵션이 있으며

min은 어느 구간부터 시작할지를 의미하며, 소숫점 값을 넣으면 해당 값의 백분율만큼의 시간에서 실행됩니다.

max는 반대로 어느 구간에서 끝날지를 의미하며,

period는 재생시간을 설정할 때 사용됩니다.

ex)_animationcontroller.duration * (max시간 - min시간)

reverse는 true일 경우 반대로도 반복시키며, 기본값을 false이기에 필요할때만 킵니다.

참조 :  https://jutole.tistory.com/94

[Flutter] 애니메이션 처리를 위한 lottie 패키지 설명서

 

저는 이정도만 사용하게될듯하여 여기서 마무리를 지으며, 추후에 추가적으로 더 사용하게되거나, 필요하게된다면 기술하도록 하겠습니다.

이번 글부터는 적는 방식을 조금 바꾸어봤는데 어떻게 보셨을지요

다음 글도 비슷한 느낌으로 정리해보겠습니다.