顯式動畫Animation《轉》

當需要對非root layer進行動畫或者需要對動畫做更多自定義的行為的時候,就必須使用到顯式動畫了,顯式動畫的基類為caanimation,常用的是cabasicanimation,cakeyframeanimation有時候還會使用到caanimationgroup,catransition(注意不是catransaction,transition是過渡的意思).

這裡再強調關於動畫的兩個重要的點:一是中間狀態的插值計算(interpolation),二是動畫節奏控制(timing); 有時候插值計算也和timing有一定關係. 如果狀態是一維空間的值(比如透明度),那麼插值計算的結果必然再起點值和終點值之間,如果狀態是二維空間的值(比如position),那麼一般情況下插值得到的點會落在起點和終點之間的線段上（當然也有可能連線是圓滑曲線）.

1.cabasicanimation

2.timing function的作用

timing function的會被用於變化起點和終點之間的插值計算.形象點說是timing function決定了動畫執行的節奏(pacing),比如是均勻變化(相同時間變化量相同),先快後慢,先慢後快還是先慢再快再慢.

時間函式是使用的一段函式來描述的,橫座標是時間t取值範圍是0.0-1.0,縱座標是變化量x(t)也是取值範圍也是0.0-1.0 假設有乙個動畫,duration是8秒,變化值的起點是a終點是b(假設是透明度),那麼在4秒處的值是多少呢？可以通過計算為 a + x(4/8) * (b-a), 為什麼這麼計算呢？講實現的時間對映到單位值的時候4秒相對於總時間8秒就是0.5然後可以得到0.5的時候單位變化量是 x(0.5), x(0.5)/1 = 實際變化量/(b-a), 其中b-a為總變化量,所以實際變化量就是x(0.5) * (b-a) ,最後4秒時的值就是 a + x(0.5) * (b-a),所以計算的本質是對映.

timing function對應的類是camediatimingfunction,它提供了兩種獲得時間函式的方式,一種是使用預定義的五種時間函式,一種是通過給點兩個控制點得到乙個時間函式. 相關的方法為

+(id
)functionwithname:
(nsstring*)
name;+
(id)functionwithcontrolpoints:
(float
)c1x:(
float
)c1y:(
float
)c2x:(
float
)c2y;-
(id)initwithcontrolpoints:
(float
)c1x:(
float
)c1y:(
float
)c2x:(
float
)c2y
;

五種預定義的時間函式名字的常量變數分別為

kcamediatimingfunctionlinear,

kcamediatimingfunctioneasein,

kcamediatimingfunctioneaseout,

kcamediatimingfunctioneaseineaseout,

kcamediatimingfunctiondefault.

下圖展示了前面四種timing function的曲線圖,橫座標表示時間,縱座標表示變化量,這點需要搞清楚(並不是平面座標系中xy).

自定義的timing function的函式影象就是一條三次貝塞爾曲線cubic bezier curve,貝塞爾曲線的優點就是光滑,用在這裡就使得變化顯得光滑.一條三次貝塞爾曲線可以由起點終點以及兩個控制點決定.

上面的kcamediatimingfunctiondefault對應的函式曲線其實就是通過[(0.0,0.0), (0.25,0.1), (0.25,0.1), (1.0,1.0)]這四個點決定的三次貝塞爾曲線,頭尾為起點和終點,中間的兩個點是控制點.

上圖中p0是起點,p3是終點,p1和p2是兩個控制點

如果時間變化曲線既不是直線也不是貝塞爾曲線,而是自定義的,又或者某個圖層運動的軌跡不是直線而是乙個曲線,這些是基本動畫無法做到的,所以引入下面的內容,cakeyframeanimation,也即所謂的關鍵幀動畫.

3.cakeyframeanimation

任何動畫要表現出運動或者變化,至少需要兩個不同的關鍵狀態,而中間的狀態的變化可以通過插值計算完成,從而形成補間動畫,表示關鍵狀態的幀叫做關鍵幀.

還可以通過設定可選引數timingfunctions(cakeyframeanimation中timingfunction是無效的)為關鍵幀之間的過渡設定timingfunction,如果values有n個元素,那麼timingfunctions則應該有n-1個.但很多時候並不需要timingfunctions,因為已經設定了夠多的關鍵幀了,比如沒1/60秒就設定了乙個關鍵幀,那麼幀率將達到60fps,完全不需要相鄰兩幀的過渡效果（當然也有可能某兩幀值相距較大,可以使用均勻變化或者增加幀率,比如每0.01秒設定乙個關鍵幀）.

在關鍵幀動畫中還有乙個非常重要的引數,那便是calculationmode,計算模式.其主要針對的是每一幀的內容為乙個座標點的情況,也就是對anchorpoint 和 position 進行的動畫.當在平面座標系中有多個離散的點的時候,可以是離散的,也可以直線相連後進行插值計算,也可以使用圓滑的曲線將他們相連後進行插值計算. calculationmode目前提供如下幾種模式 kcaanimationlinear

kcaanimationdiscrete

kcaanimationpaced

kcaanimationcubic

kcaanimationcubicpaced

kcaanimationlinear calculationmode的預設值,表示當關鍵幀為座標點的時候,關鍵幀之間直接直線相連進行插值計算;

kcaanimationdiscrete 離散的,就是不進行插值計算,所有關鍵幀直接逐個進行顯示;

kcaanimationpaced 使得動畫均勻進行,而不是按keytimes設定的或者按關鍵幀平分時間,此時keytimes和timingfunctions無效;

kcaanimationcubic 對關鍵幀為座標點的關鍵幀進行圓滑曲線相連後插值計算,對於曲線的形狀還可以通過tensionvalues,continuityvalues,biasvalues來進行調整自定義,這裡的數學原理是kochanek–bartels spline,這裡的主要目的是使得執行的軌跡變得圓滑;

kcaanimationcubicpaced 看這個名字就知道和kcaanimationcubic有一定聯絡,其實就是在kcaanimationcubic的基礎上使得動畫執行變得均勻,就是系統時間內運動的距離相同,此時keytimes以及timingfunctions也是無效的.

顯式動畫Animation《轉》

顯式動畫Animation《轉》

animation動畫例項

animation動畫引數

顯式動畫Animation《轉》

顯式動畫Animation《轉》

animation動畫例項

animation動畫引數

相關推薦