[Compose UI] 애니메이션 - 스프링 효과

 

스프링 효과

안드로이드 애니메이션에서 제공하는 스프링은 시작과 끝 값 사이에 물리학적 값을 이용하여 애니메이션을 표현한다. 해당 애니메이션에 반영되는 값은 감쇠비와 강도이다.

• 감쇠비(damingRatio) : 스프링의 탄성 정도. 얼마나 빠르게 원래 상태로 돌아오는지의 정도를 나타낸다.
  기본값은 Spring.DampingRatioNoBouncy 이다
• 강도(stiffness) : 스프링의 강도 정도. 스프링이 종료된 값으로 돌아오는 속도를 의미한다.
  기본값은 Spring.StiffnessMedium 이다.

 

Card내의 Column에 스프링 효과 적용하기

Column에 적용하는 Modifier의 animateContentSize 인자를 설정한다. spring 애니메이션을 animationSpec으로 설정하고, spring의 물리학적 변수들을 Spring의 적절한 값들로 적용한다.

Column(
   modifier = Modifier
       .animateContentSize(
           animationSpec = spring(
               dampingRatio = Spring.DampingRatioMediumBouncy,
               stiffness = Spring.StiffnessLow
           )
       )
)

나는 Card 내에 Column에 적용하였다. IconButton을 클릭 시 확장 및 복구되는 애니메이션을 적용하였다. 해당 코드는 안드로이드에서 제공하는 코드랩 코드를 활용하였다.

DogItem은 expanded 변수의 값이 변경되면 Recomposition이 발생하게 되고, 변수 값에 따라 DogHobby() 컴포저블 함수가 호출되거나 되지 않아 내용이 추가되거나 삭제되는 형태를 띈다.

@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
    var expanded by remember { mutableStateOf(false) }

    Card(
        modifier = modifier.padding(8.dp),
        elevation = 6.dp
    ) {
        Column(
            modifier = Modifier
                .animateContentSize(
                    animationSpec = spring(
                        dampingRatio = Spring.DampingRatioMediumBouncy,
                        stiffness = Spring.StiffnessLow
                    )
                )
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
            ) {
                DogIcon(dog.imageResourceId)
                DogInformation(dog.name, dog.age)
                Spacer(Modifier.weight(1f))
                DogItemButton(
                    expanded = expanded,
                    onClick = { expanded = !expanded })
            }
            if (expanded) {
                DogHobby(dog.hobbies)
            }
        }
    }
}

 

참고

• https://developer.android.com/jetpack/compose/animation 
• https://developer.android.com/codelabs/basic-android-kotlin-compose-woof-animation