对于Jetpack Compose来说动画是一个很大的话题，对应的API也比较繁杂，我们在前面一篇文章中介绍了最为常用的创建动画的方式，在此基础之上来学习一些更为复杂的动画玩法。
动画的本质：参数随时间变化
前面的文章提到过属性驱动动画，比如animateFloatAsState，本质上就是让数值随时间变化，数值再作为Composable的属性去驱动变幻，进而产生动画效果。那一坨animate*AsState都是通过一个animateValueAsState函数来实现的，这个函数是一个泛型，它可以把任意的数据类型转成随时间变化的动画状态。所以当遇到自定义的数据类型时，就可以使用animateValueAsState来驱动动画。这些属性动画函数animate*AsState是基于更底层的Animatable实现的。
使用Transition来组合属性动画
当动画比较复杂时，比如涉及多个属性的变化时，如果仍然使用animate*AsState那一坨，虽然也是可以行的，但会让代码和逻辑都混乱不堪，特别是如果要协调多个属性动画时就更为困难。这样实现还有一个更大的问题，那就是无法复用，理论上来说动画与UI应该解耦，即使没有动效UI也是可用的，动效也应该可以应用于不同的UI。
这时就可以使用Transition来管理和组合多个属性动画。但是Transition并不是像AnimatorSet那样的单纯的管理器，它其实是另一种概念的抽象，意为过渡，从一种状态过渡到另一种状态，状态变化的细节就是各种属性的变化。Transition支持泛型，也就是状态完全自定义，Transition定义了很多变更数值的方法如animateFloat，animateColor，animateDp等等可以用于更新不同的属性数值。前一篇文章中提到的所见即所得的动画函数（AnimatedVisibility，Crossfade和AnimatedContent）都是基于Transition来实现的。而Transition与属性动画函数animate*AsState并不一样，是基于更底层的Animation实现的。
Transition创建动画的具体步骤
Transition是对两个不同的状态之间过渡的封装，因此先要定义状态，基于动效的目标和特点定义状态即可，一般用枚举类型就行了，因为状态仅用于代表过渡中的一个时间点，并没有具体的意义。接下来，使用remember函数转成为Compose的State，以便能触发Recomposition，然后调用函数updateTransition来得到当前时刻的过渡状态：
enum class BoxState {
Collapsed,
Expanded
}
var currentState by remember { mutableStateOf(BoxState.Collapsed) }
val transition = updateTransition(currentState, label = "box state")
这三步是通用的，使用Transition时都一样。然后就是对于当前时刻过渡状态的去定义具体的属性数值，这步也是自定义的，看要实现的动效而定，可以使用扩展函数animate*来得到的具体的数值：
val rect by transition.animateRect(label = "rectangle") { state ->
when (state) {
BoxState.Collapsed -> Rect(0f, 0f, 100f, 100f)
BoxState.Expanded -> Rect(100f, 100f, 300f, 300f)
}
}
val borderWidth by transition.animateDp(label = "border width") { state ->
when (state) {
BoxState.Collapsed -> 1.dp
BoxState.Expanded -> 0.dp
}
}
最后，把得到的属性数值rect和borderWidth应用到Composable上即可。
Transition是支持创建子Transition
对于Composable结构复杂的情况时，还可以使用createChildTransition来为子布局创建Transition。这样就能够把Transition也按树形关系组织起来，以能让动效更加的协调。
使用Transition来封装动画
使用Transition最大的好处在于能够把动效封装起来以能复用：
enum class BoxState { Collapsed, Expanded }
// Holds the animation values.
private class TransitionData(
color: State<Color>,
size: State<Dp>
) {
val color by color
val size by size
}
// Create a Transition and return its animation values.
@Composable
private fun updateTransitionData(boxState: BoxState): TransitionData {
val transition = updateTransition(boxState, label = "box state")
val color = transition.animateColor(label = "color") { state ->
when (state) {
BoxState.Collapsed -> Color.Gray
BoxState.Expanded -> Color.Red
}
}
val size = transition.animateDp(label = "size") { state ->
when (state) {
BoxState.Collapsed -> 64.dp
BoxState.Expanded -> 128.dp
}
}
return remember(transition) { TransitionData(color, size) }
}
创建好的Transition可以用于任意的Composable：
@Composable
fun AnimatingBox(
modifier: Modifier = Modifier.fillMaxSize()
) {
var boxState by remember { mutableStateOf(BoxState.Expanded) }
val transitionData = updateTransitionData(boxState)
// UI tree
Box(
modifier = Modifier
.background(transitionData.color)
.size(transitionData.size)
.clickable {
boxState =
if (boxState == BoxState.Expanded) BoxState.Collapsed else BoxState.Expanded
}
)
}
@Composable
fun AnimatingColumn(
modifier: Modifier = Modifier.fillMaxSize()
) {
var boxState by remember { mutableStateOf(BoxState.Collapsed) }
LaunchedEffect(Unit) {
boxState = BoxState.Expanded
}
val transitionData = updateTransitionData(boxState)
Column(
modifier = Modifier
.background(transitionData.color)
.size(transitionData.size)
) {
Text("Apply to a column")
}
}
可以看一看AnimatedVisibility以及Crossfade和AnimatedContent的实现，它们都是基于Transition实现的。
动画的底层API
到现在我们已经学习了很多创建动画的方式，从封装的层次来说，最上层是所见即所得动画函数如AnimatedVisibility，Crossfade和AnimatedContent，它们是基于Transition实现的；属性动画函数animate*AsState是基于Animatable实现的。这些函数都是Composables，也就是必须在Composition环境中才能使用。而Animatable和Transition都是基于最底层的Animation实现的，Animatable和Animation类似于View系统中的Animator，管理着某种值随时间在两个状态之间变化。它们两个只与值和时间有关，与Composition无关，因此可以在任意上下文中使用。可以用官方提供的一张图，来搞清楚API之间的关系：
Animation是最为底层的API，它只管理着值随时间的变化，其余的事情像动画是否已开始，是否已结束都需要调用者自己管理。它使用起来相当的麻烦，除非有必要否则一般不建议直接使用这个对象，本文也不再讨论它。
可以重点研究一下Animatable，它是基于Animation的，但是封装的较为完整。它是基于协程的单个数值变化动画，它能保证数值的变化是连续的，不过它的主要方法如animateTo都是suspend的，意味着要在协程上下文中调用，比如启动动画就要用Animatable：
val color = remember { Animatable(Color.Gray) }
LaunchedEffect(ok) {
color.animateTo(if (ok) Color.Green else Color.Red)
}
Box(Modifier.fillMaxSize().background(color.value))
使用Animatable可以创建出很多富有创意的复杂动画，比如说多米诺式的顺次动画，以及并发动画。
多个部件顺次动画
多个部件的顺次动画也就是依次发生的动画，比如A，B，和C三个动画作用于不同的UI部件，A先启动，结束后B接着启动，结束后C再启动。比较常规的方式是使用动画回调，在前一个的结束回调中启动下一个，或者使用延时启动，B的启动延时设置为A的动画时长。
借助于Animatable，可以有更为优雅的方案，在同一个协程中依次调用不同的Animatable的animateTo函数就可以，让几个不同的Animatable依次启动了：
val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }
LaunchedEffect("animationKey") {
alphaAnimation.animateTo(1f)
yAnimation.animateTo(100f)
yAnimation.animateTo(500f, animationSpec = tween(100))
}
除了Transition以外，用多个Animatable也可以，我们只需要启动多个协程去执行animateTo即可：
val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }
LaunchedEffect("animationKey") {
launch {
alphaAnimation.animateTo(1f)
}
launch {
yAnimation.animateTo(100f)
}
}
集合性布局中的元素项动画
对于集合性布局来说，当其元素项发生变化时，会触发相应的动画效果，这就是item animations。我们只需要1）为每个子元素项定义一个集合中唯一标识的key；2）然后再调用扩展函数Modifier.aniamteItem；即可以在元素项变化时触发动画，它会子元素项出现，消失和发生替换时触发动画效果。
动画最佳实践
我们学习了这么多创建动画的方式，在实际项目中要遵守几个原则：1）尽可能优先使用Compose封装好的动画函数，不要重复造轮子；2）第二个就是要为每个动画设置一个label，所有的动画API都会有一个label参数，要尽可能为每个动画设置一个唯一的label，这个是用于Android Studio调试动画时的唯一标识。
再有就是动画会触发Recomposition，re-layout和re-draw，为了尽可能的避免减少re-layout和re-draw，要尽可能的使用已封装好的函数来修改属性，比如使用Modifier的扩展函数（如Modifier.graphicsLayer {}），而不是直接去改size或者padding。
References
- Animating Inside and Outside the Box with Jetpack Compose
- Value-based animations
- Animated vector images in Compose
- Advanced animation example: Gestures
欢迎搜索并关注 公众号「稀有猿诉」 获取更多的优质文章！
保护原创，请勿转载！
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
