Jetpack Compose 动画性能问题

Question

我是 Jetpack Compose 的新手，我尝试在点击菜单按钮时用动画旋转主屏幕。运行3-5次都正常，但是突然就疯狂滞后，我不知道为什么？这是一个错误，还是我做错了什么？

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,
        )
    }
}

更新#1

我在logcat中找到了这个

跳过了 52 帧！应用程序可能在其主线程上做了太多工作。 戴维！持续时间=1067ms；标志 = 0，FrameTimelineVsyncId = 2511155，预期Vsync = 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，

更新#2

当我注释掉所有文本组件时，动画工作完美，反之亦然。那么文本组件出了什么问题？

Answer 1

请检查HomeScreen可组合项、组件重组计数。

我怀疑HomeScreen重组次数过多。

您只需将

@Composable HomeScreen

替换为

@Composeable Image

验证即可。

Answer 2

绘制文本是一项非常昂贵的操作，不仅在 Compose 中如此。文本通常由 CPU 绘制（串行），而图像由 GPU 操作（并行）。

查看“撰写图形概述”指南的绘制文本部分。它建议使用 Modifier.drawWithCache 来缓解在 DrawScope 中绘制文本时的昂贵问题。我不知道这在像您一样制作动画时是否有帮助。

此外，它也不能解释为什么你的动画几次工作正常，然后就滞后了。

在不同的上下文中，我以屏幕分辨率在位图上绘制了一次文本，然后将位图动画化为图像以提高速度。您可能想先尝试将主屏幕绘制为位图。