0. Compose에서의 변환 애니메이션

Compose 에서는 변환 애니메이션(회전, 크기 변화, 이동)을 구현하는 여러 방법이 존재함.

transform modifier를 직접 사용하거나, graphicsLayer modifier를 사용하는 방법도 존재.

이 때, transform modifier를 직접 사용하는 것이 문제가 될 수 있음.

// BAD
@Composable
fun RotatingBox() {
    val transition = rememberInfiniteTransition()
    val rotationRatio by transition.animateFloat(
        initialValue = 0f,
        targetValue =  1f,
        animationSpec = infiniteRepeatable(
             animation = tween(5000)
        )
    )
    Box(modifier = Modifier
        .**rotate(rotationRatio * 360f) <- 이 부분**
        .size(100.dp)
        .background(Color.Red)
    )
}

변경되는 state인 rotationRatio를 사용하므로, rotationRatio 가 변할 때마다 Box가 재구성 됨.

1. graphicsLayer Modifier

// GOOD
@Composable
fun RotatingBox() {
    val transition = rememberInfiniteTransition()
    val rotationRatio by transition.animateFloat(
        initialValue = 0f,
        targetValue =  1f,
        animationSpec = infiniteRepeatable(
            animation = tween(5000)
        )
    )
    Box(modifier = Modifier
        // This is better
        **.graphicsLayer {
            rotationZ = rotationRatio * 360f
        }**
        .size(100.dp)
        .background(Color.Red)
    )
}

graphicsLayer modifier 사용 시 Composable의 외관이 변하지 않는다면 재구성이 발생하지 않음.

즉, 회전(roatation), transform, 투명도(alpha), 절삭(clipping) 등에서는 graphicsLayer 사용.

이를 통해, 애니메이션 효과는 동일하나 불필요한 recomposition 방지 가능.