在Jetpack Compose中如何实现从Alignment.Start到Alignment.End的位移动画？

直接用Compose内置的animateValueAsState结合Alignment类型转换器即可实现，不需要手动计算组件位移距离，代码非常简洁：

基础实现步骤 #

• 首先定义触发对齐切换的状态，以及对应的动画对齐值

// 切换触发状态，true为对齐End，false为对齐Start
var alignToEnd by remember { mutableStateOf(false) }
// 对Alignment类型做自动动画过渡，Compose内置了对应类型转换器
val animatedAlign by animateValueAsState(
    targetValue = if (alignToEnd) Alignment.End else Alignment.Start,
    // 自定义动画规格，比如这里用800ms的缓动动画，也可以换成spring等其他效果
    animationSpec = tween(800, easing = FastOutSlowInEasing)
)

• 在Box布局中给需要位移的组件绑定动画后的对齐值即可

Column(modifier = Modifier.padding(24.dp)) {
    // 父容器用Box，支持子组件调用align修饰符
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(60.dp)
            .background(Color(0xFFE0E0E0))
    ) {
        // 要做位移动画的组件
        Box(
            modifier = Modifier
                .size(50.dp)
                .background(Color(0xFF2196F3))
                // 直接绑定动画后的对齐值
                .align(animatedAlign)
        )
    }
    // 测试切换按钮
    Button(
        onClick = { alignToEnd = !alignToEnd },
        modifier = Modifier.padding(top = 16.dp)
    ) {
        Text("切换对齐位置")
    }
}

进阶可控实现 #

如果需要手动控制动画的启停、进度，或者要和其他动画做联动，可以用Animatable实现：

var alignToEnd by remember { mutableStateOf(false) }
val alignAnimatable = remember {
    Animatable(
        initialValue = Alignment.Start,
        typeConverter = Alignment.VectorConverter
    )
}
// 状态变化时触发动画
LaunchedEffect(alignToEnd) {
    alignAnimatable.animateTo(
        targetValue = if (alignToEnd) Alignment.End else Alignment.Start,
        animationSpec = spring(stiffness = Spring.StiffnessMediumLow)
    )
}

// 使用时直接取alignAnimatable.value绑定到align修饰符即可
Box(modifier = Modifier.align(alignAnimatable.value)) {
    // 组件内容
}

注意事项 #

• 该方案支持所有Alignment枚举值的切换动画，包括横向、纵向、中心对齐的任意组合
• 如果需要在Row/Column中实现类似效果，也可以用animateDpAsState绑定padding/offset属性实现，不过Box+animateValueAsState的方案不需要手动计算位移距离，维护成本更低
• 对齐动画可以和其他属性动画（大小、透明度、圆角等）并行使用，Compose会自动合并动画帧，不会出现冲突卡顿

内容的提问来源于stack exchange，提问作者Gak2