[Android/Compose] Jetpack Compose Animation🔥 공부하기

Compose CodeLab을 보며 노션에 정리한 내용입니다 (실습 코드만 다름)

animate*AsState

• 값 변경 애니메이션 (state 변경시 애니메이션 적용)

@Composable
funanimateColorAsState(
    targetValue: Color, // animation 타겟
    animationSpec:AnimationSpec<Color> = colorDefaultSpring, // 시간에 따라 값을 변경하는 데 사용할 애니메이션
    finishedListener: ((Color) -> Unit)? =null // 애니메이션이 완료될 때 알림을 받는 선택적 리스너
):State<Color> {
valconverter = remember(targetValue.colorSpace){
(Color.VectorConverter)(targetValue.colorSpace)
}
}

var clicked by remember {
         mutableStateOf(false)
    }
val buttonColors by animateColorAsState(if (clicked) Color.Yellow else Color.DarkGray)

Button(
		onClick = { clicked = !clicked },
    colors = ButtonDefaults.buttonColors(backgroundColor = buttonColors)
		   )
		{
        Text(text = if (clicked)"click" else "cancel", color = if(!clicked)Color.White else Color.Black)
		}

AnimatedVisibility

Button(
        onClick = { clicked = !clicked },
        colors = ButtonDefaults.buttonColors(backgroundColor = buttonColors)

    ) {
        Text(text = if (clicked)"click" else "cancel", color = if (!clicked)Color.White else Color.Black)
    }
AnimatedVisibility(visible = !clicked) {
    Box(
        modifier = Modifier.fillMaxWidth().background(color = MaterialTheme.colors.secondary).clip(RoundedCornerShape(20.dp)).padding(10.dp)
    ) {
        Text(
            text = "you clicked!!",
            color = Color.White
        )
    }
}

• enterTransition, exitTransition, initialOffsetY, targetOffsetY , animationSpec등의 매개변수를 통한 커스텀 애니메이션 가능

animationSpec 이란?

• 애니메이션을 커스텀하기 위한 인터페이스
• spring, tween, keyframes, repeatable / infiniteRepeatable, snap 가 존재

animateContentSize

• 콘텐츠 크기 변경 애니메이션
• 파라미터로 아무것도 넘겨주지 않으면 기본적으로 spring 애니메이션을 노출

• animateContentSize 적용 후

Transition API

• animate*AsState와 달리 애니메이션이 완료된 시점 추적 가능
• 다양한 transitionSpec 정의 가능
• updateTransition를 사용하여 적용

@Composable
fun<T> updateTransition(
    targetState: T,
    label: String? =null
): Transition<T> {
valtransition = remember{Transition(targetState, label = label)}
transition.animateTo(targetState)
DisposableEffect(transition){
onDispose{
transition.onTransitionEnd()
}
    }
returntransition
}

• animation target의 state와 label 전달

var clicked by remember {
        mutableStateOf(true)
}

val transition = updateTransition(targetState = clicked, label = "")
val buttonColors by transition.animateColor(label = "") { clicked ->
    if (clicked) Color.Yellow else Color.DarkGray
}
val textColors by ta

Button(
        onClick = { clicked = !clicked },
        colors = ButtonDefaults.buttonColors(buttonColors)
  ) {
      Text(text = if (clicked)"click button!" else "cancel", color = if (!clicked)Color.White else Color.Black, modifier = Modifier.animateContentSize())
  

InfiniteTransition

• 반복적인 애니메이션 가능
• rememberInfiniteTransition를 이용해 선언
• animate* 확장함수를 통해 애니메이션 값 변경

color에 infiniteTransition 적용하기!

val infiniteTransition = rememberInfiniteTransition()
            val buttonColors by infiniteTransition.animateColor(
                initialValue = Color.Yellow,
                targetValue = Color.DarkGray,
                animationSpec = infiniteRepeatable(
                    animation = keyframes {
                        durationMillis = 1000
                    },
                    repeatMode = RepeatMode.Restart
                )
            )

• repeatMode = RepeatMode.Reverse

• repeatMode = RepeatMode.Restart

Animatable

swipeToDismiss

• 터치 입력을 기반으로 한 애니메이션
• [pointerInput](https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary?hl=ko#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.coroutines.SuspendFunction1)) 수정자 사용시 사용자가 드래그하는 속도를 추적가능