Compose 动画 (五) : animateContentSize / animateEnterExit / Crossfade / AnimatedContent

1. 前言

AnimatedVisibility、animateXxxAsState、animateContentSize、Crossfade、AnimatedContent 这几个API，都是Compose的高级别动画API，是比较易用的。
上两篇文章我们已经介绍了AnimatedVisibility，这篇文章我们会介绍剩下的那几个API。

2. animateContentSize

使用animateContentSize，可让Compose组件大小发生变化的时候，具备动画的效果。

比如，我们以下面这个例子为例

var message by remember { mutableStateOf("Hello") }
Column {
    Button(onClick = {
        message += "Hello"
    }) {
        Text(text = "Change")
    }
    Spacer(modifier = Modifier.height(16.dp))
    Box(
        modifier = Modifier
            .background(Color.Blue)
            .padding(10.dp)
            .animateContentSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(text = message, color = Color.White)
    }
}

可以看到效果

当然，我们也可以给动画添加一些特效，比如回弹效果

var message by remember { mutableStateOf("Hello") }
Column {
    Button(onClick = {
        message += "Hello"
    }) {
        Text(text = "Change")
    }
    Spacer(modifier = Modifier.height(16.dp))
    Box(
        modifier = Modifier
            .background(Color.Blue)
            .padding(10.dp)
            .animateContentSize(spring(Spring.DampingRatioHighBouncy)),
        contentAlignment = Alignment.Center
    ) {
        Text(text = message, color = Color.White)
    }
}

关于回弹之类的animationSpec的动画效果，后续的文章会讲到，感兴趣的童鞋可以先关注一波。

注意：animateContentSize 在修饰符链中的位置顺序很重要。为了确保流畅的动画，请务必将其放置在任何大小修饰符（如 size 或 defaultMinSize）前面，以确保 animateContentSize 会将带动画效果的值的变化报告给布局。

3. animateEnterExit

animateEnterExit需要使用在AnimatedVisibility里面（直接或间接子项）。
我们可以使用Modifier.animateEnterExit为每个子项指定不同的动画效果。
比如这里添加的slide动画会覆盖AnimatedVisibility设置的fade动画。

var visible by remember {
        mutableStateOf(false)
    }
    AnimatedVisibility(
        visible = visible,
        enter = fadeIn(tween(durationMillis = 2000)),
        exit = fadeOut(tween(durationMillis = 2000))
    ) {
        Box(
            Modifier
                .fillMaxSize()
                .background(Color.Gray)
        ) {
            Box(
                Modifier
                    .align(Alignment.Center)
                    .animateEnterExit(
                        enter = slideInVertically(tween(durationMillis = 2000)),
                        exit = slideOutVertically(tween(durationMillis = 2000))
                    )
                    .sizeIn(minWidth = 64.dp, minHeight = 64.dp)
                    .background(Purple700)
            ) {
                //Content of the notification...
            }
        }
    }

    LaunchedEffect(key1 = Unit, block = {
        delay(2500)
        visible = true
    })

效果如下，这里动画的时长设为了2秒，可以看的更清楚一些

有时我们希望AnimatedVisibility内部每个子组件的过渡动画各不相同，
那么就要为AnimatedVisibility的enter与exit参数分别设置EnterTransition.None和ExitTransition.None，然后就可以在每个组件分别指定animateEnterExit了。

animateEnterExit 显示是试验性质的，将来可能会发生变化，也可能会被完全移除。

4. Crossfade

Crossfade用来将页面上显示的内容进行切换。
两个交替出现的组件进行渐变的切换，一个消失，而另一个显示出来。
动画效果是淡入淡出，并对尺寸进行处理 (瞬间改变)。
Crossfade只支持这一种动画效果，是对于AnimatedContent (我们下面会讲到) 的简化版本。

4.1 Crossfade的使用

我们来试一下

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    var showPicture by remember { mutableStateOf(false) }
    Crossfade(targetState = showPicture) {
        if (it) {
            Image(
                painter = painterResource(id = R.mipmap.photot1),
                modifier = Modifier.width(300.dp),
                contentDescription = null
            )
        } else {
            Box(
                Modifier
                    .height(300.dp * 9 / 16)
                    .width(300.dp)
                    .background(Color.Blue)
            )
        }
    }
    Spacer(modifier = Modifier.height(10.dp))
    Button(onClick = { showPicture = !showPicture }) {
        Text(text = "切换")
    }
}

显示效果

4.2 Crossfade尺寸不一致的情况

如果切换的两个组件，尺寸不一致，就会出现如下情况

如果转场前是大尺寸，转场后是小尺寸，会等转场快结束的时候，变成小尺寸
如果转场前是小尺寸，转场后是大尺寸，会在转场刚开始的时候，变成大尺寸

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    var showPicture by remember { mutableStateOf(false) }
    Crossfade(targetState = showPicture) {
        if (it) {
            Image(
                painter = painterResource(id = R.mipmap.photot1),
                modifier = Modifier.width(300.dp),
                contentDescription = null
            )
        } else {
            Box(
                Modifier
                    .size(60.dp)
                    .clip(RoundedCornerShape(30.dp))
                    .background(Color.Blue)
            )
        }
    }
    Spacer(modifier = Modifier.height(10.dp))
    Button(onClick = { showPicture = !showPicture }) {
        Text(text = "切换")
    }
}

效果如下所示

5. AnimatedContent

AnimatedContent用来控制多个组件的入场和出场，同时还能对入场和出场效果做定制
相当于是AnimatedVisibility和Crossfade的结合，AnimatedContent出入场动画效果的尺寸是渐变的，这个是区别于Crossfade的一个点。

AnimatedContent 显示是试验性质的，将来可能会发生变化，也可能会被完全移除。

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    var showPicture by remember { mutableStateOf(false) }
    AnimatedContent(showPicture) {
        if (it) {
            Image(
                painter = painterResource(id = R.mipmap.photot1),
                modifier = Modifier.width(300.dp),
                contentDescription = null
            )
        } else {
            Box(
                Modifier
                    .size(60.dp)
                    .clip(RoundedCornerShape(30.dp))
                    .background(Color.Blue)
            )
        }
    }
    Spacer(modifier = Modifier.height(10.dp))
    Button(onClick = { showPicture = !showPicture }) {
        Text(text = "切换")
    }
}

显示效果如下所示

5.1 实现数字增加的效果

使用AnimatedContent，设置自定义的动画效果，来实现数字增加的效果

Column {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }, Modifier.width(100.dp)) {
        Text("增加")
    }
    Button(onClick = { count-- }, Modifier.width(100.dp)) {
        Text("减少")
    }
    Box(
        Modifier
            .size(100.dp)
            .border(1.dp, Color.LightGray)
            .padding(5.dp)
            .background(Color(0xFFF5F5F5)), contentAlignment = Alignment.Center
    ) {
        AnimatedContent(targetState = count) { targetCount ->
            Text(text = "$targetCount", fontSize = 20.sp)
        }
    }
}

显示效果如下

我们给它设置一个自定义的动画效果

transitionSpec = {
    if (targetState > initialState) {
        slideInVertically { height -> height } + fadeIn() with
                slideOutVertically { height -> -height } + fadeOut()
    } else {
        slideInVertically { height -> -height } + fadeIn() with
                slideOutVertically { height -> height } + fadeOut()
    }.using(
        SizeTransform(clip = false)
    )
}

再次运行

6. Compose 动画系列

Compose 动画系列，后续持续更新
Compose 动画 (一) : animateXxxAsState 实现放大/缩小/渐变等效果
Compose 动画 (二) : 为什么animateDpAsState要用val ? MutableState和State有什么区别 ?
Compose 动画 (三) : AnimatedVisibility 从入门到深入
Compose 动画 (四) : AnimatedVisibility 各种入场和出场动画效果