es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo actualizo un clipSpec de LottieCompose en tiempo de ejecución?

19 Jul, 2023 Programación

Tengo una animación de Lottie que quiero iniciar y luego, cuando llegue a cierto fotograma, quiero hacer un ciclo desde el fotograma X hasta el fotograma Y.

El problema con el que me estoy encontrando es que no puedo averiguar cómo actualizar el clipSpec en tiempo de ejecución con LottieCompose, ya que no se puede reasignar clipSpec.

Pude hacer esto sin problemas con el diseño XML normal basado en Lottie, así:

loading_animation.addAnimatorUpdateListener {
    if (initialLoad && loading_animation.frame == 15) {
        initialLoad = false
        startTime = System.currentTimeMillis()
        loading_animation.setMinAndMaxFrame(15, 28)
    }

    if (!initialLoad && authenticated && System.currentTimeMillis() >= (startTime+1000)) {
        loading_animation.pauseAnimation()
        startActivity()
    }
}

Aquí está mi código de LottieCompose hasta ahora:

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.sun_icon))
val animatable = rememberLottieAnimatable()
val progress by animateLottieCompositionAsState(composition, iterations = LottieConstants.IterateForever)
LottieAnimation(composition = composition, progress = progress, modifier = Modifier.wrapContentSize())
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para actualizar clipSpec en tiempo de ejecución con LottieCompose, puedes utilizar una combinación de remember y LaunchedEffect para crear una instancia Animatable de LottieComposition y actualizar su propiedad clipSpec cuando sea necesario.

    Aquí tienes un ejemplo de código:

    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.sun_icon))

val animatable = remember {
    Animatable(composition) { startFrame, endFrame ->
        // Actualiza clipSpec cuando startFrame y endFrame cumplan tu criterio
        if (startFrame == X && endFrame == Y) {
            val oldClipSpec = it.clipSpec
            val newClipSpec = LottieProperty.ClipSpec.FrameSpec(startFrame, endFrame)
            if (oldClipSpec != newClipSpec) {
                it.clipSpec = newClipSpec
                true // Indica que el Animatable debe ser recomputado
            } else {
                false
            }
        } else {
            false
        }
    }
}

val progress by animateLottieCompositionAsState(
    animatable.value.composition,
    iterations = LottieConstants.IterateForever
)

LaunchedEffect(animatable) {
    // Inicia la animación
    animatable.animate(
        initialValue = 0f,
        targetValue = animatable.value.durationFrames.toFloat(),
        animationSpec = infiniteRepeatable(
            tween(durationMillis = animatable.value.durationMillis.toInt()),
            repeatMode = RepeatMode.Reverse
        )
    )
}

LottieAnimation(
    composition = animatable.value.composition,
    progress = progress,
    modifier = Modifier.wrapContentSize()
)

    En este ejemplo, definimos una instancia Animatable de LottieComposition, lo que nos permite actualizar sus propiedades con el tiempo. Utilizamos una función de devolución de llamada para actualizar la propiedad clipSpec cuando la animación alcanza los fotogramas de inicio y fin deseados.

    Luego, utilizamos un LaunchedEffect para iniciar la animación y pasamos la instancia Animatable a él. La animación del Animatable se realiza mediante la función animate, que toma un valor inicial y un valor objetivo, y una especificación de animación que define la duración y el tiempo de la animación.

    Finalmente, pasamos los valores composition y progress al componente LottieAnimation, que muestra la animación.

    Ten en cuenta que el LaunchedEffect iniciará y detendrá automáticamente la animación cuando el composable se componga y descomponga, respectivamente. Para iniciar y detener manualmente la animación, puedes utilizar las funciones animatable.start() y animatable.stop().

Comments are closed.