Jetpack Compose菜单触发屏幕旋转动画多次后卡顿问题求助

我是Jetpack Compose新手，尝试点击菜单按钮时为主页添加旋转动画。该动画前3-5次运行正常，但突然会出现严重卡顿。日志显示应用主线程工作量过大，且注释所有文本组件后动画运行流畅，请问这是Bug还是我代码存在问题？

日志信息 #

Skipped 52 frames! The application may be doing too much work on its main thread.
Davey! duration=1067ms; Flags=0, FrameTimelineVsyncId=2511155, IntendedVsync=4294436921331, Vsync=4294870254647, InputEventId=0, HandleInputStart=4294871069349, AnimationStart=4294871070287, PerformTraversalsStart=4294871939089, DrawStart=4294872039558, FrameDeadline=4294486921330, FrameInterval=4294870971954, FrameStartTime=41666666, SyncQueued=4294872645860, SyncStart=4295312217578, IssueDrawCommandsStart=4295312304089, SwapBuffers=4295937520703, FrameCompleted=4295944298047, DequeueBufferDuration=5729, QueueBufferDuration=166719, GpuCompleted=4295944298047, SwapBuffersCompleted=4295937862943, DisplayPresentTime=4237530536663, CommandSubmissionCompleted=4295937520703,

相关代码 #

var isOpen by remember { mutableStateOf(false) }
val transition = updateTransition(targetState = isOpen, "Menu")

val rotation by transition.animateFloat(
    transitionSpec = { spring(0.4f, Spring.StiffnessLow) },
    label = "MenuRotation",
    targetValueByState = { if (it) -30f else 0f }
)

val scale by transition.animateFloat(
    label = "MenuScale",
    targetValueByState = { if (it) 0.9f else 1f }
)

val translateX by transition.animateFloat(
    transitionSpec = { tween(400) },
    label = "MenuTranslation",
    targetValueByState = { if (it) 536f else 0f }
)

Box(
    modifier = Modifier
        .fillMaxSize()
        .graphicsLayer {
            cameraDistance = density * 10f
            rotationY = rotation
            scaleX = scale
            translationX = translateX
        }
) {
    HomeScreen()
}

Box {
   DefaultButton(
        onClick = { isOpen = ! isOpen },
        modifier = Modifier
            .padding(16.dp)
            .padding(top = 32.dp)
            .shadow(blur = 8.dp, radius = 16.dp)
            .size(32.dp, 32.dp),
        shape = Shapes.large,
    ) {
        Icon(
            imageVector = if (isOpen) Icons.Filled.Close else Icons.Filled.Menu,
            contentDescription = "Menu",
            tint = Color.Black,
        )
    }
}

这不是Jetpack Compose的Bug，是代码实现导致的性能问题，核心原因是动画执行时HomeScreen内的文本组件频繁重绘/重组，占用主线程过多资源。

原因拆解 #

• 你通过graphicsLayer给包裹HomeScreen的Box添加了旋转、缩放、平移动画，这些动画会触发Box及其子组件（HomeScreen）每帧都进行重组与绘制。
• 文本组件在Compose中对重组敏感度高，尤其是包含大量文本或复杂排版时，每帧重新计算布局、渲染文本会快速耗尽主线程帧时间，引发卡顿。

解决办法 #

1. 启用graphicsLayer硬件缓存
   让Compose把HomeScreen内容缓存为位图，动画时仅对位图做变换，避免子组件每帧重组。新版本Compose推荐用RenderEffect：

   .graphicsLayer {
       cameraDistance = density * 10f
       rotationY = rotation
       scaleX = scale
       translationX = translateX
       renderEffect = RenderEffect.createCacheEffect()
   }
   

   旧版本可使用：

   .graphicsLayer(
       cameraDistance = density * 10f,
       rotationY = rotation,
       scaleX = scale,
       translationX = translateX,
       cacheInBitmap = true
   )
   

2. 优化HomeScreen重组行为

   • 给HomeScreen内的文本组件用remember或derivedStateOf缓存计算逻辑，避免无关重组。
   • 若HomeScreen是复杂组件，给内部数据类添加@Immutable注解，或用rememberSaveable缓存状态，减少不必要的重组触发。

3. 统一动画过渡规格
   当前混合了spring和tween动画，不同动画帧率不一致会增加主线程帧更新压力，可统一动画类型：

   val rotation by transition.animateFloat(
       transitionSpec = { tween(400) },
       label = "MenuRotation",
       targetValueByState = { if (it) -30f else 0f }
   )
   

验证方式 #

修改后重新运行动画，观察日志是否仍有主线程卡顿提示。既然注释文本组件后动画流畅，缓存优化应该能解决问题。

内容的提问来源于stack exchange，提问作者Wael ElSawy