1. 앱에 어울리는 애니메이션 구현하기 <Lottie편>
버튼을 클릭하고 해당 버튼이 동작함으로써 나 동작하고 있다 ! 라고 유저한테 알려줄 수 있는 방법이 무엇일까 고민해보니 애니메이션! 이 있었습니다. 이 경우 뿐만이 아니라 앱 내에서 애니메이션을 잘 사용하면 사용자 경험을 좋게 만들어 줄 수 있죠~
애니메이션을 가장 쉽게 구현할 수 있는 방법 중 하나는 Lottie를 이용하는 것인데요. 한 번 천천히 알아보도록 합시다
제가 Lottie로 구현한 화면은 이렇습니다
로띠에는 굉장히 다양한 애니메이션이 있습니다. (+무료로 사용 가능하죠)
무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi
로티파일즈/LottieFiles는 오픈소스 애니메이션 포맷 로티를 제공하는 세상에서 가장 큰 무료 플랫폼입니다. 웹, iOS, 안드로이드, 윈도우를 위한 모션 그래픽 작업을 지원하는 플러그인과 툴을 통
lottiefiles.com
여기서 적절한 애니메이션을 가져옵니다
적절한 애니메이션을 골랐나요? 정확히 마음에 드는 애니메이션을 골랐을 수도 있으셨겠지만, 어딘가 아쉬운 애니메이션을 고르신 분들도 계실거라 생각합니다.
로띠는 이를위해 기존에 구현된 애니메이션 색들을 커스텀 할 수도 있답니다.
예를들면 애니메이션의 색이 본인의 앱의 포인트 컬러와 다른 경우가 있죠. 저 같은 경우엔 기존에 회색이었던 애니메이션이 제가 구성한 화면과 잘 어울리지 않는다고 생각했어요. 그리고 애니메이션 스피드가 너무 빨라서 유저의 피로도만 높인단 생각이 들었죠
자 저는 마음에 들게 로띠를 좀 커스텀 했습니다. 완성하시고 여기서 gif로 저장하시면 안됩니다
로띠는 JSON 파일로 다운로드 받으면 되는데, 덕분에 비교적 가벼운 용량으로 asset에 집어넣을 수 있다는 장점이 있습니다
사용 방법은 아주 간단해요. 어느 라이브러리와 같이 로띠를 pubspec.yaml에 등록한 뒤
Lottie.asset(
'assets/lottie/listening.json',
width: double.infinity,
fit: BoxFit.cover,
)
짜쟌!
로띠가 있는 위치를 가져오고 크기를 정해주기만 하면 된답니다 !
Lottie.asset()안에는 굉장히 많은 파라미터들이 있으니, 잘 이용하시기 위해서는 커맨드를 눌러 넘어가셔서 읽어보시는걸 추천드립니다. 생각하는 비율로 안나올 수도 있으니 다들 fit 사용에 유의해주시구요!
애니메이션을 구현한 완성본을 봐볼까요~?
사실 애니메이션은 플러터에서 기본으로 제공해주는 AnimationContainer, AnimationController, Tween 등으로도 구현할 수 있는데요, 너무 복잡한 애니메이션이 아닌 이상 저런 위젯 혹은 컨트롤러를 사용해 구성해 보는 것도 좋을듯합니다. 다음 편은 AnimationContainer 를 이용해서 간단한 애니메이션을 만들어보도록 하겠습니다