![](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