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

Question

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

Answer 1

这种动画没有内置支持，但可以实现。
如果你看看Alignment.kt文件，你可以看到像 Start 这样的值, End通常是基于偏差的概念来实现的(这个概念也用于例如 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接口(interface)在继承和它作为公共(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 时无法通过是期待。您可以更改此方法以返回 BiasAlignment或者为这种类型的对齐创建另一个具有两个偏差值的对齐。