AnimatedFloatAsState로 애니메이션 구현하기[1]

https://developer.android.com/develop/ui/compose/animation/quick-guide?hl=ko

Compose의 애니메이션에 대한 빠른 가이드  |  Jetpack Compose  |  Android Developers

 

처음 회사에 들어가서 온보딩으로 애니메이션을 구현하게 되었다.

의뢰업체가 당시 메인 화면의 버튼들을 나열하고 클릭한 경우,

애니메이션 과정을 통해 다음 화면으로 넘어가는 것들을 의뢰하였는데,

xml만 하다가 Compose도 처음 접하는 나로서 애니메이션을 구현해야 한다는

막막함과 두려움이 앞섰다.. 

 

그러다가 안드로이드 공식 홈페이지에서 찾은 AnimatedAsState라는

Compose UI 라이브러리가 있었고, 이것을 통해

어떻게 애니메이션을 해결했는지 공유하고자 한다.

 

https://www.youtube.com/shorts/0Whn4ebw3YQ

춘천박물관 애니메이션 구현 영상

 

 

일단 내가 구현한 춘천박물관 애니메이션 영상이다.

해당 프로그램은 스마트폰이 아닌 LG 로봇에서 만든 큐레이터 로봇에서 돌아가는데 

화면이 대충 세로로 긴 티비모양정도(?) 된다..

 

화면을 보면은 배경사진이 바뀌고 버튼들의 크기가 줄어들고, 위치가 이동하고,

등등 여러가지 복합적인 애니메이션들이 있는데

이 모든것들을 고려하면 맨탈이 갈린다.

 

따라서 하나씩 차근차근 해결하는 방식으로 접근해 보았다.

3가지 범주의 유형으로 나누자면, 

 

1. 크기 2. 움직임 3. 배경색 4. fade in/out 등등이

있는데 각자 어떤 함수를 사용했는지 천천히 말하고자 한다.

 

1. 크기

-> 크기 같은 요소는 사실 크게 어렵지 않았다. 스마트폰이 아닌 로봇이라서 

각 화면마다 크기 값을 계산하는 로직이 필요하지 않았기 때문에

피그마에 정의된 대로 size를 적어놓으면 문제는 손쉽게 해결된다.

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun AnimatedSizeExample() {
    var size by remember { mutableStateOf(100.dp) }
    val animatedSize by animateDpAsState(targetValue = size)

    Box(modifier = Modifier.size(animatedSize)) {
        Button(onClick = { size = if (size == 100.dp) 200.dp else 100.dp }) {
            Text("Toggle Size")
        }
    }
}

 

이 코드는 지피티를 통해 만든 코드이며,

보는 것과 같이 처음 초기상태와 targetValue인 나중 상태를 가지는 코드이다.

 

버튼 클릭이든지 어떤 Input이 들어오면 remember를 통해

State가 변경되어 사이즈가 targetValue로 바뀌게 된다.

 

따라서 4개의 버튼이 있으면, 클릭하는 버튼 사이즈는 그대로 두고,

나머지 버튼의 targetValue만 입력한다면 크기가 변하는 애니메이션은 쉽게 구현 가능하다.