Lottie + Jetpack Compose

Question

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

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

Lottie compose已发布：

依赖关系：

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

基本用法：

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

Lottie + Jetpack Compose

Lottie + Jetpack Compose

android

lottie

android-jetpack-compose