Compose-Animation[Compose codelab]

Animation 적용 방법

애니메이션 애니메이션의 구체적인 글은 안드로이드 공식 문서를 통해 확인할 수 있다.

---

animate*ColorAsState

• 여기서 * 는 Color, Dp,Double등 다양한 값에 따른 애니메이션 값을 줄 수 있다.
• 상태를 저장하고 상태값이 바뀔 때마다 색이 변경하도록 애니메이션을 만들어본다.

 var expanded by remember { mutableStateOf(false) }
  val color by animateColorAsState(
       targetValue = if (expanded) MaterialTheme.colorScheme.tertiaryContainer
       else MaterialTheme.colorScheme.primaryContainer,
   )
   //expanded값이 true라면 MaterialTheme.colorScheme.tertiaryContainer색상 값이 저장
   // false 라면 MaterialTheme.colorScheme.primaryContainer 값이 color변수에 저장된다
     Column(
            modifier = Modifier.background(color))

더보기 버튼을 누르면 expanded가 true가 되고 닫기를 누르면 false가 된다.

animateFloatAsState를 사용하면 modifier.alpha(value) 를 사용해 불투명도 조절할 수 있다.

---

Crossfade

Corssfade는 크로스페이드 애니메이션을 사용해 두 레이아웃 사이의 애니메이션을 처리한다.

 var expanded by remember { mutableStateOf(false) }  //expanded가 true가 되면 더보기 설명 열림
 
 Crossfade(targetState = expanded, label = ""){
  when(it){
  		true->{//expanded가 true일 때 처리할 ui 코드 삽입}
        false->{//expanded가 false일 때 처리할 ui 코드 삽입}
  }
 }

---

updateTransition

updateTransition은 Transition의 인스턴스를 만들고 저장하며 상태를 업데이트합니다.

var expanded by remember { mutableStateOf(false) } 
val transition = updateTransition(expanded)
//transition의 확장으로 다양한 값의 애니메이션을 적용할 수 있다.
//animateDp, animateFloat,animateDouble,animateColor...등
val borderWidth by transition.animateDp { state ->
    when (state) {
        true -> 1.dp
        false -> 0.dp
    }

val color by transition.animateColor { state ->
    when (state) {
        when(it){
        true->{
            Color.Red}
        false->{Color.Blue}
    	}
    }
    
}

---

Spring애니메이션

사이즈가 변할 때 Modifier.animateContentSize로 애니메이션을 줄 수 있다.

spring은 시작 값과 끝 값 사이에 물리학 기반 애니메이션을 만들며 두 매개변수 dampingRatio 및 stiffness를 사용합니다.

• dampingRatio 는 스프링의 탄성을 정의합니다
• tiffness 는 스프링이 종료 값으로 이동하는 속도를 정의합니다

 Column(
            modifier = Modifier
                .animateContentSize(
                    animationSpec = spring(
                        dampingRatio = Spring.DampingRatioNoBouncy, //스프링의 탄성
                        stiffness = Spring.StiffnessMedium  //종료값으로 이동하는 속도 정의
                    )
                )
                .background(color)
        ) 

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioHighBouncy,
        stiffness = Spring.StiffnessMedium
    )
)

---

참고문헌

Compose animation