如何在 Jetpack Compose 中制作从 Aligment.Start 到 Align.End 的动画？

Question

希望这是一个简单的问题，但任何人都知道如何根据对齐方式为可组合项的位置设置动画，例如从 Alignment.Start 到 Alignment.End ?

Answer 1

没有对这种动画的内置支持，但可以实现它。

如果您查看 Alignment.kt 文件，您会发现像 Start、End 这样的值通常是基于 bias[ 的概念实现的=50=]（这个概念也用在例如ConstraintLayout）。偏置-1代表start，1代表end 0 是 center.

val Start: Alignment.Horizontal = BiasAlignment.Horizontal(-1f)
val CenterHorizontally: Alignment.Horizontal = BiasAlignment.Horizontal(0f)
val End: Alignment.Horizontal = BiasAlignment.Horizontal(1f)

由于偏差只是一个数字，我们可以将这个问题简化为简单地为浮点值设置动画。

不幸的是，Alignment 接口在继承和它公开的 public 值方面很复杂（例如，您无法从 Alignment.Start 等值中读取水平偏差）。这使得创建通用解决方案变得困难。

但如果您只关心 Alignment.Horizontal，您可以创建动画水平偏差的函数并从中创建 BiasAlignment.Horizontal 对象：

@Composable
private fun animateHorizontalAlignmentAsState(
    targetBiasValue: Float
): State<BiasAlignment.Horizontal> {
    val bias by animateFloatAsState(targetBiasValue)
    return derivedStateOf { BiasAlignment.Horizontal(bias) }
}

这是使用示例，当每次点击 Column

时切换（取消）水平对齐偏差

var horizontalBias by remember { mutableStateOf(-1f) }
val alignment by animateHorizontalAlignmentAsState(horizontalBias)

Column(
    modifier = Modifier
        .fillMaxWidth()
        .clickable { horizontalBias *= -1 },
    horizontalAlignment = alignment
) {
    Text("Test")
}

请注意，您不能将 BiasAlignment.Horizontal 传递给期望 Alignment.Horizontal 的对象，并且在期望 Alignment 时也不可能传递它。您可以将此方法更改为 return BiasAlignment 或为此类具有两个偏差值的比对创建另一种方法。