android - 如何在运行时更新 LottieCompose ClipSpec

Question

我有一个 Lottie 动画，我想启动它，然后当它到达某个帧时，我想从 X 帧循环到 Y 帧。

我遇到的问题是我似乎无法弄清楚如何在运行时使用 LottieCompose 作为 clipSpec 更新 clipSpec无法重新分配。

我能够使用像这样的基于普通 XML 布局的 Lottie 来做到这一点，没有任何问题

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()
    }

}

这是我到目前为止的 LottieCompose 代码

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())

Answer 1

clipSpec 可以使用 animateLottieCompositionAsState 指定。您可以像 Compose 中的任何其他状态一样更新它:创建一个状态变量并使用一些操作/副作用更新它。

了解有关 Compose 中状态的更多信息 documentation ，包括this youtube video ，解释了基本原理。

getFrameForProgress 返回一个 Float 格式的帧，我不确定将其转换为 Int 并比较 equals 是否安全(是吗？保证每一帧都被渲染？在慢速设备上可能不会)，所以我的比较代码看起来不太好。

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw. sun_icon))
var clipSpec by remember { mutableStateOf<LottieClipSpec?>(null)}
val progress by animateLottieCompositionAsState(
    composition = composition,
    clipSpec = clipSpec,
    iterations = LottieConstants.IterateForever
)
LottieAnimation(
    composition = composition,
    progress = progress,
    modifier = Modifier.wrapContentSize()
)
var initialLoad by remember { mutableStateOf(true) }
if (initialLoad && composition?.getFrameForProgress(progress)?.let { it >= 15f } == true) {
    SideEffect {
        initialLoad = false
        clipSpec = LottieClipSpec.Frame(
            min = 15,
            max = 28
        )
    }
}