Compose中的動(dòng)畫(huà)API概覽及使用方法

我們將通過(guò)本文介紹 Compose 中的一些動(dòng)畫(huà) API，并探討如何有效地使用它們。Compose 中的動(dòng)畫(huà) API 是我們構(gòu)想的全新 API，這些 API 中有許多是聲明式的，您可以利用聲明式的方式簡(jiǎn)潔地定義動(dòng)畫(huà)。

這些動(dòng)畫(huà) API 支持中斷，當(dāng)運(yùn)行中的動(dòng)畫(huà)被另一個(gè)動(dòng)畫(huà)打斷時(shí)，運(yùn)行中動(dòng)畫(huà)的值會(huì)帶入到新動(dòng)畫(huà)中。新 API 簡(jiǎn)單易用，配置了合理的默認(rèn)行為，可開(kāi)箱即用，也可高度定制。同時(shí) Android Studio 還提供了強(qiáng)大的工具，可以幫助您制作復(fù)雜動(dòng)畫(huà)。

Compose 動(dòng)畫(huà)概覽

我們先從一個(gè)簡(jiǎn)單例子開(kāi)始。下圖是一個(gè)貓咪圖標(biāo)，當(dāng)我們點(diǎn)擊按鈕時(shí)，它會(huì)在隱藏和顯示這兩種狀態(tài)間進(jìn)行切換:

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

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

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

…AnimatedVisibility (visible) {         CatIcon( )}…

還有一個(gè) API 與 AnimatedVisibility 非常相似，那就是 AnimatedContent。AnimatedVisibility 的運(yùn)行基于內(nèi)容的進(jìn)入和退出，而 AnimatedContent 則可為內(nèi)容的變化生成過(guò)渡動(dòng)畫(huà)。

在下面的例子中，當(dāng)我們點(diǎn)擊按鈕時(shí)，計(jì)數(shù)會(huì)隨淡出和淡入效果而增加:

AnimatedContent 的 State 參數(shù)可以是任何類(lèi)型，在本示例中，我們使用名為 count 的整型 State，在點(diǎn)擊按鈕時(shí)，其數(shù)值會(huì)隨之增加。而每次 State 發(fā)生變化時(shí)，AnimatedContent 就會(huì)運(yùn)行動(dòng)畫(huà)。

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

我們可以使用 lambda 參數(shù)，基于輸入的 State 切換內(nèi)容。AnimatedVisibility 和 AnimatedContent 都提供了合理的默認(rèn)動(dòng)畫(huà)樣式，但我們也可對(duì)其進(jìn)行自定義。對(duì)于 AnimatedVisibility，可以自定義其進(jìn)入和退出的過(guò)渡動(dòng)畫(huà)；對(duì)于 AnimatedContent，則可以使用 transitionSpec 參數(shù)自定義進(jìn)入、退出過(guò)渡動(dòng)畫(huà)的組合。

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

下圖中列出了一些進(jìn)入和退出的過(guò)渡動(dòng)畫(huà)，其中包括 fadeIn、fadeOut、slideIn、slideOut 以及 scaleIn 和 scaleOut，這些過(guò)渡動(dòng)畫(huà)效果如下:

AnimatedVisibility 和 AnimatedContent 已經(jīng)可以應(yīng)對(duì)諸多場(chǎng)景，不過(guò)我們還提供了一些更為通用的 API。animate*AsState API 可用于為單個(gè)值制作動(dòng)畫(huà)，您只需將各種數(shù)據(jù)類(lèi)型與 animate*AsState 函數(shù)組合，即可將其轉(zhuǎn)換為對(duì)應(yīng)的動(dòng)畫(huà)值。在本示例中，我們?yōu)?dp 值制作動(dòng)畫(huà)，所以我們使用 animateDpAsState。

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

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

我們可以通過(guò)下面的例子了解如何為 animate*AsState 指定 AnimationSpec。在這個(gè)例子中，我們指定動(dòng)畫(huà)的播放時(shí)長(zhǎng)為三秒鐘:

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

那么，如果需要同時(shí)為多個(gè)值制作動(dòng)畫(huà)，應(yīng)該怎么做？您可以使用 updateTransition API，它對(duì)構(gòu)建非常復(fù)雜的動(dòng)畫(huà)大有助益。我們來(lái)看一個(gè)簡(jiǎn)單的例子，下圖是一個(gè)填充了顏色的方塊，我們要為方塊的大小和顏色這兩個(gè)值同時(shí)制作動(dòng)畫(huà):

首先，我們需要定義 BoxState。這是一個(gè)枚舉類(lèi)型，代表動(dòng)畫(huà)的目標(biāo)，可以是 Small 或者 Large:

private enum class BoxState (        Small,        Large}

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

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

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

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

之后，我們就可以使用 animateColor 和 animateDp 等擴(kuò)展函數(shù)創(chuàng)建動(dòng)畫(huà)值了。這些函數(shù)的返回值都是 State 對(duì)象，因此其使用方式與其他 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        }}

將目前為止我們了解的所有內(nèi)容結(jié)合，便可以實(shí)現(xiàn)非常復(fù)雜的動(dòng)畫(huà)。

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

Android Studio 動(dòng)畫(huà)檢查工具

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

這里要注意的是，我們?cè)谇懊嫔?Transition 對(duì)象時(shí)添加的標(biāo)簽，會(huì)在檢測(cè)到的動(dòng)畫(huà)列表中，作為選項(xiàng)卡的名稱(chēng)展示出來(lái)。

如下圖所示，Compose 預(yù)覽上的對(duì)應(yīng)圖標(biāo)按鈕表示界面中存在可檢查的動(dòng)畫(huà)，點(diǎn)擊按鈕即可啟用動(dòng)畫(huà)檢查:

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

如下圖所示，我們可以使用動(dòng)畫(huà)檢查窗口來(lái)播放、瀏覽和慢放 AnimatedVisibility:

此工具還可繪制動(dòng)畫(huà)曲線(xiàn)，以便您將其與設(shè)計(jì)師所設(shè)計(jì)的運(yùn)動(dòng)參數(shù)進(jìn)行對(duì)比，這有助于確保動(dòng)畫(huà)值的正確編排:

使用協(xié)程完成復(fù)雜動(dòng)畫(huà)

現(xiàn)在，我們已經(jīng)了解了基于 State 的各種動(dòng)畫(huà) API，它們十分有助于我們?cè)诔Ｒ?jiàn)用例中為 State 變化制作動(dòng)畫(huà)。而如果是更為復(fù)雜的場(chǎng)景，比如需要為動(dòng)畫(huà)指定自定義行為時(shí)又該怎么做呢？

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

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

這種情況下，您可能需要使用目標(biāo)不明確的不確定動(dòng)畫(huà)。我們將這種動(dòng)畫(huà)稱(chēng)之為投擲行為 (Fling)，投擲行為的目標(biāo)僅來(lái)自起始條件及其衰減函數(shù)。

當(dāng)我們?yōu)榱藨?yīng)對(duì)復(fù)雜的場(chǎng)景，而需要協(xié)調(diào)動(dòng)畫(huà)的編排時(shí)，就要用到 Kotlin 的一項(xiàng)強(qiáng)大功能——協(xié)程。下面的示例中是一個(gè)基礎(chǔ)的協(xié)程動(dòng)畫(huà) API——animate。使用它創(chuàng)建的動(dòng)畫(huà)，會(huì)以 initialValue 參數(shù)和可選的 initialVelocity 參數(shù)所確定的開(kāi)始條件運(yùn)行至 targetValue 所指定的值；可選的 animationSpec 可用于自定義運(yùn)動(dòng)參數(shù)，該參數(shù)的默認(rèn)值為 spring()；最后，我們傳入函數(shù)參數(shù) block，animate 會(huì)在每幀動(dòng)畫(huà)上使用最新的動(dòng)畫(huà)值和速度調(diào)用此參數(shù)。

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

注意 animate 函數(shù)的 suspend 修飾符，這意味著此函數(shù)可在協(xié)程中使用，并且可以?huà)炱饏f(xié)程直到動(dòng)畫(huà)完成。這是對(duì)動(dòng)畫(huà)進(jìn)行排序的關(guān)鍵。下圖展示了在協(xié)程中執(zhí)行 animate 函數(shù)的過(guò)程。您會(huì)注意到，一旦調(diào)用了 animate 函數(shù)，調(diào)用動(dòng)畫(huà)的協(xié)程就會(huì)被掛起，直到動(dòng)畫(huà)結(jié)束。之后，協(xié)程將恢復(fù)并執(zhí)行后續(xù)工作。

這有助于我們對(duì)操作進(jìn)行排序，以及在動(dòng)畫(huà)后執(zhí)行任務(wù)。以往，我們會(huì)將此類(lèi)任務(wù)置于動(dòng)畫(huà)結(jié)束監(jiān)聽(tīng)器中，而有了協(xié)程，便無(wú)需結(jié)束監(jiān)聽(tīng)器。

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

val scope = rememberCoroutineScope()…        scope.launch { // 創(chuàng)建新的協(xié)程                animate(...)                // 更新?tīng)顟B(tài)、開(kāi)啟另一個(gè)動(dòng)畫(huà)，等等                subsequentWork()}

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

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

現(xiàn)在我們已經(jīng)了解如何構(gòu)建連續(xù)動(dòng)畫(huà)，那么如果我們想同時(shí)運(yùn)行動(dòng)畫(huà)的話(huà)，該怎么做？

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

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

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

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

在接下來(lái)的示例中，我們要?jiǎng)?chuàng)建雙擊點(diǎn)贊的心形動(dòng)畫(huà):

如下圖所示，這個(gè)動(dòng)畫(huà)包含兩個(gè)階段: 首先，我們需要在心形進(jìn)入時(shí)，淡入并放大心形；進(jìn)入動(dòng)畫(huà)完成后，啟動(dòng)退出動(dòng)畫(huà)以淡出，同時(shí)進(jìn)一步放大心形。

在使用代碼構(gòu)建此動(dòng)畫(huà)時(shí)，首先要為 alpha 和 scale 創(chuàng)建 MutableState 對(duì)象，以便在動(dòng)畫(huà)過(guò)程中更新它們的值。然后需要?jiǎng)?chuàng)建兩個(gè) CoroutineScopes，以便連續(xù)運(yùn)行進(jìn)入動(dòng)畫(huà)和退出動(dòng)畫(huà)。在每個(gè) CoroutineScope 中，我們將使用 launch 函數(shù)分別創(chuàng)建單獨(dú)的協(xié)程，從而使淡入淡出和縮放動(dòng)畫(huà)可以同時(shí)運(yùn)行。在動(dòng)畫(huà)運(yùn)行期間，我們使用 animate 函數(shù)中的 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é)程動(dòng)畫(huà)的基礎(chǔ)知識(shí)之后，接下來(lái)我們講解一個(gè)更為復(fù)雜的用例。這是一個(gè)表示內(nèi)容正在加載的動(dòng)畫(huà)，在等待內(nèi)容加載時(shí)，有一個(gè)漸變條從上到下反復(fù)掃描。內(nèi)容加載后，如果漸變條仍在掃描中，我們將等待該次掃描動(dòng)作完成，然后再次從上到下，執(zhí)行最后一次掃描并顯示內(nèi)容:

為了實(shí)現(xiàn)這一效果，我們首先需要?jiǎng)?chuàng)建一個(gè) Animatable 對(duì)象，它將跟蹤動(dòng)畫(huà)的值和速度。在使用 Animatable 對(duì)象創(chuàng)建新動(dòng)畫(huà)時(shí)，我們只需提供新的目標(biāo)值，當(dāng)前值和速度會(huì)默認(rèn)轉(zhuǎn)為新動(dòng)畫(huà)的開(kāi)始條件。

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

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

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

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

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

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

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

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

這樣一來(lái)，我們就完成了這個(gè)動(dòng)畫(huà)效果。完整的代碼示例如下:

@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ū)開(kāi)發(fā)者所構(gòu)建的精彩動(dòng)畫(huà):