iOS CoreAnimation動畫系列教程

1.cabasicanimation

通過設定起始點，終點，時間，動畫會沿著你這設定點進行移動。可以看做特殊的cakeyframeanimation

2.cakeyframeanimation

keyframe顧名思義就是關鍵點的frame，你可以通過設定calayer的始點、中間關鍵點、終點的frame，時間，動畫會沿你設定的軌跡進行移動

3.caanimationgroup

group也就是組合的意思，就是把對這個layer的所有動畫都組合起來。ps：乙個layer設定了很多動畫，他們都會同時執行，如何按順序執行我到時候再講。

4.catransition

這個就是蘋果幫開發者封裝好的一些動畫，

圖1 圖2

下面我們以實現「小圓球繞矩形跑道迴圈跑動」為目標開始對cakeyframeanimation的介紹，如圖2所示。小圓球的運動軌跡可分為四段，每段的運動速度不同，第一段中先慢後快再慢。先貼上原始碼方便後面分析：

//繞矩形迴圈跑

（1）values屬性

values屬性指明整個動畫過程中的關鍵幀點，例如上例中的a-e就是通過values指定的。需要注意的是，起點必須作為values的第乙個值。

（2）path屬性

作用與values屬性一樣，同樣是用於指定整個動畫所經過的路徑的。需要注意的是，values與path是互斥的，當values與path同時指定時，path會覆蓋values，即values屬性將被忽略。例如上述例子等價於**中values方式的path設定方式為：

1     cgmutablepathref path =cgpathcreatemutable();
2 cgpathmovetopoint(path, null, rectlayer.position.x - 15, rectlayer.position.y - 15
);3 cgpathaddlinetopoint(path, null, 320 - 15
, rectlayer.frame.origin.y);
4 cgpathaddlinetopoint(path, null, 320 - 15, rectlayer.frame.origin.y + 100
);5 cgpathaddlinetopoint(path, null, 15, rectlayer.frame.origin.y + 100
);6 cgpathaddlinetopoint(path, null, 15
, rectlayer.frame.origin.y);
7 rectrunanimation.path =path;
8 cgpathrelease(path);

（3）keytimes屬性

該屬性是乙個陣列，用以指定每個子路徑(ab,bc,cd)的時間。如果你沒有顯式地對keytimes進行設定，則系統會預設每條子路徑的時間為：ti=duration/(5-1)，即每條子路徑的duration相等，都為duration的1\4。當然，我們也可以傳個陣列讓物體快慢結合。例如，你可以傳入，其中首尾必須分別是0和1，因此tab=0.1-0, tcb=0.6-0.1, tdc=0.7-0.6, ted=1-0.7.....

（4）timefunctions屬性

用過uikit層動畫的同學應該對這個屬性不陌生，這個屬性用以指定時間函式，類似於運動的加速度，有以下幾種型別。上例子的ab段就是用了淡入淡出效果。記住，這是乙個陣列，你有幾個子路徑就應該傳入幾個元素

1 kcamediatimingfunctionlinear//

線性2 kcamediatimingfunctioneasein//

淡入3 kcamediatimingfunctioneaseout//

淡出4 kcamediatimingfunctioneaseineaseout//

淡入淡出

5 kcamediatimingfunctiondefault//

預設

（5）calculationmode屬性

該屬性決定了物體在每個子路徑下是跳著走還是勻速走，跟timefunctions屬性有點類似

const

kcaanimationlinear//線性，預設

2const

kcaanimationdiscrete//離散，無中間過程，但keytimes設定的時間依舊生效，物體跳躍地出現在各個關鍵幀上

3const

kcaanimationpaced//平均，keytimes跟timefunctions失效

4const

kcaanimationcubic//平均，同上

5const kcaanimationcubicpaced//平均，同上

此外，動畫的暫停與開始可以通過下面的方式做到：

1 -(void)pauselayer:(calayer*)layer27
8 -(void)resumelayer:(calayer*)layer
9

iOS CoreAnimation動畫系列教程

Android Studio使用技巧系列教程（一）

Android Studio使用技巧系列教程（三）

Android Studio使用技巧系列教程（三）

iOS CoreAnimation動畫系列教程

Android Studio使用技巧系列教程（一）

Android Studio使用技巧系列教程（三）

Android Studio使用技巧系列教程（三）

相關推薦