Jetpack Compose引导页AnimatedContent动画卡顿问题排查求助

问题描述 #

刚接触Jetpack Compose，开发带动画过渡效果的引导页时，使用AnimatedContent实现页面切换，但动画存在明显卡顿，无法准确定位问题。

相关代码 #

自定义过渡配置 #

val TransitionSpec: Any.() -> ContentTransform = {
    fadeIn(
        animationSpec = tween(
            durationMillis = 500,
            easing = FastOutLinearInEasing
        )
    ) + slideInHorizontally { it } togetherWith fadeOut(
        animationSpec = tween(
            durationMillis = 500,
            easing = FastOutLinearInEasing
        )
    ) + slideOutHorizontally { -it }
}

引导页核心组件 #

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun OnBoardingScreen(onBoardPage: Int, onBoardPageChange: (old: Int) -> Unit = {}) {
    // ... (onBoardList and other components)

    Column(
        modifier = Modifier,
    ) {
        TopLottieSec(onBoardPage = onBoardPage, onBoardList = onBoardList)
        BottomLottieSection(
            title = onBoardList[onBoardPage].title,
            description = onBoardList[onBoardPage].description,
            onBoardPage = onBoardPage
        ) {
            onBoardPageChange(onBoardPage)
        }
    }
}

@Composable
fun TopLottieSec(
    onBoardPage: Int,
    onBoardList: List<Onboard>,
) {
    Column(
        modifier = Modifier,
    ) {
        Box(
            modifier = Modifier
                .fillMaxHeight(0.35f),
            contentAlignment = Alignment.Center,
        ) {
            AnimatedContent(targetState = onBoardPage, transitionSpec = TransitionSpec ) {
                lootie(pageIndex = it)
            }
        }
    }
}

@Composable
fun lootie(pageIndex: Int, modifier: Modifier = Modifier) {
    // ... (lottieSpecList and other components)
    
    val lottiespec by remember(pageIndex) { mutableStateOf(lottieSpecList[pageIndex]) }
    val lottieComposition by rememberLottieComposition(lottiespec)

    LottieAnimation(
        composition = lottieComposition,
        modifier = modifier,
        iterations = LottieConstants.IterateForever
    )
}

Activity代码 #

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        VoxTheme {
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.background
            ) {
                var boardPage by remember { mutableStateOf(0) }
                var goToLogin by remember(boardPage) { mutableStateOf(boardPage > 5) }
                AnimatedContent(targetState = goToLogin) { Login ->
                    when (Login) {
                        true -> LoginScreen()
                        false -> OnBoardingScreen(
                            onBoardPage = boardPage,
                            onBoardPageChange = { boardPage = it + 1 },
                        )
                    }
                }
            }
        }
    }
}

已尝试的优化措施 #

• 调整TransitionSpec配置，卡顿问题未解决
• 真机测试排除模拟器性能影响，动画表现仍不理想
• 预加载Lottie组合列表，无明显改善

排查思路与优化建议 #

1. 分离Lottie加载与过渡动画 #

当前每次页面切换，AnimatedContent会重建lootie组件，Lottie的Composition加载/初始化可能在过渡期间抢占主线程资源，导致卡顿。建议提前预加载所有引导页的Lottie资源：

// 在OnBoardingScreen中预加载所有Lottie Composition
@Composable
fun OnBoardingScreen(onBoardPage: Int, onBoardPageChange: (old: Int) -> Unit = {}) {
    // 预加载所有Lottie资源，仅在组件初始化时执行一次
    val lottieCompositions = remember {
        lottieSpecList.map { spec ->
            rememberLottieComposition(spec)
        }
    }

    Column(modifier = Modifier) {
        TopLottieSec(onBoardPage = onBoardPage, lottieCompositions = lottieCompositions)
        // ... 其他组件
    }
}

// 修改TopLottieSec直接使用预加载的Composition
@Composable
fun TopLottieSec(
    onBoardPage: Int,
    lottieCompositions: List<State<LottieComposition?>>,
) {
    Column(modifier = Modifier) {
        Box(
            modifier = Modifier.fillMaxHeight(0.35f),
            contentAlignment = Alignment.Center,
        ) {
            AnimatedContent(targetState = onBoardPage, transitionSpec = TransitionSpec ) { page ->
                LottieAnimation(
                    composition = lottieCompositions[page].value,
                    modifier = Modifier,
                    iterations = LottieConstants.IterateForever
                )
            }
        }
    }
}

2. 简化Lottie组件的状态逻辑 #

原lootie组件中不必要的mutableStateOf会触发额外重组，直接简化：

@Composable
fun lootie(pageIndex: Int, modifier: Modifier = Modifier) {
    // 去掉不必要的mutableStateOf，直接取固定列表中的值
    val lottiespec = lottieSpecList[pageIndex]
    val lottieComposition by rememberLottieComposition(lottiespec)

    LottieAnimation(
        composition = lottieComposition,
        modifier = modifier,
        iterations = LottieConstants.IterateForever
    )
}

3. 优化过渡动画性能 #

• 替换tween为spring动画：Compose对物理模型的spring动画有专门优化，通常比tween更流畅

  val TransitionSpec: Any.() -> ContentTransform = {
      fadeIn(animationSpec = spring(stiffness = Spring.StiffnessMedium)) + slideInHorizontally { it } 
      togetherWith 
      fadeOut(animationSpec = spring(stiffness = Spring.StiffnessMedium)) + slideOutHorizontally { -it }
  }
  

• 降低过渡时长测试：暂时将durationMillis改为300ms，观察卡顿是否缓解，排除时长过长导致的渲染压力

4. 检查组件重组次数 #

使用Android Studio的Layout Inspector或Compose重组追踪工具，查看动画期间是否有组件频繁重组：

• 给BottomLottieSection添加key(onBoardPage)稳定化参数，避免不必要的重组
• 确保onBoardPageChange回调不会触发额外的状态更新

5. 优化Lottie动画本身 #

• 压缩Lottie文件：使用Lottie官方工具优化动画，减少图层数量、简化路径，降低渲染开销
• 限制Lottie绘制区域：给LottieAnimation添加Modifier.clipToBounds()，避免绘制可视区域外的内容
• 降低动画播放速度：如果动画过于复杂，可尝试设置speed = 0.8f减轻渲染压力

内容的提问来源于stack exchange，提问作者Ahmed El-Hady