Android Compose 動畫使用詳解(九)Animatable之衰減動畫

語言: CN / TW / HK
時間 2022-11-30 03:15:08

theme: smartblue

本文為稀土掘金技術社群首發簽約文章，14天內禁止轉載，14天后未獲授權禁止轉載，侵權必究！

前言

上一篇介紹了 Animatable 動畫以及其 animateTo和 snapTo兩個開啟動畫 api 的使用，實際上 Animatable 除了這兩個 api 以外還有一個 animateDecay即本篇要介紹的衰減動畫。

什麼是衰減動畫呢？就是動畫速度由快到慢最後停止，最常見的應用場景就是慣性動畫，比如滑動列表時手指鬆開後列表不會立即停止而是會繼續滑動一段距離後才停止；下面就來看看 animateDecay具體如何使用。

animateDecay

首先還是來看一下 animateDecay的定義：

kotlin suspend fun animateDecay( initialVelocity: T, animationSpec: DecayAnimationSpec<T>, block: (Animatable<T, V>.() -> Unit)? = null ): AnimationResult<T, V>

跟前面介紹的 animateTo和 snapTo一樣都是 suspend修飾的方法，即必須在協程中呼叫，引數有三個，分別解析如下：

  • initialVelocity：初始速度
  • animationSpec：動畫配置，DecayAnimationSpec型別
  • block：函式型別引數，動畫執行的每一幀都會回撥這個 block 方法，可用於動畫監聽

返回值跟 animateTo一樣都是 AnimationResult型別。

initialVelocity是動畫的初始速度，動畫會從這個初始速度按照一定的衰減曲線進行衰減，直到速度為 0 或達到閾值時動畫停止。那這個初始速度的單位是多少呢？是單位/秒 這裡的單位就是動畫作用的數值型別，比如數值型別是 Dp，那就代表多少 Dp 每秒。

而衰減曲線的配置就是第二個引數 animationSpec，需要注意的是這裡的 animationSpec 是 DecayAnimationSpec型別，它並不是前面介紹的 AnimationSpec的子類，是衰減動畫特有的動畫配置，看一下 DecayAnimationSpec 的定義：

kotlin interface DecayAnimationSpec<T> { fun <V : AnimationVector> vectorize( typeConverter: TwoWayConverter<T, V> ): VectorizedDecayAnimationSpec<V> }

從原始碼可以知曉，DecayAnimationSpec是一個獨立的介面，跟蹤其實現類只有一個 DecayAnimationSpecImpl:

kotlin private class DecayAnimationSpecImpl<T>( private val floatDecaySpec: FloatDecayAnimationSpec ) : DecayAnimationSpec<T> { override fun <V : AnimationVector> vectorize( typeConverter: TwoWayConverter<T, V> ): VectorizedDecayAnimationSpec<V> = VectorizedFloatDecaySpec(floatDecaySpec) }

這個實現類是 private的，也就是不能直接建立其例項，那怎麼建立呢？Compose 提供三個方法用於建立，分別是 splineBasedDecay、rememberSplineBasedDecay和 exponentialDecay，那麼這三種方法又有什麼區別呢？下面分別對其進行詳細介紹。

splineBasedDecay

splineBasedDecay根據方法命名我們可以翻譯為基於樣條曲線的衰減，什麼是樣條曲線呢？Google得到的答案：樣條曲線是經過或接近影響曲線形狀的一系列點的平滑曲線。更抽象了，實際上我們並不需要了解他是怎麼實現的，當然感興趣的可以自行查詢相關資料，我們只要知道在 Android 中預設的列表慣性滑動就是基於此曲線演算法實現的。

概念瞭解清楚後，再來看一下 splineBasedDecay 方法的定義：

kotlin fun <T> splineBasedDecay(density: Density): DecayAnimationSpec<T>

只有一個引數 density即螢幕畫素密度。為什麼要傳 density 呢？這是因為 splineBasedDecay 是基於螢幕畫素進行的動畫速度衰減，當畫素密度越大動畫減速越快，動畫的時長越短，動畫慣性滑動的距離越短；可以理解螢幕畫素密度越大摩擦力越大，所以慣性滑動的距離就越短。

使用 splineBasedDecay 實現動畫效果，程式碼如下：

```kotlin // 建立 Animatable 例項 val animatable = remember { Animatable(10.dp, Dp.VectorConverter) } val scope = rememberCoroutineScope()

// 建立 splineBasedDecay // 通過 LocalDensity.current 獲取當前裝置螢幕密度 val splineBasedDecay = splineBasedDecay(LocalDensity.current)

Box( Modifier .padding(start = 10.dp, top = animatable.value) .size(100.dp, 100.dp) .background(Color.Blue) .clickable { scope.launch { // 啟動衰減動畫，初始速度設定為 1000.dp 每秒 animatable.animateDecay(1000.dp, splineBasedDecay) } } ) ```

將上述程式碼分別在螢幕尺寸均為 6.0 英寸、螢幕密度分別為 440 dpi 和 320 dpi 的裝置上執行，效果如下：

可以發現，螢幕密度小的動畫執行的距離更長。

rememberSplineBasedDecay

rememberSplineBasedDecay 跟 splineBasedDecay 的作用是一樣的，區別在 splineBasedDecay 上用 remember包裹了一層，上一節中使用 splineBasedDecay 並未用 remember包裹，就意味著每次介面重新整理時都會重新呼叫 splineBasedDecay 建立衰減配置的例項。而使用 rememberSplineBasedDecay就可以優化該問題，且無需手動傳入 density引數。

看一下 rememberSplineBasedDecay原始碼：

kotlin @Composable actual fun <T> rememberSplineBasedDecay(): DecayAnimationSpec<T> { val density = LocalDensity.current return remember(density.density) { SplineBasedFloatDecayAnimationSpec(density).generateDecayAnimationSpec() } }

首先也是通過 LocalDensity.current獲取螢幕畫素密度，然後使用 remember建立衰減配置例項，remember引數傳入了 density，也就是當特殊情況螢幕密度發生變化時會重新建立衰減配置例項。

在開發中遇到要使用 splineBasedDecay的時候一般直接使用 rememberSplineBasedDecay 即可。

思考：前面介紹 splineBasedDecay 是跟螢幕畫素密度有關的，如果需求就是不想因為螢幕畫素密度而導致不同裝置表現不一樣怎麼辦呢？或者動畫作用的數值就是跟螢幕畫素密度沒關，比如作用於旋轉角度的動畫，此時怎麼辦呢？這個時候就不能使用 splineBasedDecay，而是應該使用 exponentialDecay。

exponentialDecay

exponentialDecay是指數衰減，即動畫速度按指數遞減，他不依賴螢幕畫素密度，可用於通用資料的衰減動畫。其定義如下：

kotlin fun <T> exponentialDecay( frictionMultiplier: Float = 1f, absVelocityThreshold: Float = 0.1f ): DecayAnimationSpec<T>

有兩個引數，且都有預設值，引數解析如下：

  • frictionMultiplier：摩擦係數，摩擦係數越大，速度減速越快，反之則減速越慢
  • absVelocityThreshold：絕對速度閾值，當速度絕對值低於此值時動畫停止，這裡的數值是指多少單位的速度，比如動畫數值型別為 Dp，這裡傳 100f 即 100f * 1.dp

使用如下：

```kotlin var move by remember { mutableStateOf(false) } val animatable = remember { Animatable(30.dp, Dp.VectorConverter) } val scope = rememberCoroutineScope()

Box(
    Modifier
        .padding(start = 30.dp, top = animatable.value)
        .size(100.dp, 100.dp)
        .background(Color.Blue)
        .clickable {
            scope.launch {
                // 使用 exponentialDecay 衰減動畫
                animatable.animateDecay(1000.dp, exponentialDecay())
            }
        }
)

```

執行效果：

將摩擦係數設定為 5f 體驗一下增加摩擦係數後的效果：

exponentialDecay(5f)

摩擦係數增大後，動畫執行的距離和時間都明顯縮短了。

將絕對速度閾值設定為 500f 再看一下效果：

exponentialDecay(absVelocityThreshold = 500f)

當動畫速度達到閾值速度後動畫就停止了，所以閾值越大動畫越早停止。

實戰

下面我們用衰減動畫實現一個轉盤抽獎的動畫效果，即當點選抽獎後轉盤開始轉動然後緩緩停下，最後指標指向的位置就是中獎的獎品。

因為是旋轉動畫，所以這裡我們使用 exponentialDecay指數衰減動畫，同時準備兩張圖片素材，如下：

將兩張圖片居中疊加，然後通過動畫旋轉下面的圓盤就完成了整個動畫效果，程式碼如下：

```kotlin // 建立動畫例項 val animatable = remember { Animatable(0, Int.VectorConverter) } // 獲取協程作用域使用者在按鈕點選事件中開啟協程 val scope = rememberCoroutineScope() // 中獎結果 var luckyResult by remember { mutableStateOf("") } // 中獎項 val luckyItem = remember { arrayOf("50元紅包", "20元紅包","10元紅包","100-50券","小米藍芽耳機","謝謝參與") }

Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) { Box{ // 底部圓盤圖片 Image( painter = painterResource(R.drawable.bg), contentDescription = "bg", // 旋轉角度設定為動畫的值 modifier = Modifier.rotate(animatable.value.toFloat()) ) // 中間指標圖片 Image( painter = painterResource(R.drawable.center), contentDescription = "center", // 設定點選事件 modifier = Modifier.clickable(indication = null, interactionSource = remember { MutableInteractionSource() }, onClick = { // 開啟協程 scope.launch { // 更新抽獎狀態 luckyResult = "抽獎中" // 開啟動畫 // 初始速度設定為 10000 再加上 1000~10000 的隨機數 // 衰減曲線設定為 exponentialDecay 摩擦係數設定為 0.5f val result = animatable.animateDecay(10000 + Random.nextInt(1000,10000), exponentialDecay(frictionMultiplier = 0.5f)) // 動畫執行完後從動畫結果中獲取最後的值，即旋轉角度 val angle = result.endState.value // 通過計算獲取當前指標在哪個範圍 val index = angle % 360 / 60 // 獲取中獎結果，並顯示在螢幕上 luckyResult = luckyItem[index] } }) ) } // 顯示中獎結果 Text(luckyResult, modifier = Modifier.padding(10.dp)) // 新增重置按鈕 Button(onClick = { scope.launch { // 通過 snapTo 瞬間回到初始狀態 animatable.snapTo(0) } }){ Text("重置") } } ```

最終效果：

最後

本篇繼 Animatable 的 animateTo和 snapTo後繼續介紹了 animateDecay 衰減動畫的使用，包括如何設定衰減曲線，不同衰減曲線的引數配置以及使用場景，並通過衰減動畫實現了抽獎轉盤效果。下一篇我們繼續探索 Animatable 的邊界設定及其相關的應用，請持續關注本專欄瞭解更多 Compose 動畫內容。

「」
「」