在Jetpack Compose中为待办清单勾选图标集成LottieAnimation交互动效

当然可以，用LottieAnimation替换原有Icon并实现点击触发的勾选动画完全可行，下面是具体实现步骤和适配你现有布局的代码示例：

1. 添加Lottie Compose依赖 #

在你的模块级build.gradle.kts（或build.gradle）中添加最新版本的Lottie Compose依赖：

dependencies {
    implementation "com.airbnb.android:lottie-compose:6.4.0"
}

2. 准备动画资源 #

将你的勾选动画JSON文件放入src/main/res/raw目录（如果没有raw文件夹，直接在res下新建即可）。

3. 替换Icon并实现点击触发逻辑 #

结合你现有的Row布局，通过Lottie的状态控制实现点击播放动画的效果：

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.airbnb.lottie.compose.LottieAnimation
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.animateLottieCompositionAsState
import com.airbnb.lottie.compose.rememberLottieComposition

@Composable
fun TodoListItem(title: String, subtitle: String) {
    // 记录待办项的完成状态
    var isCompleted by remember { mutableStateOf(false) }
    // 加载Lottie动画资源
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.check_anim))
    // 控制动画播放状态
    val progress by animateLottieCompositionAsState(
        composition = composition,
        isPlaying = isCompleted,
        restartOnPlay = true, // 每次切换状态都重新播放动画
        iterations = 1 // 单次播放，而非循环
    )

    Row(
        modifier = Modifier
            .clickable { isCompleted = !isCompleted }
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 替换原有Icon为Lottie动画
        LottieAnimation(
            composition = composition,
            progress = progress,
            modifier = Modifier.padding(end = 12.dp)
        )
        // 原有标题副标题Column
        Column {
            Text(text = title)
            Text(text = subtitle)
        }
    }
}

关键细节说明 #

• rememberLottieComposition：缓存动画加载结果，避免重复IO操作
• animateLottieCompositionAsState：通过isPlaying参数绑定完成状态，实现点击切换时自动播放动画
• 若需要在动画播放完成后执行额外逻辑（比如更新本地数据库），可以监听progress的变化：

LaunchedEffect(progress) {
    if (progress == 1f && isCompleted) {
        // 动画播放完成，执行后续操作
    }
}

内容的提问来源于stack exchange，提问作者Caped Crusader