第Android動效Compose貝塞爾曲線動畫規(guī)格詳解目錄正文貝塞爾曲線解析動畫曲線曲線源碼分析總結

正文

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

valborderRadiusbyanimateIntAsState(

targetValue=if(isRound)100else0,

animationSpec=tween(

durationMillis=3000,

easing=LinearEasing

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

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

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

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

@Stable

funTtween(

durationMillis:Int=DefaultDurationMillis,

delayMillis:Int=0,

easing:Easing=FastOutSlowInEasing

):TweenSpecT=TweenSpec(durationMillis,delayMillis,easing)

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

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

valFastOutSlowInEasing:Easing=CubicBezierEasing(0.4f,0.0f,0.2f,1.0f)

valLinearOutSlowInEasing:Easing=CubicBezierEasing(0.0f,0.0f,0.2f,1.0f)

valFastOutLinearInEasing:Easing=CubicBezierEasing(0.4f,0.0f,1.0f,1.0f)

valLinearEasing:Easing=Easing{fraction-fraction}

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

貝塞爾曲線

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

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

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

還記得剛剛貝塞爾曲線的描述嗎？端點和把手來生成貝塞爾曲線。端點我們有了，即(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畫出各種想要的貝塞爾動畫曲線了，而具體如何定義一根合理好看的動畫的曲線就交給動畫師吧！

解析動畫曲線

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

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

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

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

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

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

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

曲線源碼分析

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

@Stable

funinterfaceEasing{

funtransform(fraction:Float):Float

而CubicBezierEasing則繼承了Easing，并實現(xiàn)了transform方法

@Immutable

classCubicBezierEasing(

privatevala:Float,

privatevalb:Float,

privatevalc:Float,

privatevald:Float

):Easing{

privatefunevaluateCubic(a:Float,b:Float,m:Float):Float{

return3*a*(1-m)*(1-m)*m+

3*b*(1-m)*/**/m*m+

/**/m*m*m

overridefuntransform(fraction:Float):Float{

if(fraction0ffraction1f){

varstart=0.0f

varend=1.0f

while(true){

valmidpoint=(start+end)/2

valestimate=evaluateCubic(a,c,midpoint)

if((fraction-estimate).absoluteValueCubicErrorBound)

returnevaluateCubic(b,d,midpoint)

if(estimatefraction)

start=midpoint

else

end=midpoint

}else{

returnfraction

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

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

總結