如何在 Jetpack Compose 中为动态列表的元素设置动画？

Question

如何使用动画将列表元素过渡到新列表（可能大小不同）？

我有一个饼图，当它的切片（分数）发生变化时，我想将以前的分数动画化为新的分数。问题是，每次切片的数量都可能不同。

如果新切片的数量小于当前切片的数量，则当前的额外切片应从当前分数动画到

0

.
如果新切片的数量大于当前切片的数量，则新的额外切片应从

0

动画到它们的分数。

@Composable fun PieChartCompose(slices: List<Float>) {
    val transitionData = updateTransitionData(slices)
    val fractions = transitionData.fractions
    // Draw the pie with Canvas using the fractions
}

我目前用一个恒定大小的列表（10，所以切片不能超过 10）实现这个
（请注意，图表外观的初始动画可能与后续动画不同）：

data class TransitionData(val slices: List<State<Float>>)

enum class ChartState { INITIALIZED, CHANGED }

@Composable fun updateTransitionData(
    targetFractions: List<Float>
): TransitionData {
    val mutableState = remember { MutableTransitionState(ChartState.INITIALIZED) }
    mutableState.targetState = ChartState.CHANGED
    val transition = updateTransition(mutableState, label = "main-animation")
    
    val fractions = listOf(
        transition.animateFloat(label = "fraction-0-animation") {
            if (it == ChartState.INITIALIZED) 0f
            else targetSlices.getOrNull(0)?.fraction ?: 0f
        },
        // ...
        transition.animateFloat(label = "fraction-10-animation") {
            if (it == ChartState.INITIALIZED) 0f
            else targetSlices.getOrNull(10)?.fraction ?: 0f
        }
    )
    return remember(transition) { TransitionData(fractions) }
}

下面是一个示例图表，最初有两个切片，然后动画到一个切片
（第一个切片动画为单个新分数，第二个切片动画为

0

—
它们有点不一致，可能是因为插值和动画规范）：

var slices by mutableStateOf(listOf(0.3f, 0.7f))
PieChartCompose(slices)
slices = listOf(1f)

Answer 1

您可以尝试使用动态数量的

animateFloat

。

因为我们想要动画消失的分数，我们需要知道旧的分数列表（以防它比新的大）。
这就是为什么我将过渡状态更改为对分数列表进行操作的原因。我们可以访问“旧”状态并找到“最大”大小（比较新旧分数列表大小）。
初始状态是一个空列表，因此最初会有从零开始的第一个分数的动画。

在

animateFloat

中，我们尝试从目标

state

中获取分数，如果该位置的分数不再存在 - 则将其设为零，这样它就会消失。

我还在

remember(values) { }

中添加了

animatedFractions

更新值，这不需要工作，但它是为了优化。如果

values

的计数不会改变，那么所有现有对象将被重用并且

values

列表应该相同 - 那么我们不需要用新的

animatedFractions

对象更新

State

。

从

updateTransitionData

返回一个稳定的对象，里面有稳定的列表。我们只修改该列表内的对象。因为它是一个

SnapshotStateList

，所以它会负责刷新所有迭代它的

Composables

。

@Composable
fun updateTransitionData(
    targetFractions: List<Float>
): TransitionData {
    val mutableState = remember { MutableTransitionState(emptyList<Float>()) }
    mutableState.targetState = targetFractions
    val transition = updateTransition(mutableState, label = "main-animation")

    val maxFractionsSize = max(transition.currentState.size, targetFractions.size)
    val values = (0 until maxFractionsSize).map { index ->
        transition.animateFloat(label = "fraction-$index-animation") { state ->
            state.getOrNull(index) ?: 0f
        }
    }

    val animatedFractions = remember(transition) { SnapshotStateList<State<Float>>() }
    remember(values) {
        animatedFractions.clear()
        animatedFractions.addAll(values)
    }
    return remember(transition) { TransitionData(animatedFractions) }
}

这是一个快速的“线性”演示，动画放慢，遍历 4 个不同的分数列表：