animate*AsState API

컴포즈의 가장 간단한 애니메이션 api 중 하나로 State 변경 애니메이션을 적용할 때 사용한다.

val backgroundColor by animateColorAsState(if (tabPage == TabPage.Home) Purple100 else Green300)

변경되는 값을 상응하는 animate*AsState 컴포저블의 변형으로 래핑하여 애니메이션 값을 만들수 있다. 반환된 값은 State<T> 객체이므로 by 선언과 함께 로컬 위임 속성을 사용해서 일반 변수 처럼 처리할 수 있다.

animateColorAsState 보면 return 값이 State인것을 알수 있다.

animateColorAsState 보면 return 값이 State인것을 알수 있다.

가시성 애니메이션

앱의 콘텐츠를 스크롤하면 스크롤 방향에 따라 플로팅 작업 버튼이 확장되거나 축소할수 있다.

if (extended) {
    Text(
        text = stringResource(R.string.edit),
        modifier = Modifier
            .padding(start = 8.dp, top = 3.dp)
    )
}

if를 AnimatedVisibility로 대체하여 쓰면

AnimatedVisibility(extended) {
    Text(
        text = stringResource(R.string.edit),
        modifier = Modifier
            .padding(start = 8.dp, top = 3.dp)
    )
}

floating.gif

확장 축소가 되는것을 확인 할수 있다.

여러 값 애니메이션

복잡한 애니메이션을 처리 해야 할때 Transition API를 사용하면 좋다.

Transition의 모든 애니메이션이 완료된 시점을 추적할수 있다. animate*AsState API에서는 불가능 하지만 Transition API는 여러 상태 간에 전환할 때 다야한 transitionSpec을 정의 할수 있다.

Untitled

Untitled