正文

寫Compose動畫的時候使用animateXAsState的時候會注意到一個參數(shù)——animationSpec，如下：

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

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

那么其中的easing參數(shù)就是該動畫規(guī)格的緩動曲線。什么是easing曲線，可以看下圖：

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

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

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

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

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

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，即貝塞爾曲線。而這個就是本篇文章的主角。

貝塞爾曲線

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

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

但是曲線圖片和傳進去的參數(shù)又有怎樣的映射關(guān)系呢？

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

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

• 第一個參數(shù)為起始點把手的x坐標
• 第二個參數(shù)為起始點把手的y坐標
• 第三個參數(shù)為終點把手的x坐標
• 第四個參數(shù)為終點把手的y坐標

CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)

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

解析動畫曲線

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

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

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

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

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

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

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

曲線源碼分析

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

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

而CubicBezierEasing則繼承了Easing，并實現(xiàn)了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
        }
    }
    ...
}

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

進階一點的話可以實現(xiàn)Easing來定義自己的曲線！

總結(jié)

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

以上就是Android動效Compose貝塞爾曲線動畫規(guī)格詳解的詳細內(nèi)容，更多關(guān)于Android Compose貝塞爾曲線的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論