Início / coding / Perguntas / 79072449
Accepted
BobDoolittle
Asked: 2024-10-10 09:04:23 +0800 CST

Exibindo uma roda de progresso animada no Jetpack Compose

  • 772

Neste Google Codelab (Mars Photos), enquanto o Coil carrega imagens, o aplicativo exibe uma roda de progresso. O código usa este arquivo XML como um drawable:

insira a descrição da imagem aqui

e usa este código para exibi-lo:

@Composable
fun LoadingScreen(modifier: Modifier = Modifier) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier.fillMaxSize()
    ) {
        Image(
            modifier = Modifier.size(200.dp),
            painter = painterResource(R.drawable.loading_img),
            contentDescription = stringResource(R.string.loading)
        )
    }
}

No entanto, isso só exibe uma imagem estática. Quero que ela gire (o que eu certamente esperava como comportamento). Pensei em algumas abordagens, nenhuma das quais eu gosto muito:

  • Defina 12 arquivos XML semelhantes, um para cada grau de rotação, e exiba cada um continuamente em sequência
  • Gere dinamicamente o XML e de alguma forma o converta em um pintor na hora
  • Use Coil para carregar um GIF

Existe uma maneira mais simples de realizar essa tarefa? Existe uma maneira de rotacionar a imagem em si programaticamente, como aplicar um modo de animação predefinido de algum tipo (talvez semelhante ao basicMarquee)?

android-jetpack-compose

1 respostas

  1. Best Answer

    Aqui está o código para o mesmo. Este código foi retirado de https://github.com/SmartToolFactory/Compose-ProgressIndicator e tem muitas outras animações de visualização de progresso circular girando.

    @Composable
fun SpinningProgressIndicator(
    modifier: Modifier = Modifier,
    @androidx.annotation.IntRange(from = 4, to = 12) staticItemCount: Int = 12,
    dynamicItemCount: Int = staticItemCount / 2,
    staticItemColor: Color = StaticItemColor,
    dynamicItemColor: Color = DynamicItemColor,
    spinnerShape: SpinnerShape = SpinnerShape.RoundedRect,
    durationMillis: Int = 1000
) {

    // Number of rotating items
    val animatedItemCount = dynamicItemCount.coerceIn(1, staticItemCount)

    val coefficient = 360f / staticItemCount

    val infiniteTransition = rememberInfiniteTransition()
    val angle by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = staticItemCount.toFloat(),
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = durationMillis,
                easing = LinearEasing
            ),
            repeatMode = RepeatMode.Restart
        )
    )

    Canvas(modifier = modifier
        .progressSemantics()
        .size(Size)
    ) {

        var canvasWidth = size.width
        var canvasHeight = size.height

        if (canvasHeight < canvasWidth) {
            canvasWidth = canvasHeight
        } else {
            canvasHeight = canvasWidth
        }

        val itemWidth = canvasWidth * .3f
        val itemHeight = canvasHeight / staticItemCount

        val cornerRadius = itemWidth.coerceAtMost(itemHeight) / 2

        val horizontalOffset = (size.width - size.height).coerceAtLeast(0f) / 2
        val verticalOffset = (size.height - size.width).coerceAtLeast(0f) / 2

        val topLeftOffset = Offset(
            x = horizontalOffset + canvasWidth - itemWidth,
            y = verticalOffset + (canvasHeight - itemHeight) / 2
        )

        val size = Size(itemWidth, itemHeight)

        // Stationary items
        for (i in 0..360 step 360 / staticItemCount) {
            rotate(i.toFloat()) {
                    drawRect(
                        color = staticItemColor,
                        topLeft = topLeftOffset,
                        size = size,
                    )
            }
        }

        // Dynamic items
        for (i in 0..animatedItemCount) {
            // angle is cast to into move in intervals of static items
            rotate((angle.toInt() + i) * coefficient) {
                    drawRect(
                        color = dynamicItemColor.copy(
                            alpha = (0.2f + 0.15f * i).coerceIn(
                                0f, 1f
                            )
                        ),
                        topLeft = topLeftOffset,
                        size = size,
                    )
            }
        }
    }
}

    val infiniteTransition = rememberInfiniteTransition()é usado para animação de transição infinita e RepeatMode.Restart significa que a animação reinicia, dando uma sensação de animação infinita.

    rotate((angle.toInt() + i) * coefficient) {onde você gira os itens. Todos os cálculos de ângulos são em radianos.

    Você pode personalizar isso conforme suas necessidades. Você não precisa de uma imagem. Desenhe linhas ou retângulos e anime alguns deles girando-os.

    • 3

relate perguntas