Compose中的動畫API概覽及使用方法

我們將通過本文介紹 Compose 中的一些動畫 API，并探討如何有效地使用它們。Compose 中的動畫 API 是我們構想的全新 API，這些 API 中有許多是聲明式的，您可以利用聲明式的方式簡潔地定義動畫。

這些動畫 API 支持中斷，當運行中的動畫被另一個動畫打斷時，運行中動畫的值會帶入到新動畫中。新 API 簡單易用，配置了合理的默認行為，可開箱即用，也可高度定制。同時 Android Studio 還提供了強大的工具，可以幫助您制作復雜動畫。

Compose 動畫概覽

我們先從一個簡單例子開始。下圖是一個貓咪圖標，當我們點擊按鈕時，它會在隱藏和顯示這兩種狀態(tài)間進行切換:

在 Compose 中，實現(xiàn)這一效果非常簡單。首先我們聲明一個布爾類型的 State 變量——visible，在每次點擊按鈕時，它的值都會被切換，而它的任何變化都會觸發(fā)重組，貓咪圖標也會隨之出現(xiàn)或消失:

var visible by remember { mutableStateOf(true) } Column {        Button(onClick = { visible = !visible }) {                Text("Click")        }         if (visible) {                  CatIcon( )        }}

現(xiàn)在，如果我們想將此過程轉變?yōu)閯赢?，則只需將 if 語句替換為 AnimatedVisibility 可組合項即可。當 State 的值發(fā)生改變時，AnimatedVisibility 可組合項會以其狀態(tài)運行動畫:

…AnimatedVisibility (visible) {         CatIcon( )}…

還有一個 API 與 AnimatedVisibility 非常相似，那就是 AnimatedContent。AnimatedVisibility 的運行基于內容的進入和退出，而 AnimatedContent 則可為內容的變化生成過渡動畫。

在下面的例子中，當我們點擊按鈕時，計數會隨淡出和淡入效果而增加:

AnimatedContent 的 State 參數可以是任何類型，在本示例中，我們使用名為 count 的整型 State，在點擊按鈕時，其數值會隨之增加。而每次 State 發(fā)生變化時，AnimatedContent 就會運行動畫。

Row {       var count by remember { mutableStateOf (0) }        Button(onClick = { count++ }) {               Text("Add")       }       AnimatedContent (targetState = count) { targetCount ->              Text("Count: $targetCount")       }}

我們可以使用 lambda 參數，基于輸入的 State 切換內容。AnimatedVisibility 和 AnimatedContent 都提供了合理的默認動畫樣式，但我們也可對其進行自定義。對于 AnimatedVisibility，可以自定義其進入和退出的過渡動畫；對于 AnimatedContent，則可以使用 transitionSpec 參數自定義進入、退出過渡動畫的組合。

AnimatedVisibility (        visible = visible,       enter = fadeIn()+ scaleIn(),       exit = fadeOut() + scaleOut()) {       // ……} AnimatedContent(       targetState = … ,       transitionSpec = {               fadeIn() + scaleIn() with fadeOut() + scaleOut()       }) { targetState ->       // ……}

下圖中列出了一些進入和退出的過渡動畫，其中包括 fadeIn、fadeOut、slideIn、slideOut 以及 scaleIn 和 scaleOut，這些過渡動畫效果如下:

AnimatedVisibility 和 AnimatedContent 已經可以應對諸多場景，不過我們還提供了一些更為通用的 API。animate*AsState API 可用于為單個值制作動畫，您只需將各種數據類型與 animate*AsState 函數組合，即可將其轉換為對應的動畫值。在本示例中，我們?yōu)?dp 值制作動畫，所以我們使用 animateDpAsState。

val offsetX by animateDpAsState(        if (isOn) 512.dp else 0.dp)

我們開始時有提到，基于 State 的 API 支持中斷。也就是說，如果播放中動畫的狀態(tài)發(fā)生變化，新動畫將從當前的中間值和速度開始，并基于彈簧的物理效果繼續(xù)播放。我們將這樣的動畫行為稱為 AnimationSpec。

我們可以通過下面的例子了解如何為 animate*AsState 指定 AnimationSpec。在這個例子中，我們指定動畫的播放時長為三秒鐘:

val offsetX by animateDpAsState(        if (isOn) 512.dp else 0.dp,        animationSpec = tween(durationMillis = 3000))

那么，如果需要同時為多個值制作動畫，應該怎么做？您可以使用 updateTransition API，它對構建非常復雜的動畫大有助益。我們來看一個簡單的例子，下圖是一個填充了顏色的方塊，我們要為方塊的大小和顏色這兩個值同時制作動畫:

首先，我們需要定義 BoxState。這是一個枚舉類型，代表動畫的目標，可以是 Small 或者 Large:

private enum class BoxState (        Small,        Large}

然后，我們?yōu)槠鋭?chuàng)建一個 State 對象，改變 State 的值會觸發(fā)動畫:

var boxState by remember { mutableStateOf (BoxState.Small) }

然后我們使用 updateTransition 創(chuàng)建 Transition 對象。注意，最好為 Transition API 中所使用的對象附上標簽，以便 Android Studio 可以更好地展示動畫，這點我們稍后再介紹:

val transition = updateTransition(        targetState = boxState,        label = "Box Transition")

之后，我們就可以使用 animateColor 和 animateDp 等擴展函數創(chuàng)建動畫值了。這些函數的返回值都是 State 對象，因此其使用方式與其他 State 相同:

val color by transition.animateColor(label = "Color") { state ->        when (state) {                BoxState.Small -> Blue                 BoxState.Large -> Orange        }}val size by transition.animateDp (label = "Size") { state ->        when (state) {                BoxState.Small -> 32.dp                  BoxState.Large -> 128.dp        }}

將目前為止我們了解的所有內容結合，便可以實現(xiàn)非常復雜的動畫。

示例中使用了 updateTransition 為多個值制作動畫，例如表格的高度、位置及其內容的透明度。同時還使用了 AnimatedVisibility 自定義進入和退出過渡動畫，從而實現(xiàn)了理想的淡入和淡出效果。

Android Studio 動畫檢查工具

現(xiàn)在我們已經知道了如何創(chuàng)建復雜的動畫，接下來，我們看看 Android Studio 如何幫助我們實現(xiàn)精美的動畫效果。Android Studio 提供了動畫預覽功能來幫您快速驗證動畫效果，它會自動檢測動畫的使用，您可以在 Android Studio 中直接播放動畫；Android Studio 還可以圖形化動畫的值，以便您可以快速瀏覽這些值是如何隨時間變化的:

這里要注意的是，我們在前面生成 Transition 對象時添加的標簽，會在檢測到的動畫列表中，作為選項卡的名稱展示出來。

如下圖所示，Compose 預覽上的對應圖標按鈕表示界面中存在可檢查的動畫，點擊按鈕即可啟用動畫檢查:

該工具目前支持 AnimatedVisibility 和 updateTransition，但我們正計劃添加對 AnimatedContent 和 animate*AsState 的支持。

如下圖所示，我們可以使用動畫檢查窗口來播放、瀏覽和慢放 AnimatedVisibility:

此工具還可繪制動畫曲線，以便您將其與設計師所設計的運動參數進行對比，這有助于確保動畫值的正確編排:

使用協(xié)程完成復雜動畫

現(xiàn)在，我們已經了解了基于 State 的各種動畫 API，它們十分有助于我們在常見用例中為 State 變化制作動畫。而如果是更為復雜的場景，比如需要為動畫指定自定義行為時又該怎么做呢？

例如，在某些情況下需要對動畫進行更多控制，您可能需要對動畫或動畫集進行排序；又或者，您可能希望在動畫中斷時執(zhí)行自定義行為。

正如我們所知，當動畫中斷時，基于 State 的動畫 API 會保持動畫值和速度的連續(xù)性。但在某些情況下，為了強調手勢或響應，您可能并不需要連續(xù)性。例如，在下圖中雙擊點贊這一動畫中，再次雙擊時，播放中的動畫會從頭播放:

這種情況下，您可能需要使用目標不明確的不確定動畫。我們將這種動畫稱之為投擲行為 (Fling)，投擲行為的目標僅來自起始條件及其衰減函數。

當我們?yōu)榱藨獙碗s的場景，而需要協(xié)調動畫的編排時，就要用到 Kotlin 的一項強大功能——協(xié)程。下面的示例中是一個基礎的協(xié)程動畫 API——animate。使用它創(chuàng)建的動畫，會以 initialValue 參數和可選的 initialVelocity 參數所確定的開始條件運行至 targetValue 所指定的值；可選的 animationSpec 可用于自定義運動參數，該參數的默認值為 spring()；最后，我們傳入函數參數 block，animate 會在每幀動畫上使用最新的動畫值和速度調用此參數。

suspend fun animate(        initialValue: Float,        targetValue: Float,         initialVelocity: Float = 0f,        animationSpec: AnimationSpec<Float> = spring(),         block: (value: Float, velocity: Float) -> Unit)

注意 animate 函數的 suspend 修飾符，這意味著此函數可在協(xié)程中使用，并且可以掛起協(xié)程直到動畫完成。這是對動畫進行排序的關鍵。下圖展示了在協(xié)程中執(zhí)行 animate 函數的過程。您會注意到，一旦調用了 animate 函數，調用動畫的協(xié)程就會被掛起，直到動畫結束。之后，協(xié)程將恢復并執(zhí)行后續(xù)工作。

這有助于我們對操作進行排序，以及在動畫后執(zhí)行任務。以往，我們會將此類任務置于動畫結束監(jiān)聽器中，而有了協(xié)程，便無需結束監(jiān)聽器。

下面是生成上圖所示工作流的代碼。我們首先使用 rememberCoroutineScope 在組合內部創(chuàng)建 coroutineScope，然后使用 launch 函數在該作用域內創(chuàng)建一個新的協(xié)程。在新的協(xié)程中，首先調用 animate。animate 只會在動畫結束后返回，因此，動畫結束后需要完成的任何任務，如更新狀態(tài)或者啟動另一個動畫都可以放在 animate 后面。而如果需要取消動畫，我們可以直接取消執(zhí)行動畫的協(xié)程。

val scope = rememberCoroutineScope()…        scope.launch { // 創(chuàng)建新的協(xié)程                animate(...)                // 更新狀態(tài)、開啟另一個動畫，等等                subsequentWork()}

如下圖所示，如果用另一個 animate 函數替換 subsequentWork 函數，就可以得到兩個連續(xù)運行的動畫。如果查看代碼，您會發(fā)現(xiàn)我們僅使用了兩個連續(xù)的 animate 函數便可以實現(xiàn)連續(xù)動畫。

val scope = rememberCoroutineScope()…        scope.launch { // 創(chuàng)建新的協(xié)程                animate(...)                 animate(...)}

現(xiàn)在我們已經了解如何構建連續(xù)動畫，那么如果我們想同時運行動畫的話，該怎么做？

我們可以將動畫分別放在單獨的協(xié)程中并行運行。為此，我們需要使用 CoroutineScope。CoroutineScope 定義了在其作用域內所創(chuàng)建的新協(xié)程的生命周期。在該作用域內，可使用協(xié)程構建器函數 launch 來創(chuàng)建新的協(xié)程。launch 是非阻塞函數，所以我們可以并行創(chuàng)建多個協(xié)程，并在其中同時運行動畫。

除了高亮的 launch 函數外，下面的示例代碼與之前展示的連續(xù)動畫代碼相同，都可以創(chuàng)建新的協(xié)程。如前所述，launch 是非阻塞函數，所以，新的協(xié)程可以并行創(chuàng)建，并且動畫將在同一幀開始運行。

val scope = rememberCoroutineScope()…scope.launch {        launch { // 創(chuàng)建新的協(xié)程                animate(...)        }        launch { // 創(chuàng)建新的協(xié)程                animate(...)        }}

現(xiàn)在，我們完成了同時運行的動畫。一言以蔽之，協(xié)程有助于極其靈活地協(xié)調動畫。我們可以在同一個協(xié)程中輕松執(zhí)行兩個 animate 函數來創(chuàng)建連續(xù)的動畫；我們還可以在不同的協(xié)程中運行動畫，從而同時運行這些動畫。這些都是更為復雜動畫的組成部分。

在接下來的示例中，我們要創(chuàng)建雙擊點贊的心形動畫:

如下圖所示，這個動畫包含兩個階段: 首先，我們需要在心形進入時，淡入并放大心形；進入動畫完成后，啟動退出動畫以淡出，同時進一步放大心形。

在使用代碼構建此動畫時，首先要為 alpha 和 scale 創(chuàng)建 MutableState 對象，以便在動畫過程中更新它們的值。然后需要創(chuàng)建兩個 CoroutineScopes，以便連續(xù)運行進入動畫和退出動畫。在每個 CoroutineScope 中，我們將使用 launch 函數分別創(chuàng)建單獨的協(xié)程，從而使淡入淡出和縮放動畫可以同時運行。在動畫運行期間，我們使用 animate 函數中的 lambda 更新 alpha 或 scale。

var alpha by remember { mutableStateOf(0f) }var scale by remember { mutableStateOf(0f) }…        scope.launch {                 coroutineScope {                        launch { // 淡入                                animate(0f, 1f) { value, _ -> alpha = value }                        }                        launch { // 放大                                animate(0f, 2f) { value, _ -> scale = value }                        }                }                caroutineScope (                        launch { // 淡出                                animate(1f, 0f) { value, _ -> alpha = value }                        }                        launch { // 放大                                 animate(2f, 4f) { value, _ -> scale = value }                        }                }}

在了解協(xié)程動畫的基礎知識之后，接下來我們講解一個更為復雜的用例。這是一個表示內容正在加載的動畫，在等待內容加載時，有一個漸變條從上到下反復掃描。內容加載后，如果漸變條仍在掃描中，我們將等待該次掃描動作完成，然后再次從上到下，執(zhí)行最后一次掃描并顯示內容:

為了實現(xiàn)這一效果，我們首先需要創(chuàng)建一個 Animatable 對象，它將跟蹤動畫的值和速度。在使用 Animatable 對象創(chuàng)建新動畫時，我們只需提供新的目標值，當前值和速度會默認轉為新動畫的開始條件。

@Composable fun LoadingOverlay(isLoading: State<Boolean>) {        val fraction = remember { Animatable(0f) } …

然后在 LaunchedEffect 創(chuàng)建的 coroutineScope 中，我們會使用 Animatable 的兩個掛起函數: 一個是 animateTo，另一個是 snapTo。AnimateTo 將從 Animatable 的當前值和速度開始，向新的目標值運行動畫；snapTo 會在不使用任何動畫的情況下取消任何正在運行的動畫，并更新 Animatable 的值。

var reveal = { mutableStateOf(false) }LaunchedEffect(Unit) {        while(isLoading.value) {                fraction.animateTo(1f, tween (2000))                 fraction, snapTo(Of)        }         …}

由于我們要讓漸變條從上到下移動，隨后返回頂部，所以需要首先以 1 為目標調用 animateTo，同時使用 2,000 毫秒的補間動畫。然后通過 snapTo 讓漸變條返回頂部。由于 animateTo 和 snapTo 均為掛起函數，所以我們可對其排序，并在 while 循環(huán)中重復該序列，直到加載完成。

由于我們只在每次掃描之前檢查加載狀態(tài)，所以任何對加載狀態(tài)的更改只會在當前掃描完成后生效。這樣一來，我們就創(chuàng)建了一個自定義的中斷處理行為。它的功能不同于基于 State 的動畫 API，內容加載完成后，我們便退出 while 循環(huán)，并在執(zhí)行最后一次掃描前，更改顯示狀態(tài)、制作漸變條移動至底部的動畫。

reveal = truefraction.animateTo(1f,tween(1000))

最后，當 reveal 的值變?yōu)?true 時，我們停止在此疊加層中繪制不透明的封面，以便在最后一次掃描時顯示下方的內容:

…if (!reveal) {        // 漸變條下的不透明覆蓋        Box(Modifier.background(backgroundColor))}…

這樣一來，我們就完成了這個動畫效果。完整的代碼示例如下:

@Composable fun LoadingOverlay(isLoading: State<Boolean>) {        val fraction = remember { Animatable(0f) }         var reveal = { mutableStateOf(false) }        LaunchedEffect(Unit) {            while(isLoading.value) {                fraction.animateTo(1f, tween (2000))                fraction. snapTo(0f)            }            reveal = true            fraction.animateTo(1f, tween(1000))        }        if (!reveal) {            // 漸變條下的不透明覆蓋            Box(Modifier.background(backgroundColor))        }        ……}

尾聲

最后，讓我們一同欣賞由社區(qū)開發(fā)者所構建的精彩動畫: