如何在 Jetpack Compose 中从 Alignment.Start 到 Align.End 设置动画？

Question

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

Answer 1

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

如果您查看Alignment.kt 文件，您可以看到Start、End 等值通常是基于bias 的概念实现的（这个概念也用于例如ConstraintLayout)。偏置-1代表开始，1代表结束，0是中心。

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

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

不幸的是，Alignment 接口在继承方面以及它作为公共值公开的内容方面很复杂（例如，您无法从像 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 时也不能传递它。您可以更改此方法以返回 BiasAlignment，或者为这种类型的对齐创建另一个具有两个偏差值的方法。