Android Studio 我怎样才能实现涟漪或波或雷达加载一样,下面的布局在喷气背包组成

bjg7j2ky  于 11个月前  发布在  Android
关注(0)|答案(1)|浏览(89)

我如何在jetpack compose中添加涟漪加载或波浪加载


的数据

sf6xfgos

sf6xfgos1#

您可以使用动画检查以下代码为涟漪动画

@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))
                )
        ) {
        }
    }
}
}

字符串

相关问题