Jetpack Compose中Lottie动画晚于界面元素加载的问题咨询

现象是否正常？ #

这是正常现象。Lottie动画需要异步解析对应的JSON资源（你这里是R.raw.menu_banner），解析过程需要一定时间；而按钮、网格这类Compose元素是直接基于本地资源或内存数据渲染，无需额外异步解析步骤，所以会先于Lottie动画显示。

修复方案 #

1. 预加载Lottie Composition #

将Lottie资源的解析提前到页面渲染之前，比如在应用启动阶段、或进入MenuScreen之前的父级Composable中完成解析，避免在Banner组件内才开始加载。

修改示例：

// 在父级Composable（如NavHost所在的顶层组件）中预加载
@Composable
fun MainScreen(navController: NavHostController) {
    // 提前加载并缓存Composition
    val bannerComposition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.menu_banner))
    
    NavHost(navController = navController, startDestination = "menu") {
        composable("menu") {
            MenuScreen(navController, bannerComposition)
        }
    }
}

// 修改MenuScreen和Banner，接收预加载的Composition
@Composable
fun MenuScreen(navController: NavHostController, bannerComposition: LottieComposition?) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(top = 30.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Banner(bannerComposition)
        StartButton()
        AlphabetGrid()
    }
}

@Composable
fun Banner(composition: LottieComposition?, modifier: Modifier = Modifier) {
    LottieAnimation(
        composition = composition,
        modifier = modifier.height(270.dp)
    )
}

2. 添加加载占位符 #

在Lottie未完成解析时，显示占位元素（比如静态截图、进度指示器），让界面过渡更自然，避免动画突然弹出。

修改示例：

@Composable
fun Banner(modifier: Modifier = Modifier) {
    val bannerLottieComposition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.menu_banner))
    val progress by animateLottieCompositionAsState(
        composition = bannerLottieComposition,
        isPlaying = true,
        iterations = LottieConstants.IterateForever
    )

    Box(modifier = modifier.height(270.dp)) {
        // 加载中显示占位
        if (bannerLottieComposition == null) {
            CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
            // 推荐：用动画第一帧的静态图作为占位，视觉更统一
            // Image(
            //     painter = painterResource(R.drawable.banner_first_frame),
            //     contentDescription = "Banner placeholder",
            //     modifier = Modifier.matchParentSize(),
            //     contentScale = ContentScale.Fit
            // )
        } else {
            LottieAnimation(
                composition = bannerLottieComposition,
                progress = progress,
                modifier = Modifier.matchParentSize()
            )
        }
    }
}

3. 优化Lottie文件体积 #

如果动画文件过大，解析时间会显著增加。可以通过以下方式优化：

• 用Lottie Editor移除不必要的图层、关键帧或动画片段
• 降低动画帧率（比如从60fps降到30fps）
• 减少颜色数量，简化渐变效果
• 导出时启用"Minify JSON"选项

内容的提问来源于stack exchange，提问作者Misha Kamskov