목록에 애니메이션 적용

LazyColumn, LazyRow의 특징 및 사용

지난번에 만든 목록에 UI 애니메이션을 추가하려고 한다

 

 

animateDpAsState

animateDpAsState 컴포저블은 애니메이션이 완료될 때까지 애니메이션에 의해 객체의 value가 계속 업데이트되는 상태 객체를 반환한다

 

적용 코드

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier, names: List<String> = listOf("World", "Compose")) {
    var expanded by rememberSaveable { mutableStateOf(false) }
    val extraPadding by animateDpAsState( // animateDpAsState 추가
        if (expanded) 48.dp else 0.dp,
        animationSpec = spring( //animationSpec 사용
            dampingRatio = Spring. DampingRatioMediumBouncy, // 바운스 효과
            stiffness = Spring.StiffnessLow // 부드러운 움직임
        )
    )

    Surface(
        color = MaterialTheme.colorScheme.primary, 
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)) {

        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier
                .weight(1f)
                .padding(bottom = extraPadding.coerceAtLeast(0.dp))) { // coerceAtLeast 최소값 보정
                Text(text = "Hello")
                Text( text = "$name")
            }
            ElevatedButton(onClick = { expanded = !expanded }) {
                Text(if (expanded) "Show less" else "Show more")
            }
        }
    }
}

• Spring 애니메이션을 사용해서 부드럽고 자연스러운 효과를 주었다
• padding값이 음수가 되는 것을 방지하기 위해 coerceAtLeast 보정을 사용했다

 

결과