如何使用Jetpack Compose创建动画？及替代ConstraintLayout的动画实现

嘿，我来帮你梳理这两个问题——先从Jetpack Compose的基础动画入手，再解决你替换ConstraintLayout并适配动画的需求。

Compose的动画体系是状态驱动的，核心思路就是让动画跟着状态值走，不用手动管理动画生命周期，这比传统View系统省心多了。我给你几个最常用的实现方式：

1. 基础属性动画：animate*AsState #

这是最入门的API，比如你想让一个组件的大小、透明度、位置随状态变化做动画，直接用对应的animateXxxAsState就行。举个缩放动画的例子：

@Composable
fun ScalingBox() {
    // 定义一个布尔状态，控制缩放开关
    var isScaled by remember { mutableStateOf(false) }
    // 根据状态计算目标缩放值，自动生成动画
    val scale by animateFloatAsState(if (isScaled) 1.5f else 1f, animationSpec = tween(500))

    Box(
        modifier = Modifier
            .size(100.dp)
            .scale(scale)
            .background(Color.Blue)
            .clickable { isScaled = !isScaled }
    )
}

点击蓝色方块，它就会平滑放大/缩小——这里的tween是动画规格，你可以调整时长、插值器（比如EaseInOut）。

2. 无限循环动画：rememberInfiniteTransition #

如果需要重复播放的动画（比如加载动画），用这个API：

@Composable
fun InfiniteRotation() {
    val infiniteTransition = rememberInfiniteTransition()
    val rotation by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            animation = tween(1000, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        )
    )

    Box(
        modifier = Modifier
            .size(60.dp)
            .rotate(rotation)
            .border(4.dp, Color.Red, CircleShape)
    )
}

这个红色边框的圆圈会一直匀速旋转。

3. 可见性动画：AnimatedVisibility #

如果要控制组件的显示/隐藏动画，直接用这个高阶组件，内置了淡入淡出、滑入滑出等效果：

@Composable
fun AnimatedVisibilityDemo() {
    var isVisible by remember { mutableStateOf(true) }

    Column {
        Button(onClick = { isVisible = !isVisible }) {
            Text(if (isVisible) "隐藏" else "显示")
        }
        AnimatedVisibility(
            visible = isVisible,
            enter = fadeIn() + slideInVertically(),
            exit = fadeOut() + slideOutVertically()
        ) {
            Text("我会带着动画出现/消失", modifier = Modifier.padding(top = 16.dp))
        }
    }
}

针对你提到的那个进阶Kotlin动画代码实验室场景，原来用ConstraintLayout实现的属性动画（比如组件移动、大小变化），在Compose里可以通过状态驱动+自定义动画规格来复刻。核心思路是：把原来ConstraintLayout中用ObjectAnimator控制的属性，换成Compose的状态变量+animate*AsState或Animatable来驱动。

举个类似场景的例子——假设原来的需求是让一个组件从屏幕左侧移动到右侧，同时改变透明度：

@Composable
fun CustomAnimationDemo() {
    // 定义状态：控制动画是否开始
    var startAnimation by remember { mutableStateOf(false) }
    // 动画驱动的X轴偏移量
    val offsetX by animateDpAsState(
        targetValue = if (startAnimation) 300.dp else 0.dp,
        // 自定义动画规格，和原来的ObjectAnimator参数对应
        animationSpec = tween(
            durationMillis = 1500,
            easing = FastOutSlowInEasing
        )
    )
    // 同时控制透明度
    val alpha by animateFloatAsState(
        targetValue = if (startAnimation) 1f else 0.3f,
        animationSpec = tween(1500)
    )

    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Box(
            modifier = Modifier
                .size(80.dp)
                .offset(x = offsetX)
                .alpha(alpha)
                .background(Color.Green)
        )
        Button(
            onClick = { startAnimation = !startAnimation },
            modifier = Modifier.align(Alignment.BottomCenter)
        ) {
            Text("启动/重置动画")
        }
    }
}

如果需要更复杂的动画（比如多个属性同步/顺序执行），可以用Animatable手动控制动画流程，比如：

@Composable
fun ComplexAnimation() {
    val coroutineScope = rememberCoroutineScope()
    val animatable = remember { Animatable(0f) }

    Button(onClick = {
        coroutineScope.launch {
            // 先放大到1.5倍，再缩小回1倍
            animatable.animateTo(1.5f, tween(500))
            animatable.animateTo(1f, tween(500))
        }
    }) {
        Text("执行复杂动画")
    }

    Box(
        modifier = Modifier
            .size(100.dp)
            .scale(animatable.value)
            .background(Color.Purple)
    )
}

总结一下：替换ConstraintLayout时，你只需要把原来布局中依赖约束的位置/大小属性，换成Compose的Modifier参数（比如offset、size、scale），然后用动画API绑定状态变量就能实现相同的动画效果。

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