android 如何在Jetpack Compose中每次从头开始播放Lottie动画

6uxekuva  于 2023-03-11  发布在  Android
关注(0)|答案(2)|浏览(236)

我有一个屏幕显示一个洛蒂动画;然而,屏幕的内容会改变,动画也会改变。我只显示一次动画,我需要当屏幕的内容更新(重组)时,更新的动画开始播放。目前,第一个动画一直播放到最后,当内容改变时,第二个动画只显示一个静态图像,我假设这是它的最后一帧。
下面是我使用的代码片段:

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))
val progress by animateLottieCompositionAsState(composition = composition)
LottieAnimation(
    composition = composition,
    progress = { progress },
    modifier = modifier
)

我试过将进度设置为0F,但由于我看不到任何内容,动画无法加载或播放,但可能这只是第一帧,这将是以下代码片段:

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))
LottieAnimation(
    composition = composition,
    progress = { 0F },
    modifier = modifier
)

我的目标是显示两个动画从一开始,无论第一个完成与否。任何想法?

dgiusagp

dgiusagp1#

您正在记住Lottie动画状态,因此在重新合成后,它将不会再次播放,因为它的状态已进入结束阶段并传递到下一个合成。
您是否尝试过设置isPlaying参数?

val composition by rememberLottieComposition(...)
val animationState by animateLottieCompositionAsState(
    composition = composition, 
    isPlaying = true
)

LottieAnimation(
    composition = composition,
     progress = { animationState },
     modifier = modifier
)

UPD:您也可以简单地删除animationState记忆。

val composition by rememberLottieComposition(...)

LottieAnimation(
    composition = composition,
)

UPD2:因为Compose可以优化重组,并且只重组实际发生变化的内容,所以你的Lottie动画可能根本没有重组。也许你应该这样循环

val animationState by animateLottieCompositionAsState(
    composition = composition, 
    iterations = LottieConstants.IterateForever
)
6vl6ewon

6vl6ewon2#

我也遇到过同样的问题,用key元素 Package 可组合对象就解决了这个问题。
所以在你的情况下,看起来

val key = remember { mutableStateOf(dynamicAnimationRes) }
if (key.value != dynamicAnimationRes) {
    key.value = dynamicAnimationRes
}

key(key.value) {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))
    LottieAnimation(
        composition = composition,
        modifier = modifier
    )
}

希望能有所帮助!

相关问题