kotlin: 커스텀 로티애니메이션 적용하기

오늘 해볼건 로티애니메이션을 가져와서 앱에 적용시켜볼 겁니다.

(많이 길겁니다...)

 

우선 로티애니메이션을 적용하기전에 우선 로티애니메이션이 무엇인지부터 알아야겠죠?

lottie는 에어비엔비에서 개발한 JSON기반의 애니메이션 라이브러리입니다.

음 그냥 예시를 드는게 빠를거같은데 인스타나 페북에서 좋아요버튼 있죠? 

인스타에선 그걸 누르면 하트가 분홍색으로 뿅 채워지는 효과를 볼 수 있고 페북은 따봉이

뿅 하고 채우지는 효과가 나타날 겁니다. 이게 바로 로티애니메이션이지요.

자 그럼 각설하고 시작해볼까요?

 

 

 

제가 이번에 구연할건 좋아요를 누르면 하트가 뿅하는 효과입니다!

 

일단 로티애니메이션을 가져와야겠죠?

무료 로티애니메이션을 다운받는곳은 로티파일스를 추천드립니다!

https://lottiefiles.com/

LottieFiles - Download Free Lottie Animations, Integrations & Plugins

 

 

우선 로티파일스에서 하트를 검색해봅시다. 굳이 하트가 아니더라도 원하는 애니메이션을 선택하시면 됩니다.

 

저는 오늘 이 하트애니메이션을 고를건데 이유는 이 애니메이션이 하트가 뿅 채워지는 부분과 

다시 사라지는 애니메이션이 같이 있기 때문입니다. 이걸 잘라서 좋아요를 누르고 취소하는

액션을 둘다 구현해보겠습니다.

애니메이션을 다운(JSON파일) 받구 이제 안드로이드 스튜디오에서 엑티비티를 만들어야겠죠?

 

empty activity로 lottieAnimationTutorial이라는 이름의 프로젝트를 만들었습니다.

 

근데 아직 준비가 끝난게 아니죠! 로티기능을 사용하기위해선 설정을 해줘야할게 있습니다.

우선 구글에 lottieanimation git을 들어가고 홈페이지를 내리다보면

이런 링크가 있을겁니다

airbnb.io/lottie

Lottie Docs

 

 

이제 여기서 

우리가 만들건 안드로이드 앱이니까 좌측에 안드로이드 클릭!

 

하면 이런화면이 뽝 나올겁니다.

 

이 화면은 로티를 시작하기위한 절차를 보여주고 현재 버젼을 알 수 있게 해줍니다.

build.gradle파일로 가라내요. 

위치는 좌측 Gradle Scripts -> build.gradle(Module:~~~ 입니다.) 프로젝트로 가면 안됩니다!

이렇게 build.gradle로 가셔서 코드를 쭉 보시면 dependencies(의존)가 보일겁니다. 

이게 외부 오픈소스를 가져오는 곳입니다. 

여기(dependencies)에 아까 사이트에 써있던 코드 

implementation "com.airbnb.android:lottie:$lottieVersion"

를 넣어줍니다.

그런데 이 코드 안에 $lottieVersion 보이시나요?

이게 로티버전을 나타내는 변수인데 여기에 아까 사이트에 있던

버전을 입력해넣어줍시다.

 

이제 아까 다운받았던 파일을 프로젝트에 넣어줄겁니다.

좌측에 app -> New -> Folder -> Assets Folder를 만들어줍니다.

여기에 아까 다운받은 JSON파일을 넣어줄건데 여기서 그냥 드레그로 옮기면 안되더라구요....

드레그로 넣지말고 아까받은 파일을 ctrl + c하고 assets파일을 누르고 ctrl + v하면 이렇게 파일을 

넣을거냐고 물어볼겁니다. 전 파일이름을 heart.json으로 하고 복사했습니다.

 

 

음 잘 복사가 되었습니다!!

 

이제 레이아웃을 작업해볼까요?

 

 

렐러티브 레이아웃으로 바꿔주고 필요없는 텍스트뷰도 지워놨습니다!

근데 아까 로티사이트를 보면 

네.. 이렇게 적용을 하라는군요... 바로 복붙 ㄱㄱ!!

(주석부분이랑 그 바로위에 app:lottie_rawRes="@raw/hello_world"는 지워줍시다!)

 

눼엡 필요없는거 지워주고, 크기설정해주고, 색깔이랑 넣어주고, 중앙으로 옮겨주었습니다.

 

아까 지워줬던 주석들을 보면 로티 기능들이 나와있습니다. 적용할 파일, 자동재생, 루프등의 기능이 있죠?

아까 넣어준 파일을 적용하고!

저희는 버튼을 누르면 애니메이션이 동작하게 할거니 오토플레이와 루프는 false로 둡시다!

 

음 여기까지 했다면 이제 아까 받은 애니메이션을 설정해야됩니다!

일단 우리가 만든 저 로 티애니메이션 뷰의 id를 자신이 원하는데로 만들어줍시다.

저는 보기쉽게 like_btn으로 해줄게요!

 

MainActivity.kt로 가셔서 저번에 해봤던 클릭이벤트처럼 버튼의 클릭리스너를 만들어줍시다. 

 

 아직 애니메이션을 설정하지는 않아서 시각적인 효과는 안나오지만 로그태그를 이용해서

버튼이 활성화된 것을 확인해줍니다! 잘 작동하네요 ㅎㅎ

 

이제 애니메이션을 설정해봅시다! 아까 로티닥사이트의 문서를 잘 읽어봅시다!

으음 버튼이름.playAnimation()으로 적용시킬 수 있겠네요!

 

적용이 된 모습입니다! 그런데 애니메이션에 아직 손을 안대서 하트가 뿅 하고

다시 회색하트로 돌아가버립니다.

그럼 어떡할까요? 애니메이션의 시작 -> 중간 은 하트 생성 중간 -> 끝 은 하트 사라짐이니까

애니메이션을 반반 나누어서 적용해봅시다!!

버튼이름.playAnimation()을 지워주시고 아까 폴더에서 Custom Animators 부분을 가져와줍시다.

 

그런데 여기서 문제가 발생했습니다..

그냥 긁어와서 like_btn으로 적용시키니까 안되더라고요... 그래서 저도 정대리님이랑 똑같이

람다식으로 정리해서 넣었습니다 ㅠㅠ 애니메이션 전체 재생은 0 ~ 1이니까 0 ~ 0.5로 하면 절반까지 

재생 될꺼고 속도는 setDuration(1000) 그리고 소수로 받아야 되니까 as float까지 해줍시다.

 

눼엥! 중간에 딱 멈춰주네요 ㅠㅠ 왜 그냥 긁어서 하면 안될까요... 다음에 알아올게요..

 

자 이제 거의 다 왔습니다! 하트가 뿅! 했으면 이제 하트가 스르륵 없어지는거도 넣어야겠죠?

구현은 그냥 간단하게 할건데 좋아요 상태를 boolean형태로 넣어줄 변수를 하나 만듭시다.

저는 isLiked로 했습니다! 그리고 기본값으로 false를 줄겁니다. 처음에는 좋아요가 안 눌려있는

상태일거니까요ㅎㅎ 그리고 if문을 이용해서 클릭 이벤트가 발생했을때 isLiked가 false면

저 위에 하트가 나타나는 코드를 실행시켜줄겁니다 이때!! 실행하고 마지막에 isLiked상태를 true로 

바꿔주어야 다시 눌렀을때 if문이 작동하겠죠?? 

 

else로 하트를 끄는 코드도 만들어주고 위의 코드를 복붙하고 재생할 애니메이션 시간대랑 

지속시간을 정해줍시다!! 재생시간 0.5f -> 1f , 지속시간 300(하트 사라지는건 빠르게!) 

이러면 이제 커스텀 로티애니메이션이 완성된답니다!!!

 

그러면!!

이렇게 로티 애니메이션으로 만든 좋아요 버튼이 잘 켜지고 꺼지는걸 볼 수 있습니다!!

 

 

오늘은 로티애니메이션을 만들어보았는데요.. 아직 해결 못하는부분도 많고 공부할게

정말 많다는걸 다시 한번 깨닫게 됩니다...

다음연습장으로 돌아오겠습니다! 다들 화이팅!!