对于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
欢迎搜索并关注 公众号「稀有猿诉」 获取更多的优质文章!
保护原创,请勿转载!