• 前言
• 一、CALayer 和 Core Animation
  • 1.1 CALayer
  • 1.2 Core Animation
• 二、Facebook POP
• 三、Pop和Core Animation區(qū)別
  • 3.1 Core Animation的基本原理
  • 3.2 POP 動畫庫的基本原理
  • 3.3 二者區(qū)別
  • 3.4 CADisplayLink
• 四、其他
  • 4.1 貝塞爾曲線Bezier Path
  • 4.2 CGAffineTransform與CATransform3D

前言

動畫的需求不多，用到時可能就去找 demo 代碼改一改使用了。發(fā)現(xiàn)對很多概念都不夠清晰，所以還是系統(tǒng)的了解一個東西更重要。在此概括整理一下，附上鏈接，感謝大家互相分享。

一、CALayer 和 Core Animation

• 傻傻分不清：Quartz2D、QuartzCore、CoreAnimation、CoreImage、CoreGraphics
• 細：iOS開發(fā)系列--讓你的應用“動”起來
• demo：iOS動畫（Core Animation）總結(jié)
• 好書：iOS核心動畫高級技巧

1.1 CALayer

CALayer是動畫的載體，動畫是加在 CALayer 上顯示的，所以我們需要先了解一下。

UIView：UIKit框架，用戶交互使用。
CALayer：QuartzCore框架，不能響應事件，為了內(nèi)容展示和動畫操作。

image.png

CALayer子類：

• CAShapeLayer：用來根據(jù)路徑繪制矢量圖形。
• CATextLayer：繪制文字信息。
• CATransformLayer：使用單獨的圖層創(chuàng)建3D圖形。
• CAGradientLayer：繪制線性漸變色。
• CAReplicatorLayer：高效地創(chuàng)建多個相似的圖層并施加相似的效果或動畫。
• CAScrollLayer：沒有交互效果的滾動圖層，沒有滾動邊界，可以任意滾動上面的圖層內(nèi)容。
• CATiledLayer：將大圖裁剪成多個小圖以提高內(nèi)存和性能。
• CAEmitterLayer：各種炫酷的粒子效果。
• CAEAGLLayer：用來顯示任意的OpenGL圖形。
• AVPlayerLayer：用來播放視頻。

CALayer的用處很大的，而且它并沒有為所有可能的場景進行優(yōu)化。為了獲得Core Animation最好的性能，你需要為你的工作選對正確的工具。

1.2 Core Animation

Core Animation是 iOS 和 OS X 平臺上負責圖形渲染與動畫的基礎(chǔ)框架。

image.png

CAAnimation：核心動畫的基礎(chǔ)類。不能直接使用，負責動畫運行時間、速度的控制，本身實現(xiàn)了CAMediaTiming協(xié)議。

CAPropertyAnimation：屬性動畫的基類。通過屬性進行動畫設(shè)置，注意是可動畫屬性，不能直接使用。

• CABasicAnimation：基礎(chǔ)動畫。通過屬性修改進行動畫參數(shù)控制，只有初始狀態(tài)和結(jié)束狀態(tài)。

• CAKeyframeAnimation：關(guān)鍵幀動畫。同樣是通過屬性進行動畫參數(shù)控制，但是同基礎(chǔ)動畫不同的是它可以有多個狀態(tài)控制。

基礎(chǔ)動畫、關(guān)鍵幀動畫都屬于屬性動畫，就是通過修改屬性值產(chǎn)生動畫效果，開發(fā)人員只需要設(shè)置初始值和結(jié)束值，中間的過程動畫（又叫“補間動畫”）由系統(tǒng)自動計算產(chǎn)生。和基礎(chǔ)動畫不同的是關(guān)鍵幀動畫可以設(shè)置多個屬性值，每兩個屬性中間的補間動畫由系統(tǒng)自動完成，因此從這個角度而言基礎(chǔ)動畫又可以看成是有兩個關(guān)鍵幀的關(guān)鍵幀動畫。

CAAnimationGroup：動畫組。動畫組是一種組合模式設(shè)計，可以通過動畫組來進行所有動畫行為的統(tǒng)一控制，組中所有動畫效果可以并發(fā)執(zhí)行。

CATransition：轉(zhuǎn)場動畫。就是從一個場景以動畫的形式過渡到另一個場景。

二、Facebook POP

除了 蘋果系統(tǒng)自帶的Core Animation動畫，還有很多第三方封裝動畫，比較普遍的就是 Facebook 發(fā)布的POP動畫了。POP 是2014年發(fā)布的，是個相當成熟且久經(jīng)考驗的框架。

• GitHub：facebook/pop
• FaceBook POP 動畫詳解
• Facebook POP 進階指南
• POP介紹與使用實踐(快速上手動畫)

POP是一個來自于Facebook，在iOS和OS X上通用的極具擴展性的動畫引擎。

image.png

Engine、Utility、Webcore：微動畫流暢性提供支持。
POPPropertyAnimation：屬性動畫。

• POPBasicAnimation：基礎(chǔ)動畫。
• POPSpringAnimation：彈性動畫。
• POPDecayAnimation：衰減動畫。

POPCustomAnimation：自定義動畫。擴展性強，不止于動畫功能。

POP在基本的靜態(tài)動畫的基礎(chǔ)上增加的彈簧動畫與衰減動畫，使之能創(chuàng)造出更真實更具物理性的交互動畫。

2014年P(guān)OP發(fā)布后，2015年 Apple 在iOS9 系統(tǒng)中開始加入CASpringAnimation。

三 、Pop和Core Animation區(qū)別

• iOS動畫系列之---Pop和Core Animation區(qū)別
• 從CoreAnimation到Pop
• Core Animation基本概念和Additive Animation

3.1 Core Animation的基本原理

在Core Animation 做相關(guān)動畫時，你的應用完全不會參與動畫的繪制，這些動畫繪制完全獨立于你的應用進程。即便主線程阻塞，也不會影響你的動畫執(zhí)行。

render server進程是真正處理動畫的地方。而且線程的優(yōu)先級也比我們主線程優(yōu)先級高。所以有時候即使我們的 App 主線程 busy ，依然不會影響到手機屏幕的繪制工作。

3.2 POP 動畫庫的基本原理

POP 本質(zhì)上是基于定時器的動畫庫，使用每秒 60 頻率的定時器，使得動畫刷新繪制頻率與屏幕刷新頻率一致。很多這類動畫庫都使用 CADisplayLink 做為一個回調(diào)源。

一旦定時器刷新，動畫庫會計算那些活動的東西的狀態(tài)（通常是layer 屬性，如 bound，opactiy，transform 等）。然后動畫庫提供最新計算的值給有動畫的 layer 由于 layer 的一些參數(shù)已經(jīng)被改變，你需要通知系統(tǒng)在屏幕上重繪一切東西，通過這種方式來做動畫的。

POP 缺陷：
由于 POP 是基于定時器定時刷新添加動畫的原理，那么如果將動畫庫運行在主線程上，會由于線程阻塞的問題導致動畫效果出現(xiàn)卡頓、不流暢的情況。更為關(guān)鍵的是，你不能將動畫效果放在子線程，因為你不能將對 view 和 layer 的操作放到主線程之外。

POP 受主線程阻塞的影響很大，在使用過程中，應避免在有可能發(fā)生主線程阻塞的情況下使用 POP ，避免制作卡頓的動畫效果，產(chǎn)生不好的用戶體驗。

3.3 二者區(qū)別

1. 主線程影響不同
在主線程沒有阻塞的情況下，兩種動畫庫的表現(xiàn)并無差異。在主線程阻塞時，利用 POP 制作的動畫視圖，在每隔 1s 都會卡頓一下，而 CA 的視圖卻完全不受主線程阻塞的影響。

2. 載體限制不同
Core Animation：只能是 CALayer 。
Pop Animation：可以是任意基于 NSObject 的對象 。

3. 使用方式不同
Core Animation：只有 Delegate 回調(diào)方法。
Pop Animation：有 Delegate 或 Block 兩種回調(diào)。

4. 動畫效果有點不一樣，其在于時間函數(shù)
Core Animation：顯示動畫時，默認的時間函數(shù)是 kCAMediaTimingFunctionLinear 。
POP：默認的是 kCAMediaTimingFunctionEaseOut 。只有手動把 pop 參數(shù)設(shè)置成 kCAMediaTimingFunctionLinear ，兩者動畫就一致了。

5. 動畫結(jié)束時不一樣
與 iOS 自帶的動畫不同，如果你在動畫的執(zhí)行過程中刪除了物體的動畫，那么物體會停在動畫狀態(tài)的最后一個瞬間，而不是閃回開始前的狀態(tài)。

3.4 CADisplayLink

• CADisplayLink

CADisplayLink是一個能讓我們以和屏幕刷新率相同的頻率將內(nèi)容畫到屏幕上的定時器。我們在應用中創(chuàng)建一個新的 CADisplayLink 對象，把它添加到一個runloop中，并給它提供一個target和selector在屏幕刷新的時候調(diào)用。

CADisplayLink 與 NSTimer 有什么不同：iOS設(shè)備的屏幕刷新頻率是固定的，CADisplayLink在正常情況下會在每次刷新結(jié)束都被調(diào)用，精確度相當高。

NSTimer的精確度就顯得低了點，比如NSTimer的觸發(fā)時間到的時候，runloop如果在阻塞狀態(tài)，觸發(fā)時間就會推遲到下一個runloop周期。并且 NSTimer新增了tolerance屬性，讓用戶可以設(shè)置可以容忍的觸發(fā)的時間的延遲范圍。

CADisplayLink使用場合相對專一，適合做UI的不停重繪，比如自定義動畫引擎或者視頻播放的渲染。NSTimer的使用范圍要廣泛的多，各種需要單次或者循環(huán)定時處理的任務(wù)都可以使用。在UI相關(guān)的動畫或者顯示內(nèi)容使用 CADisplayLink比起用NSTimer的好處就是我們不需要在格外關(guān)心屏幕的刷新頻率了，因為它本身就是跟屏幕刷新同步的。

四、其他

想讓動畫更加炫酷，我們還需要學習以下兩個知識點。

4.1 貝塞爾曲線Bezier Path

• 公式：貝塞爾曲線
• 《iOS Core Animation：Advanced Techniques》學習記錄
• iOS仿QQ消息動畫
• iOS CoreAnimation專題——技巧篇（二）CAShapeLayer with Bezier Path - Layer世界的神奇畫筆
• demo：iOS滾珠菜單動效

如果你想要定義曲線運動的軌跡，那么這個知識點是必須學習的（例如：QQ水滴）。

Bézier curve(貝塞爾曲線)是應用于二維圖形應用程序的數(shù)學曲線。 曲線定義：起始點、終止點（也稱錨點）、控制點。通過調(diào)整控制點，貝塞爾曲線的形狀會發(fā)生變化。 1962年，法國數(shù)學家Pierre Bézier第一個研究了這種矢量繪制曲線的方法，并給出了詳細的計算公式，因此按照這樣的公式繪制出來的曲線就用他的姓氏來命名，稱為貝塞爾曲線。

4.2 CGAffineTransform與CATransform3D

• 【iOS】CGAffineTransform和CATransform3D
• 簡單代碼實現(xiàn)TableView中Cell出現(xiàn)時彈出動畫

CGAffineTransform是用于2D層面的，操作 NSView、UIView 或者其他 2D Core Graphics 元素的.

CATransform3D是 Core Animation 的結(jié)構(gòu)體，是用來做更復雜的關(guān)于 CALayer 的3D操作。CATransform3D 有著與 OpenGL 模型視圖矩陣相同的內(nèi)部結(jié)構(gòu)，原因在于 Core Animation 是建立在 OpenGL 之上的，CALayer是 OpenGL 結(jié)構(gòu)的一種封裝。