[Kotlin/Compose] SnowFall Effect 만들기

크리스마스 이브 크리스마스 이브 날 아침입니다. 아침에 밖을 보니 눈이 내리는 것을 보았습니다... 이를 기념하여 SnowFall effect를 구현해보도록 하겠습니다. SnowFall Effect SnowFall Effect는 화면에서 눈이 내리는 애니메이션 입니다. 이를 위해, 가장 필요한 것은 바로 눈입니다. 눈을 많이 생성하고, 화면 위에서 아래까지 떨어지도록 애니메이션을 만들어주면, 눈 내리는 모션을 제작할 수 있습니다. 완성 미리보기 snow Data Class data class Snow를 생성해주겠습니다. Snow의 경우에는, 눈의 시작 위치 x,y 좌표 그리고 눈의 크기인 radius 마지막으로 떨어지는 속도를 담은 snow가 정의된 data class입니다. data class Snow..

• format_list_bulleted 안드로이드/Compose
• · 2023. 12. 24.
• textsms

[Kotlin/Compose] 슬라이드를 이용한 공 던지기 모션 만들기

요약 지난 번에 공부했던, anchoredDraggable을 이용하여 슬라이드를 통한 공을 던지는 모션을 제작해보고자 합니다. 공의 시작 위치는 기기의 하단 가운데 이며 위로 스크롤 하게 되면, 상단 중앙 포수가 있는 위치까지 날아가게 됩니다. 사용자가 던지게 되면, graphicsLayer를 통해 rotationZ값을 drag된 위치에 따라 계산하여, 회전하는 듯한 모션을 주어 공을 던지는 느낌을 주었습니다. 또한 공이 포수 위치까지 도달하게 되면, coroutine을 이용하여 0.5초 딜레이를 주어 다시 원래 초기 위치로 돌아가도록 설정하였습니다. 완성 전체 코드 class MainActivity : ComponentActivity() { override fun onCreate(savedInstanc..

• format_list_bulleted 안드로이드/Compose
• · 2023. 12. 23.
• textsms

[Kotlin/Compose] 반응형 이미지 만들기

반응형 이미지? 완성 이미지 예시 유튜브를 보다가 아래 영상을 보게 되었다. 해당 영상에서는 사용자가 클릭함에 따라 이미지가 기울어져 반응형 이미지를 만드는 법을 보여준다. https://youtu.be/YDCCauu4lIk?si=LiDetcR1AwOzSk-i 해당 영상에서 나오는 코드는 html로 설명되어 있다. 즉 웹 기반으로 만드는 방법을 설명한 영상이다. 이 영상을 보고, 그러면 Android에서 Compose를 통해 한 번 만들어보자 하고 도전해보았다. pointerInteropFilter 아마 가장 필요한 Modifier함수라고 생각한다. 사용자가 터치를 하였을 때 해당 위치를 어떻게 인식하느냐에서 해당 위치 알 수 있도록 터치 이벤트를 다룰 수 있게 해준다. 오늘 사용할 터치 이벤트는 크게 ..

• format_list_bulleted 안드로이드/Compose
• · 2023. 12. 22.
• textsms

[Kotlin/Compose] Scroll Fade-In/Out animation

Scroll Fade-InOut animation Scroll을 할 때, 각 item요소가 fade-in/out되면서 해당 위치로 이동하는 기능 구현을 해보았습니다. 미리보기 구현 구현 방법 LazyColumn을 이용하여 열을 생성하고, 사용자가 스크롤하여 화면에 아이템이 보이게 되면, LaunchedEffect를 통해 alpha값을 변경하여 투명도 효과를 적용한다. 코드 class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { FadeinscrollTheme { // A surface container u..

• format_list_bulleted 안드로이드/Compose
• · 2023. 12. 22.
• textsms

[Kotlin/Compose] Slide-Unlock(밀어서 잠금해제) 기능 개발하기 (2)

지난 포스팅에 이어서 개발을 진행하겠습니다. 아이콘 적용 기존에 텍스트 B가 적용되어 있는 스와이핑 버튼을 아이콘으로 변경하도록 하겠습니다. Icon(Icons.Outlined.KeyboardArrowRight, "", tint = Color.White, modifier = Modifier.align( Alignment.Center )) 기존의 Text를 Icon으로 바꾸어주었습니다. 드래그가 완료가 되면 배경색을 바꾸기 드래그가 완료가 되면, 기존의 배경색을 바꾸도록 하겠습니다. 기존의 노랑으로 적용되어 있던 배경색을 Gary -> LightGray로 변경되게끔 바꾸어보도록 하겠습니다. 드래그가 중간 이상에 도착을 했을 때 색상을 LightGray로 바뀌도록 하기 위해, animateColorAsSta..

• format_list_bulleted 안드로이드/Compose
• · 2023. 12. 15.
• textsms

[Kotlin/Compose] Slide-Unlock(밀어서 잠금해제) 기능 개발하기 (1)

Slide-Unlock 기능이 무엇인가? 요즘 잠금 해제 기능은 다들 지문 인식 또는 페이스 아이디를 통해 잠금 해제를 하는데, 몇 년 전에는 밀어서 잠금 해제를 많이 쓰곤 했다. 대충 이런 느낌인데, 최근에 AnchoredDraggable에 대해 학습한 김에, 다음 기능을 구현해보고자 한다. 오늘의 완성본 구현 enum class 가장 먼저 상태를 표현할 enum class를 생각해보자. 잠금 해제의 상태는 처음 - 끝 으로 표현이 가능하다. enum class Position{ Start,End } state 구현 다음은 가장 중요하다고 생각하는 컴포저블의 드래그 상태를 저장하는 state의 구현이다. val state = remember { AnchoredDraggableState( initialV..

• format_list_bulleted 안드로이드/Compose
• · 2023. 12. 15.
• textsms