![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5yY1YDMjBDM2ATMkFDZiRDNmljZyMjYyUGMkFTYzQTY18CX5EzLcVDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLzM3Lc9CX6MHc0RHaiojIsJye.png)
Node:本文基于Jetpack Compose 1.0.0-beta01
1. Animation是由state驱动的
Compose的核心思想状态驱动UI刷新,这一思想同样体现在动画上。
UI = f(state)
Compose动画主要是通过不断计算最新的state值来刷新UI,这类似于传统的<code>ValueAnimator</code>,根据动画的插值器和估值器计算当前value,在映射到View的对应属性。Compose天然是基于state驱动的,相关API变得更加简单、合理。
2. AnimateAsState:属性动画
<code>AnimateAsState</code>提供了传统的属性动画的能力。 如下代码,点击Button可以改变Box的颜色
如果想让Color以动画的方式切换,可以借助用<code>animateColorAsState</code>
<code>animateColorAsState</code>将Color的变化过程转换为一个可订阅的state;<code>animationSpec</code>用来进行动画配置,比如例子总配置了一个弹簧动画效果
<code>animationSped</code>还可以监听动画结束的回调
如上,可以实现折返动画的效果
除了AnimateColorAsState以外,还支持其他各类型的动画:
3. updateTransition:多个动画同步
如果想同时进行多个属性的动画,并保持同步,需要使用<code>updateTransition</code>,类似使用<code>AnimationSet</code>组合多个动画
<code>updateTransition</code>根据<code>targetState</code>创建一个Transition,然后通过Transition的扩展函数可以创建各种属性动画所需的state。
需要注意,Transition的codename容易跟传统的位移动画混淆,其实完全没有联系,这里的Transition是用来同步多个动画的工具。
<code>transitionSpec</code>可以进行动画配置,上面例子中,在Box放大和缩小过程中,分别设置不同的弹性动画效果。
同样,Transition根据属性类型的不同,有多种扩展函数
4. AnimateVisibility:可见性动画
在View的可见性发生变化时做动画是一个常见需求。传统的View体系中,一般使用<code>alpha</code>值变化实现<code>fadeIn/fadeOut</code>,或者通过<code>transitionX/Y</code>的变化,实现<code>slideIn/slideOut</code>
Compose中则使用<code>AnimatedVisibility</code>
如上,默认的可见性动画效果是淡入/淡出 + 收缩/放大:
5. AnimateContentSize : 布局大小动画
<code>animateContentSize</code>是<code>Modifier</code>的扩展方法,添加这个方法的Composable,会监听子Composable大小的变化,并以动画方式作成相应调整
<code>animateContentSize</code>同样可以配置<code>animSpec</code>以及<code>endListener</code>:
6. Crossfade : 布局切换动画
<code>Crossfade</code> 本身是一个<code>Composable</code>,其内部的子布局发生切换时,可以添加淡入淡出效果:
参考
Sample Code