顯示動畫的節奏控制

2021-07-22 11:22:51 字數 3610 閱讀 2207

當需要對非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也是無效的.

動畫的節奏

設定動畫的節奏。easein 就是剛進入的時候慢。animation.timingfunctino camediatimingfunction functionwithname kcamediatimingfunctioneaseinaseout 設定錨點和位置,預設錨點為0.0 右下角為1,1 b...

動畫組 顯示動畫

cabasicanimation和cakeyframeanimation僅僅作用於單獨的屬性,而caanimationgroup可以把這些動畫組合在一起。caanimationgroup是另乙個繼承於caanimation的子類,它新增了乙個animations陣列的屬性,用來組合別的動畫。我們把清...

time函式控制爬蟲的節奏

對爬蟲的限制,最主要依賴於每個ip 或每個使用者 的訪問頻次,過高頻率的訪問會被 限制訪問,因此我們應該針對每個目標位址的訪問頻率限定。常用方法是設定間隔時間,抓取網頁之後,停頓固定時間之後,再次進行抓取。例子如下 首先編寫乙個模組檔案規定網頁抓取間隔時間,命名為global var.py,head...