미리보는 결과

기본 UI 만들기

Row(
    modifier = modifier,
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    repeat(3) {
        Box(
            modifier = Modifier
                .weight(1f)
                .aspectRatio(1f)
                .scale(scaleValues[it].value)
                .background(
                    color = if (isSystemInDarkTheme()) Color.White else Color.Black,
                    shape = CircleShape
                )
        )
    }
}

Row를 이용해서 동일한 크기의 원을 세 개 만들었다.

순차적으로 애니메이션 적용

val infiniteAnimation = rememberInfiniteTransition("scale")

val scaleValues = List(3) { index ->
    infiniteAnimation.animateFloat(
        initialValue = 1f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = keyframes {
                durationMillis = 1500
                1f at index * 300 using LinearEasing
                1.3f at index * 300 + 300 using LinearEasing
                1f at index * 300 + 600 using LinearEasing
            },
            repeatMode = RepeatMode.Restart
        ),
        label = "scale"
    )
}

dot의 인덱스를 이용해서 scale이 커지는 시간에 차이를 두었고 이를 무한히 반복하도록 하였다.

깃허브 링크

https://github.com/uuranus/compose-animations