iOS動畫系列之三:Core Animation

weixin_34166847發表於2017-08-13

通過前面兩篇文章,大概基本上清楚了CALayer在動畫中的作用。本宅胖在看到這篇文章的標題的時候,心裡暗自捏了一下大腿。真是自己給自己挖坑不嫌大啊!

又不能劇透直接使用CABasic Animation,也不能用CAKeyFrame Animation和CAAnimation Group。愁死了~這麼理論的東西。

1. 介紹

  • Core Animation是一個非常強大的動畫處理 API,使用它能做出非常絢麗的動畫效果,而且往往是事半功倍,也就是說,使用少量的程式碼就可以實現非常強大的功能。
  • 蘋果封裝的 UIView 的 block 動畫就是對核心動畫的封裝,使用起來更加簡單。
  • 絕大多數情況下,使用 UIView 的 block 動畫能夠滿足開發中的日常需求。
  • 一些很酷炫的動畫,還是需要通過核心動畫來完成的。

2. 支援的平臺

  • Core Animation 同時支援 MAC OS 和 iOS 平臺

  • Core Animation 是直接作用在 CALayer 的,並非 UIView。所以這個系列,我們們是從CALayer開始的。

  • Core Animation 的動畫執行過程都是在後臺操作的,不會阻塞主執行緒。

3. Core Animation 的繼承結構圖

  • 是所有動畫物件的父類,負責控制動畫的持續時間和速度、是個抽象類,不能直接使用,應該使用具體子類。需要注意的是CAAnimationCAPropertyAnimation 都是抽象類。
  • view是負責響應事件的,layer是負責顯示的。

下面盜用了一張網路上的圖片用來解釋繼承結構。

繼承結構圖

黃色的區塊是常用的屬性、方法或者需要遵守的協議,灰色的是名稱。

其中CAAnimationGroup、CABasicAnimation、CAKeyFramkeAnimation我們們會在下次更新中寫一些小例子。

4. 常見屬性和使用步驟

4.1 使用步驟

通常分成三部完成:
1,建立核心動畫物件;
2,設定動畫屬性;
3,新增到要作用的layer上。
就想把大象放進冰箱需要三步一樣。哈哈~

4.2 常用屬性

就是我們們上面圖片中的小黃圖顯示的。

  • duration:持續時間,預設值是0.25秒
  • repeatCount:重複次數,無線迴圈可以設定HUGE_VALF或者CGFLOAT_MAX
  • repeatDuration:重複時間
  • removeOnCompletion: 預設為YES,代表動畫執行完畢後就從圖層上移除,圖形會恢復到執行動畫之前的狀態。如果想要圖層保持顯示動畫執行後的狀態,那就設定為NO,同時設定fillMode為kCAFillModeForwards
  • fillMode:決定當前物件在非active時間段的行為
  • beginTime:可以用來設定動畫延時執行,若想延遲2s,就設定為CACurrentMediaTIme() + 2
  • CACurrentMediaTIme():圖層的當前時間
  • timingFunction:速度控制函式,控制動畫執行節奏
  • delegate:動畫代理

4.3 animationWithKeyPath中,常用的keyPath

屬性名稱 型別 作用
transform.rotation.x CGFloat或float 繞X軸座標旋轉 角度
transform.rotation.y CGFloat或float 繞Y軸座標旋轉 角度
transform.rotation.z CGFloat或float 繞Z軸座標旋轉 角度
transform.rotation CGFloat或float 作用與transform.tation.z一樣
---- ---- ----
transform.scale CGFloat 整個layer的比例
transform.scale.x CGFloat x軸座標比例變化
transform.scale.y CGFloat y軸座標比例變化
transform.scale.z CGFloat z軸座標比例變化
---- ---- ----
transform.translation CGMutablePathRef 整個layer的xyz軸都進行移動
transform.translation.x CGMutablePathRef 橫向移動
transform.translation.y CGMutablePathRef 縱向移動
transform.translation.z CGMutablePathRef 縱深移動
---- ---- ----
opacity CGFloat 透明度,閃爍等動畫用 。範圍是0~1
backgroundColor CGColor 背景顏色
cornerRadius CGFloat 圓角

4.4 動畫填充模式

  • kCAFillModeForwards:當動畫結束後,layer會一直保持著動畫最後的狀態
  • kCAFillModeBackwards:在動畫開始前,只需要將動畫加入了一個layer,layer便立即進入動畫的初始狀態並等待動畫開始
  • kCAFillModeBoth:這個其實就是上面兩個合成,動畫加入後,開始之前,layer便處於動畫初始狀態,動畫結束後layer保持動畫最後的狀態
  • kCAFillModeRemoved:這個是預設值,也就是說當動畫開始前和動畫結束後,動畫對layer都沒有影響,動畫結束後,layer會恢復到之前的狀態
      keyArc.calculationMode = kCAAnimationPaced;複製程式碼

    4.5 速度控制函式

  • kCAMediaTimingFunctionLinear(線性):勻速,給你一個相對靜態的感覺
  • kCAMediaTimingFunctionEaseIn(漸進):動畫緩慢進入,然後加速離開
  • kCAMediaTimingFunctionEaseOut(漸出):動畫全速進入,然後減速的到達目的地
  • kCAMediaTimingFunctionEaseInEaseOut(漸進漸出):動畫緩慢的進入,中間加速,然後減速的到達目的地。這個是預設的動畫行為。
      keyArc.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];複製程式碼

是不是確實很枯燥?但是這條路本身就是大部分時間都很枯燥的啦~想逃也逃不掉。

這些屬性和方法也的確記不住,所以這一篇其實也就是自己總結整理了一下。以後再用的時候,看看自己總結的就好了。省得每次用的時候還要再去看一下文件或者搜尋了。

--------------華麗分割線,iOS動畫系列全集連結-------------------
第一篇:iOS動畫系列之一:通過實戰學習CALayer和透視的原理。做一個帶時分秒指標的時鐘動畫(上)
第二篇:iOS動畫系列之二:通過實戰學習CALayer和透視的原理。做一個帶時分秒指標的時鐘動畫。包含了OC和Swift兩種原始碼(下)
第三篇:iOS動畫系列之三:Core Animation。介紹了Core Animation的常用屬性和方法。
第四篇:CABasic Animation。iOS動畫系列之四:基礎動畫之平移篇
第五篇:CABasic Animation。iOS動畫系列之五:基礎動畫之縮放篇&旋轉篇
第六篇:iOS動畫系列之六:利用CABasic Animation完成帶動畫特效的登入介面
第七篇:iOS動畫系列之七:實現類似Twitter的啟動動畫
第八篇:iOS動畫系列之八:使用CAShapeLayer繪畫動態流量圖
第九篇:iOS動畫系列之九:實現點讚的動畫及播放起伏指示器
第十篇:實戰系列:繪製過山車場景

相關文章