1. 앱에 어울리는 애니메이션 구현하기 <Lottie편>

버튼을 클릭하고 해당 버튼이 동작함으로써 나 동작하고 있다 ! 라고 유저한테 알려줄 수 있는 방법이 무엇일까 고민해보니 애니메이션! 이 있었습니다. 이 경우 뿐만이 아니라 앱 내에서 애니메이션을 잘 사용하면 사용자 경험을 좋게 만들어 줄 수 있죠~ 

애니메이션을 가장 쉽게 구현할 수 있는 방법 중 하나는 Lottie를 이용하는 것인데요. 한 번 천천히 알아보도록 합시다 

 

제가 Lottie로 구현한 화면은 이렇습니다

 

로띠에는 굉장히 다양한 애니메이션이 있습니다. (+무료로 사용 가능하죠)

https://lottiefiles.com/kr/

무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi

여기서 적절한 애니메이션을 가져옵니다 

 

적절한 애니메이션을 골랐나요? 정확히 마음에 드는 애니메이션을 골랐을 수도 있으셨겠지만, 어딘가 아쉬운 애니메이션을 고르신 분들도 계실거라 생각합니다.

 

로띠는 이를위해 기존에 구현된 애니메이션 색들을 커스텀 할 수도 있답니다.
예를들면 애니메이션의 색이 본인의 앱의 포인트 컬러와 다른 경우가 있죠. 저 같은 경우엔 기존에 회색이었던 애니메이션이 제가 구성한 화면과 잘 어울리지 않는다고 생각했어요. 그리고 애니메이션 스피드가 너무 빨라서 유저의 피로도만 높인단 생각이 들었죠

 

밋밋해. 빨라!

수정해주기 위해 에딧 -> Open in Lottie Editor에 가줍니다. 왼쪽에서 세번째 아이콘이에요

해당 창에서 Lottie의 Color 와 Duration을 변경할 수 있습니다

 

흠 이제 좀 마음에 듭니다.

자 저는 마음에 들게 로띠를 좀 커스텀 했습니다. 완성하시고 여기서 gif로 저장하시면 안됩니다 

로띠는 JSON 파일로 다운로드 받으면 되는데, 덕분에 비교적 가벼운 용량으로 asset에 집어넣을 수 있다는 장점이 있습니다 

 

사용 방법은 아주 간단해요. 어느 라이브러리와 같이 로띠를 pubspec.yaml에 등록한 뒤

Lottie.asset(
  'assets/lottie/listening.json',
  width: double.infinity,
  fit: BoxFit.cover,
)

 

짜쟌!

로띠가 있는 위치를 가져오고 크기를 정해주기만 하면 된답니다 ! 

 

Lottie.asset()안에는 굉장히 많은 파라미터들이 있으니, 잘 이용하시기 위해서는 커맨드를 눌러 넘어가셔서 읽어보시는걸 추천드립니다.  생각하는 비율로 안나올 수도 있으니 다들 fit 사용에 유의해주시구요!

 

애니메이션을 구현한 완성본을 봐볼까요~? 

 

 

좀 더 부드러울 필요가 있겠네요 !

 

사실 애니메이션은 플러터에서 기본으로 제공해주는 AnimationContainer, AnimationController, Tween 등으로도 구현할 수 있는데요, 너무 복잡한 애니메이션이 아닌 이상 저런 위젯 혹은 컨트롤러를 사용해 구성해 보는 것도 좋을듯합니다. 다음 편은 AnimationContainer 를 이용해서 간단한 애니메이션을 만들어보도록 하겠습니다