안녕하세요 허접샴푸입니다~!
배달의 민족 따라만들기 5편입니다! 이번 5편에서는 잠시 쉬어가기 느낌으로 Animation을 구현하도록 하겠습니다.
(얻어갈 수 있는 것 - 제 마음대로 끄적인...)
- ObjectAnimator
- LayoutAnimation
- CoroutineScope
[자료(구현할 것)]
1. 아이콘들이 Animation에 따라 화면에 나타납니다.
(아래에서 위로, RecyclerView에 Animation을 적용하고자 합니다. 이미지 배너 아래에서 위로 Animation은 다루지 않습니다.)
2. ImageView Animation(덜컹덜컹 Animation)
[참고]
절대 실제 배달의 민족 App과 똑같이 구현하는 것이 아닌 최대한 비슷하게 구현하는 것이 목표입니다.
제가 고수였으면 100프로 똑같이 구현할텐데... 너그럽게 봐주십시오...
LETS GO!
[시작]
(1) GridRecyclerViewAdapter.kt 수정 (덜컹덜컹 아이콘 구현하기)
- fun animateView(ivGridImage: ImageView?) 함수를 만들어줍니다. (애니메이션을 담당하는 함수)
- 저도 Animation에 대해서는 아는 것이 없습니다. 이번 기회에 조금 해본 것입니다. Android Animation에 대해 검색하니 아래 사이트가 검색 결과로 나와서 아래 사이트의 글을 보며 만들어 보았습니다.
참조 : https://developer.android.com/training/animation/reposition-view
애니메이션으로 뷰 이동 | Android 개발자 | Android Developers
화면에서 개체의 위치를 변경해야 할 경우가 많습니다. 이러한 경우는 백그라운드에서 수행되는 일부 처리 작업에 대한 사용자의 상호작용 때문에 발생하기도 합니다. 개체 위치를 업데이트하면 영역 위치가 빠르게 전환되는데 이 방식 대신에 애니메이션을 사용하여 개체를 시작 위치에서 끝 위치로 옮길 수 있습니다. Android에는 화면에서 ObjectAnimator 같은 뷰 개체의 위치를 조정할 수 있는 다양한 방법이 있습니다. 그리고 애니메이션 재생 시간뿐만 아니
developer.android.com
- 덜컹덜컹 아이콘을 보면, 위아래로 덜컹덜컹 거립니다. 즉 X, Y 좌표계에서 수직을 담당하는 Y 를 가지고 놀아야죠? 그래서 ObjectAnimator에서 "translationY" 라고 작성합니다.
- 7f 는 얼마나 아래로 움직일 것인지를 정해주는 값입니다. 숫자가 클수록 더 많이 움직이게 됩니다. 왜 아래냐면, 안드로이드 화면에서 Y좌표가 0이면 저희가 수학시간때 배우는 좌표계와 반대로 화면의 맨 위가 0입니다. 그리고 아래로 내려갈수록 Y의 값은 커집니다. 즉 7f는 현 아이콘 위치에서부터 아래로 7픽셀만큼 움직이겠다는 뜻입니다.
- .apply scope 함수를 이용하여 duration은 100으로 잡습니다. duration은 몇 milli초 동안 animation을 진행할 것이냐 입니다. 그래서 저는 0.1초로 정하였습니다. 왜냐면 음... 덜컹덜컹 이지 더어어얼커어어엉이 아니기 때문입니다.
- repeatCount는 해당 animation이 말 그대로 몇번 반복하냐 정해주는 것입니다. INFINITE이라고 무한으로 설정할 수 있는데, 저는 제가 계속 값을 만져보니 덜컹덜컹처럼 2번이 괜찮더라고요. 그래서 2번 반복하도록 해주었습니다.
- 덜컹덜컹을 구현하기 위해서는 addListener을 통해 AnimationListener을 추가하고 onAnimationEnd 오버라이드 함수를 만져줘야 합니다. 위 아이콘 애니메이션을 잘 보면, 덜컹덜컹 후 1초 정도 가만히 있다가 다시 덜컹덜컹을 반복합니다. 만약 listener을 추가하지 않고 repeatCount를 INFINITE으로 정할 경우 저희 애니메이션은 덜컹덜컹덜컹덜컹덜컹... 애니메이션이 될ㄷ 것입니다. 저희가 구현하고자 하는 애니메이션은 덜컹덜컹...덜컹덜컹...덜컹덜컹... 입니다.
- 암튼! onAnimationEnd 내부를 보면, count변수가 있습니다. count 변수를 집어넣고 증감을 시켜주어 count%2 (짝수, 홀수)인지를 판별합니다. 짝수이면 1초를, 홀수이면 0.1초를 delay 시켜줍니다. 덜컹덜컹 애니메이션이 진행된다음 1초 후 다시 start()를 통해 반복시켜주기 위함입니다. count의 값이 홀수이면 빠르게 0.1초 후 애니메이션을 start()하여 덜컹 0.1초 후 덜컹을 통해 덜컹덜컹을 구현합니다. 덜컹덜컹이 끝나면 count의 값이 1 증가하여 짝수가 되며 delay(1000)을 동작하게 됩니다. 그럼 덜컹덜컹 (1초 딜레이)가 되게 됩니다. 이 모든 동작을 반복하게 되면 덜컹(0.1초 딜레이)덜컹(1초 딜레이)의 반복이 되게 됩니다.
- delay를 사용하기 위해서는 Coroutine을 사용해주어야 하며 CoroutineScope(Main)을 사용합니다. "operating with UI objects"에 이용되는 Coroutine이기 때문에 저희는 UI object인 그림에 애니메이션 delay를 주어야 하기 때문에 CoroutineScope(Main)을 사용해 줍니다.
(결과 화면)
GIF 파일이라 다소 애매해 보일 수 있습니다. 아래 영상에서 다시 확인해보시기 바랍니다. 더불어 배달의 민족처럼 와이파이 비슷한 애니메이션을 구현하려면 관련 여러 이미지가 필요하기 때문에 구현하지는 않았습니다. 만약 이 부분 관련해서 궁금한 분들께서는 댓글로 요청해주시기 바랍니다. 아니면 제가 한번 포스트를 작성하도록 하겠습니다. 그리고 Glide(이미지 로딩 라이브러리)를 이용하여 GIF 파일을 보여주는 방법도 있고 여러 방법이 있기 때문에 나중에 알아보도록 해보겠습니다.
(2) RecyclerView Animation 구현하기(아래에서 위로 보여지는 Animation)
[1] anim 디렉터리 생성
위 과정을 마치면 왼쪽 그림과 같이 "anim" 폴더가 생성됩니다. 이제 여기에 animation 관련 코드를 짜면 됩니다.
[2] animation_from_bottom_to_top.xml, layout_animation_from_bottom_to_top.xml 작성
(animation_from_bottom_to_top.xml)
- duration은 500miliseconds로 0.5초 동안 해당 animation 진행되게 합니다.
- translate은 위에서도 이미 한번 해봤듯이(translationY) 이동시키는 애니메이션입니다. fromYDelta를 50%로 설정하여 현재 위치에서부터 50%만큼 아래로 떨어져있는 상태가 from(시작점)이 됩니다. 이 값은 크면 클수록 애니메이션을 실행해야 하는 본체가 원래의 위치로부터 더 많이 아래로(Y translate이기 때문) 내려가있게 됩니다. toYDelta는 당연히 본래의 위치인 0이 되어야 겠죠?
- alpha는 fade in / out (투명도)를 담당합니다. fromAlpha 0(완전 보이지 않음)에서 toAlpha를 1로 설정하여 서서히 이미지(엄밀히 말하면 RecyclerView에 적용할 것이기 때문에 RecyclerView item이 됩니다.)가 나타나도록 설정합니다.
(layout_animation_from_bottom_to_top.xml)
- RecyclerView는 setLayoutAnimation함수를 가지고 있습니다. 이에 따라 layoutAnimation을 위와 같이 작성하며, animationOrder은 normal로 순차적으로 진행되게 합니다. reverse, random으로 설정 또한 가능합니다.
- animation은 위에서 작성한 set을 적용해주며, delay는 각각 애니메이션을 보여줄 때 RecyclerView item간에 delay를 뜻합니다. 10% 정도로 짧게 주었습니다.
(결과 화면)
(비교 화면)
제가 알고보니 업데이트하지 않은 배달의 민족 App을 쓰고 있었다가 업데이트를 하니 UI가 많이 바꼈었습니다. 그래서 약간의 차이가 있는 점 양해 부탁드립니다. ㅜㅜ
(결과 영상)
[Youtube] 이해를 돕기 위해 직접 보며 따라할 수 있는 영상 또한 준비하였습니다.
https://www.youtube.com/watch?v=CUlI8y3Krdc&lc=z22odddywkr2dhax104t1aokgnvmv4vvcj3fjyqozrsyrk0h00410
[Github] 코드를 다운받아서 실행해보시기 바랍니다.
https://github.com/DJDrama/BaeminPractice/tree/Main-Icon%2C-RecyclerView-Animations
DJDrama/BaeminPractice
Contribute to DJDrama/BaeminPractice development by creating an account on GitHub.
github.com
참 쉽죠? 다음 6편에서는 나머지 밑에 뷰들을 마치도록 하겠습니다.
계속 말을 바꿔서 죄송합니다.
많은 관심과 사랑 부탁드립니다.
혹시 이 외에도 만들고 싶으신 UI가 있는데 도저히 어떻게 만드는지 모르겠으면 댓글로 남겨주시면 제가 해결해드리겠습니다!
그럼 6편에서 봐요~!
