android - 如何在 Jetpack Compose 中像下面的布局一样实现波纹或波浪或雷达加载

Question

如何在 Jetpack Compose 中添加波纹加载或波浪加载

Answer 1

您可以使用 Animation 检查下面的 Ripple Animation 代码

@Composable
fun RippleLoadingAnimation(
circleColor: Color = Color.Magenta,
animationDelay: Int = 1500
) {

// 3 circles
val circles = listOf(
    remember {
        Animatable(initialValue = 0f)
    },
    remember {
        Animatable(initialValue = 0f)
    },
    remember {
        Animatable(initialValue = 0f)
    }
)

circles.forEachIndexed { index, animatable ->
    LaunchedEffect(Unit) {
        // Use coroutine delay to sync animations
        // divide the animation delay by number of circles
        delay(timeMillis = (animationDelay / 3L) * (index + 1))

        animatable.animateTo(
            targetValue = 1f,
            animationSpec = infiniteRepeatable(
                animation = tween(
                    durationMillis = animationDelay,
                    easing = LinearEasing
                ),
                repeatMode = RepeatMode.Restart
            )
        )
    }
}

// outer circle
Box(
    modifier = Modifier
        .size(size = 200.dp)
        .background(color = Color.Transparent)
) {
    // animating circles
    circles.forEachIndexed { index, animatable ->
        Box(
            modifier = Modifier
                .scale(scale = animatable.value)
                .size(size = 200.dp)
                .clip(shape = CircleShape)
                .background(
                    color = circleColor
                        .copy(alpha = (1 - animatable.value))
                )
        ) {
        }
    }
}
}