[Jetpack Compose] AnimatedVisibility 활용해 Animation 처리하기

AnimatedVisiblity

AnimationVisiblity 는 컴포저블이 나타나거나 사라질 때의 애니메이션을 설정할 수 있다.

@Composable
fun ColumnScope.AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandVertically(),
    exit: ExitTransition = fadeOut() + shrinkVertically(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
) {
    val transition = updateTransition(visible, label)
    AnimatedEnterExitImpl(transition, { it }, modifier, enter, exit, content)
}

• visible: 상태(State)가 변화할때마다 Animation 이 트리거 된다.

  • true: EnterTransition 애니메이션 실행
  • false: ExitTransition 애니메이션 실행

• modifier: 애니메이션 동작을 할 Content 를 감싸는 컨테이너 레이아웃 역할의 Modifier 를 설정한다.

• enter : visible 이 true 로 바뀌면서 트리거될 애니매이션의 EnterTransition 을 설정한다.

• exit : visible 이 false 로 바뀌면서 트리거될 애니메이션의 ExitTransition을 설정한다.

• label : 이 애니메이션이 무엇을 하는지 설명하는 Label 을 지정한다.

• content : 애니메이션 동작을할 content 를 설정한다.

사용예시