AnimatedFloatAsState로 애니메이션 구현하기[3]

3. 투명도

 

움직임과 크기뿐만 아니라  View의 투명도도 설정할 수 있었다.

동영상을 보면 알 수 있겠지만, 버튼을 누를 경우 다음 depth 화면으로 이동하는 순간

점으로 된 카테고리가 중앙에서 튀어 나오는 것을 볼 수 있다.

 

카테고리 같은 경우 크기는 고정되어 있지만 fade-in, out 효과가 있기에

다른 요소인 크기, 움직임과 마찬가지로 State인 alpha 값을 조정해서 구현했다.

 

var isClicked by remember { mutableStateOf(true) }
  
val alpha: Float by animateFloatAsState(
    targetValue = if (isVisible) 1f else 0f,
    animationSpec = tween(durationMillis = 1000) // 애니메이션 지속 시간 설정 (1초)
)

Column {
    Button(onClick = { isVisible = !isVisible }) {
        Text(if (isVisible) "Fade Out" else "Fade In")
    }
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Blue)
            .graphicsLayer(alpha = alpha) // alpha 값 적용
    )
}

 

이런 식으로 animateFloatAsState 속성을 이용해

targetValue, animationSpec을 설정 후, isClicked 같은 flag 값을 이용한다면

투명도 애니메이션도 문제없이 구현할 수 있다.

 

4. 결론

 

아무리 문제가 어려워 보이고, 복잡하더라도

문제를 해결하겠다는 의지만 있다면 구현 가능하다.

도전과 실패를 두려워하지 말자 화이팅!