在 Jetpack Compose 中為 Icon 使用 LottieAnimation

Question

有沒有什么方法可以在 Jetpack Compose 中使用 LottieAnimation 將 JSON animation 文件用於交互式元素，例如待辦事項列表的復選標記，以便在單擊時設置動畫？

我目前有一個帶有圖標的行和一個進一步包含標題和副標題的列。 我希望這個圖標有一個 Lottie Animation。

Answer 1

您可以使用LottieAnimation可組合項。

就像是：

var isPlaying by remember { mutableStateOf(false) }

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
val progress by animateLottieCompositionAsState(
    composition,
    isPlaying = isPlaying,
)

Row(verticalAlignment = Alignment.CenterVertically) {
    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.clickable{ isPlaying = !isPlaying }
    )

    Text("Title", )
}