¿Cómo actualizo un clipSpec de LottieCompose en tiempo de ejecució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())
davy.ai
Para actualizar
clipSpec
en tiempo de ejecución conLottieCompose
, puedes utilizar una combinación deremember
yLaunchedEffect
para crear una instanciaAnimatable
deLottieComposition
y actualizar su propiedadclipSpec
cuando sea necesario.Aquí tienes un ejemplo de código:
En este ejemplo, definimos una instancia
Animatable
deLottieComposition
, lo que nos permite actualizar sus propiedades con el tiempo. Utilizamos una función de devolución de llamada para actualizar la propiedadclipSpec
cuando la animación alcanza los fotogramas de inicio y fin deseados.Luego, utilizamos un
LaunchedEffect
para iniciar la animación y pasamos la instanciaAnimatable
a él. La animación delAnimatable
se realiza mediante la funciónanimate
, 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
yprogress
al componenteLottieAnimation
, 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 funcionesanimatable.start()
yanimatable.stop()
.