如何在运行时更新 LottieCompose ClipSpec

Question

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

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

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

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文档中了解有关状态的更多信息，包括此 YouTube 视频，其中解释了基本原理。

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