[Jetpack Compose] 2. Layouts, theming, and animation(4) #Animation

[Jetpack Compose] 2. Layouts, theming, and animation(4)

📌참고자료

• Layouts, theming, and animation | Android Developers

5 quick animations to make your app stand out

📌참고자료

• AnimatedContent | Android Developers
• Animation in Compose Cheat Sheet

• when 문으로 화면에 보여질 Composable을 제어하는 경우, AnimatedContent 사용하기
• AnimatedContent:
  composable that animates its content as it changes based on a target state

@Composable
fun SearchContent(
	tabSelected: CraneScreen
){
	AnimatedContent(
    	targetState = tabSelected
    ){ targetState ->
    	when(targetState){
        	CraneScreen.Fly -> FlySearchContent()
            CraneScreen.Sleep -> SleepSearchContent()
            CraneScreen.Eat -> EatSearchContent()
        }
    }
}

• By default, the initial content fades out and then the target content fades in
  (= fade through behavior)
  -> transitionSpec 파라미터에 ContentTransform object 넘겨서 transition 커스텀 가능
• ContentTransform
  • EnterTransition 과 ExitTransition을 with infix function으로 결합하여 설정
  • SizeTransform을 using infix function으로 설정

AnimatedContent(
    targetState = count,
    transitionSpec = {
        // Compare the incoming number with the previous number.
        if (targetState > initialState) {
            // If the target number is larger, it slides up and fades in
            // while the initial (smaller) number slides up and fades out.
            slideInVertically { height -> height } + fadeIn() with
                slideOutVertically { height -> -height } + fadeOut()
        } else {
            // If the target number is smaller, it slides down and fades in
            // while the initial number slides down and fades out.
            slideInVertically { height -> -height } + fadeIn() with
                slideOutVertically { height -> height } + fadeOut()
        }.using(
            // Disable clipping since the faded slide-in/out should
            // be displayed out of bounds.
            SizeTransform(clip = false)
        )
    }
) { targetCount ->
    Text(text = "$targetCount")
}

Animation in Compose Cheat Sheet