當需要對非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《轉》
當需要對非root layer進行動畫或者需要對動畫做更多自定義的行為的時候,就必須使用到顯式動畫了,顯式動畫的基類為caanimation,常用的是cabasicanimation,cakeyframeanimation有時候還會使用到caanimationgroup,catransition 注...
animation動畫例項
旋轉 縮放移動 傾斜旋轉並縮放 旋轉後縮放 同時展示全部 順序展示全部 還原 display flex width 100 padding top 150upx padding bottom 150upx justify content center overflow hidden backgrou...
animation動畫引數
描述 css keyframes 規定動畫。animation 所有動畫屬性的簡寫屬性，除了 animation play state 屬性。animation name 規定 keyframes 動畫的名稱。animation duration 規定動畫完成乙個週期所花費的秒或毫秒。預設是 0。a...