Android動效Compose貝塞爾曲線動畫規格詳解

Posted on by

正文

寫Compose動畫的時候使用animateXAsState的時候會註意到一個參數——animationSpec，如下：

val borderRadius by animateIntAsState(
    targetValue = if (isRound) 100 else 0,
    animationSpec = tween(
        durationMillis = 3000,
        easing = LinearEasing
    )
)

此處就不深入探討不同的animationSpec類型有什麼作用，主要看tween，它是幾乎最簡單的一個類型，即使用緩動曲線的起始點到終點的動畫規格。

那麼其中的easing參數就是該動畫規格的緩動曲線。什麼是easing曲線，可以看下圖：

x軸可以理解為時間進度，而y軸可以理解動畫的進度，可以看出該圖為線性曲線，即從頭到尾保持一樣的速度。關於各個不同的曲線產生不同的動畫效果可以看下Android官網的Easing API，裡面有比較多的動圖來演示。

點進tween源碼可以看到easing參數默認使用FastOutSlowInEasing曲線。

@Stable
fun <T> tween(
    durationMillis: Int = DefaultDurationMillis,
    delayMillis: Int = 0,
    easing: Easing = FastOutSlowInEasing
): TweenSpec<T> = TweenSpec(durationMillis, delayMillis, easing)

根據名字可以看出FastOutSlowInEasing為一開始加速，收尾時減速的曲線。

點進FastOutSlowInEasing源碼可以看到官方內置瞭多個曲線，其中有三個貝塞爾曲線，一個線性曲線。

val FastOutSlowInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)
val LinearOutSlowInEasing: Easing = CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f)
val FastOutLinearInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 1.0f, 1.0f)
val LinearEasing: Easing = Easing { fraction -> fraction }

到這裡就可以看到CubicBezierEasing，即貝塞爾曲線。而這個就是本篇文章的主角。

貝塞爾曲線

貝塞爾曲線可以通過端點和把手精確地畫出想要的絲滑的曲線。

而上文中的三個內置的貝塞爾曲線在制圖軟件中就如下（可能有些偏差）：

但是曲線圖片和傳進去的參數又有怎樣的映射關系呢？

還記得剛剛貝塞爾曲線的描述嗎？端點和把手來生成貝塞爾曲線。端點我們有瞭，即(0,0)和(1,1)，那麼我現在以FastOutSlowInEasing為例，把把手顯示出來：

看到這裡，其實答案很明確瞭！傳進去的其實是把手的端點

  • 第一個參數為起始點把手的x坐標
  • 第二個參數為起始點把手的y坐標
  • 第三個參數為終點把手的x坐標
  • 第四個參數為終點把手的y坐標
CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)

知道這個原理之後就可以通過CubicBezierEasing畫出各種想要的貝塞爾動畫曲線瞭，而具體如何定義一根合理好看的動畫的曲線就交給動畫師吧！

解析動畫曲線

我們打開After Effects，畫一個小球，給小球的位置K兩個關鍵幀，並將兩個關鍵幀右鍵緩動。如下：

點開圖標編輯器，之後就看到瞭兩根動畫曲線

綠色那根是不是很熟悉！就是剛剛講的動畫曲線（但是單位不一樣，之前的單位為百分比單位，0即未開始，1為結束）從這裡很清晰地看出x軸為時間，而Y軸則為動畫的進度，都是實際的值。這裡就不多說瞭，重點看白色那根動畫曲線，可以猜猜是什麼曲線。

恭喜你猜對瞭！是速度曲線。

在第一個格子的時候速度達到巔峰，因此可以看出綠色那根動畫曲線在第一個格子的時候切線是最陡的，幾乎接近垂直，在開始和結束的時候速度比較小，而此時的切線是平緩的。

將紅箭頭比作一個y = kx一元一次函數的話，而k的值就是白色曲線的y軸的值。

而該曲線則類似內置的FastOutSlowInEasing，先提高加速度，後減少加速度的曲線，導出動畫效果如下。

曲線源碼分析

點進Easing接口可以看到一個transform函數，傳入一個Float類型的fraction，返回一個Float類型的值。而這個其實就是x軸和y軸的值，即時間和進度百分比，一般在0-1之間活動。

@Stable
fun interface Easing {
    fun transform(fraction: Float): Float
}

而CubicBezierEasing則繼承瞭Easing，並實現瞭transform方法

@Immutable
class CubicBezierEasing(
    private val a: Float,
    private val b: Float,
    private val c: Float,
    private val d: Float
) : Easing {
    ...
    private fun evaluateCubic(a: Float, b: Float, m: Float): Float {
        return 3 * a * (1 - m) * (1 - m) * m +
            3 * b * (1 - m) * /*    */ m * m +
            /*                      */ m * m * m
    }
    override fun transform(fraction: Float): Float {
        if (fraction > 0f && fraction < 1f) {
            var start = 0.0f
            var end = 1.0f
            while (true) {
                val midpoint = (start + end) / 2
                val estimate = evaluateCubic(a, c, midpoint)
                if ((fraction - estimate).absoluteValue < CubicErrorBound)
                    return evaluateCubic(b, d, midpoint)
                if (estimate < fraction)
                    start = midpoint
                else
                    end = midpoint
            }
        } else {
            return fraction
        }
    }
    ...
}

但是公式我看不懂哈哈(= _=)。

進階一點的話可以實現Easing來定義自己的曲線！

總結

其實我們很多APP對於動畫的使用其實是非常局限的，包括曲線！我們大多數動畫都在使用生硬的線性動畫，其中一個原因就是程序員和設計師的交流隔瞭一個專業，實際溝通比較困難。

以上就是Android動效Compose貝塞爾曲線動畫規格詳解的詳細內容，更多關於Android Compose貝塞爾曲線的資料請關註WalkonNet其它相關文章！

推薦閱讀：