解锁 Jetpack Compose 懒列删除动画的流畅秘籍

2024-03-08 18:08:38

提升 Jetpack Compose 懒列删除动画平滑度的秘籍

导言：

在 Jetpack Compose 中使用懒列进行数据展示时，我们难免会遇到向左滑动删除元素时动画不够平滑的问题。这不仅影响用户体验，也对应用的美观度造成负面影响。本文将深入探讨导致此问题的根源，并提供行之有效的解决方案，帮助你实现平滑流畅的删除动画效果。

问题根源：

导致删除动画不够平滑的原因之一可能是 lazy 列中垂直排列的设置。如果在懒列中应用了 verticalArrangement = Arrangement.spacedBy(32.dp) 之类的设置，则额外的空间会干扰动画过程，导致元素在消失前发生明显的跳跃或抖动。

解决方案：

要解决此问题，我们可以采取以下步骤：

1. 重新审视垂直排列：

尝试移除或调整懒列的垂直排列，例如改为 Arrangement.Top 或 Arrangement.Bottom。这将消除额外的空间，确保动画更流畅。

2. 自定义删除动画：

我们可以重写动画的结束行为，使被删除的元素在动画完成后消失，而不是跳跃。这可以使用 AnimatedVisibility 或其他动画 API 来实现。

3. 检查 SwipeToDelete 实现：

确保 SwipeToDeleteContainer 正确处理删除后的动画。使用 animateContentSize 或其他动画技术可以实现平滑过渡。

示例代码：

下面是一个使用 AnimatedVisibility 重写删除动画的示例代码：

@Composable
fun <T> SwipeToDeleteContainer(
    item: T,
    onDelete: (T) -> Unit,
    animationDuration: Int = 500,
    content: @Composable (T) -> Unit
) {
    var isRemoved by remember { mutableStateOf(false) }
    val state = rememberDismissState(
        confirmValueChange = { value ->
            if (value == DismissValue.DismissedToStart) {
                isRemoved = true
                true
            } else {
                false
            }
        }
    )

    LaunchedEffect(key1 = isRemoved) {
        if (isRemoved) {
            delay(animationDuration.toLong())
            onDelete(item)
        }
    }

    AnimatedVisibility(
        visible = !isRemoved,
        exit = shrinkVertically(
            animationSpec = tween(durationMillis = animationDuration),
            shrinkTowards = Alignment.Top
        ) + fadeOut()
    ) {
        SwipeToDismiss(
            state = state,
            background = {
                DeleteBackground(swipeDismissState = state)
            },
            dismissContent = { content(item) },
            directions = setOf(DismissDirection.EndToStart)
        )
    }
}

其他注意事项：