애니메이션 2

[안드로이드] 부채꼴 카드처럼 돌아가는 Pager 만들기 (with Jetpack Compose Horizontal Pager)

오랜만의 Android 포스팅이다...ㅋㅋㅋ 도전적인 UI를 받아볼때 머리아프면서도 신나는 그런게 있다. 이번에 만들어본 건 손에 쥔 카드처럼 돌아가는 Pager다. (뭐라고 해야할까..? 용어를 아시는분은 댓글!) Jetpack Compose를 사용한지 3개월 남짓이라 숙련도가 다소 낮았기 때문에 간단한 이해부터 하고 작업에 들어갔다. “Jetpack Compose Pager Animation” 키워드로 검색해서 나오는 글들 중에 개인적으로 가장 깔끔했던 이 글의 설명을 빌려 Page Offset을 계산하는 방식을 후술해보려 한다. Page Offset 계산하기 Pager State 에는 currentPageOffsetFraction이라는 멤버변수가 제공된다. 이름에서 알 수 있듯이, 현재 페이지에 대..

[안드로이드] 회전목마(Carousel) 애니메이션 구현하기

게임에서 아이템이나 캐릭터 선택을 할때 회전 목마처럼 돌아가는 선택 애니메이션을 자주 볼 수 있는데, 이것을 안드로이드에서 구현해 볼 수 있는 기회가 생겼다. 사실 노가다를 하면 어떻게든 구현할 수 있지만, 이번에는 문제를 분석하고 쪼개보는 연습을 겸해봤다. 💡 요구사항: 3가지 종류의 상자가 있고, 이 상자들을 돌려가면서 열 상자를 선택하게 해주세요. 1. 상자 유형 데이터화 첫번째로 해야할 일은 상자를 데이터화하는거다. enum 클래스로 상자의 이미지, 가격, 이름이 담긴 LuckyBoxType을 만들어 주었다. enum을 사용한 이유는 순차적 접근이 sealed class보다 훨씬 쉽기 때문이다. enum class LuckyBoxType( val image: Int = 0, val cost: In..