Lottie + Jetpack 组合答案

【问题标题】：Lottie + Jetpack ComposeLottie + Jetpack 组合
【发布时间】：2020-07-13 18:09:29
【问题描述】：

如何在 Android 中结合使用 Lottie json 动画和 Jetpack Compose UI？我已经尝试过AndroidView(resId = R.layout.animation)com.airbnb.lottie.LottieAnimationView 和字段lottie_rawRes 在哪里，但这是最好的方法吗？

【问题讨论】：

标签： android lottie android-jetpack-compose

【解决方案1】：

Lottie compose已发布：

依赖：

implementation "com.airbnb.android:lottie-compose:$lottie_version"

基本用法：

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.my_animation))
LottieAnimation(composition)

【讨论】：

【解决方案2】：

截至 compose 版本 alpha05，Lottie 似乎工作正常：

@Composable
fun CustomView(modifier: Modifier = Modifier
        .fillMaxWidth()) {
    val visibility = remember { mutableStateOf(0) }
    val context = ContextAmbient.current
    val customView = remember { LottieAnimationView(context) }
    // Adds view to Compose
    AndroidView({ customView }) { view ->
        // View's been inflated - add logic here if necessary
        with(view) {
            setAnimation(R.raw.choose)
            playAnimation()
            repeatMode = LottieDrawable.INFINITE
            foregroundGravity = Gravity.CENTER
        }
    }
}

【讨论】：

【解决方案3】：

对 Lottie 的一流支持尚未实现，但最终会实现。

【讨论】：

【解决方案4】：

我不确定这是否是最好的方法，但这是当前推荐的在 @Composable 函数中包含 Android View 的方法。

@Composable
fun <T : View> AndroidView(
    viewBlock: (Context) -> T,
    modifier: Modifier = Modifier,
    update: (T) -> Unit = NoOpUpdate
)

【讨论】：

【解决方案5】：

他们似乎正在努力：https://github.com/airbnb/lottie-android/commits/gpeal/compose-1

【讨论】：