正文

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

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

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

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

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

點(diǎn)進(jìn)tween源碼可以看到easing參數(shù)默認(rèn)使用FastOutSlowInEasing曲線。

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

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

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

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

貝塞爾曲線

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

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

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

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

看到這里，其實(shí)答案很明確了！傳進(jìn)去的其實(shí)是把手的端點(diǎn)

• 第一個(gè)參數(shù)為起始點(diǎn)把手的x坐標(biāo)
• 第二個(gè)參數(shù)為起始點(diǎn)把手的y坐標(biāo)
• 第三個(gè)參數(shù)為終點(diǎn)把手的x坐標(biāo)
• 第四個(gè)參數(shù)為終點(diǎn)把手的y坐標(biāo)

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

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

解析動畫曲線

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

點(diǎn)開圖標(biāo)編輯器，之后就看到了兩根動畫曲線

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

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

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

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

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

曲線源碼分析

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

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

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

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

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

總結(jié)

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

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

最新評論