核心動畫(Core Animation Programming)

iOS_小賢發表於2019-01-15
動畫

Content:

  • Layer Tree Structure
  • Core Animation's introduction
  • What's UIView?
  • What's CALayer?
  • UIView and CALayer relationship.
  • CALayer's function

Layer Tree Structure

Core Animation 這個框架實際上非常容易讓iOS開發者誤解僅僅是用來做動畫效果的框架.實際上動畫僅僅是是它功能的冰水一角. 它包括了圖形繪製,投影,動畫的Object-C 類集合.它通過我們iOS開發熟悉的應用程式套件與CocoaTouch 檢視架構的抽象分層模式,提供了一套非常流暢的動畫的介面出來.

Core Animation 是一個複合引擎,它能快速的組合螢幕上不同顯示的內容. 並將其分解成獨立圖層,儲存到Layer Tree 的體系中.

Core Animation's Introduction

有了Core Animation 這個框架,開發者就可以通過提供的介面,使得開發更加簡單,例如:

  • 簡單易用的高效能混合程式設計模型
  • 用類似於檢視一樣,使用圖層來建立複雜的程式設計介面
  • 輕量化的資料結構,它可以同時顯示讓上百個圖層產生動畫效果
  • 一套非常較簡單的動畫介面,能讓動畫執行在獨立的執行緒中,並可以獨立於主執行緒之外.
  • 一旦動畫配置完成並啟動,核心動畫就能獨立並完全控制相應的動畫幀.
  • 提高應用效能.應用程式只有當發生改變的時候才會重繪內容. 使用Core Animation 可以不使用其他圖形API,例如OpenGL 來獲取高效的動畫效能.
  • 靈活的佈局管理模型,允許圖層相對同級圖層的關係來設定屬性的位置和大小.

Core Animaiton 分類

  • 提供顯示內容的圖層類
  • 動畫和計時類
  • 佈局和約束類
  • 事務類,在原子更新的時候組合圖層類

核心動畫是包括了基礎類Quartz 核心框架(Quartz Core Framework)裡面.Core Animation Class hierarchy (核心動畫類層次結構圖如下).

image

What's UIView?

在iOS開發中,這個使用頻率非常高的控制元件,同時在iOS 所有原生的檢視都是由UIView 派生而來. UIView 具備處理觸控事件的能力,並且支援基於Core Graphics 繪圖.來實現仿射變換(比如旋轉縮放平移等).或者一些簡單的滑動/漸變的動畫.

檢視在螢幕上可以是一個矩形塊,它能夠攔截類似滑鼠點選或者觸控手勢等使用者互動方式. 並且在層級關係上可以互相巢狀,一個檢視可以管理它所有的子檢視的位置等.在開發專案過程中,這是非常常見的一個使用場景. 一個我們最常用的控制元件,我們是否真正瞭解它?

What's CALayer

CALayer 類是一個與UIView 非常類似的類. 同樣也是被層級關係樹管理的矩形塊. 也可以填充為圖片,文字或者背景顏色等. 也能管理子檢視的位置.甚至CALayer 是有很多方法和屬性來做動畫處理和變換處理.

但是,CALayer與UIView在功能上的區別在哪兒? CALayer 不處理使用者互動. CALayer 不清楚具體的響應鏈(iOS通過檢視層級關係倆傳遞使用者觸控事件的機制).它不能響應使用者事件,即使API提供了一些方法來判斷觸點是否在圖層的範圍之內.

在Core Animation的類層次結構圖中,可以發現圖層類(LayerClasses) 是Core Animation 的核心基礎. CALayer 是整個圖層類的基礎,它是所有核心動畫圖層類的父類. 和UIView 一樣,CALayer 也是有自己的父圖層類,以及同樣擁有子圖層類的集合. 它構成了一個圖層樹的層次結構. CAlayer 從Application Kit 與 Cocoa Touch 的檢視類分離出來了.

UIView and CALayer relationship.

UIView 與 CALayer 平行的層級關係

image

  • 每個UIView 都會有一個CALayer 例項圖層屬性.也就是backing layer.UIView 的職責就是建立並管理這個圖層.用來確保當前子檢視在層級關係中新增或者移除的時候,他們的關聯圖層也同樣對應層級關係.
  • 實際上,這背後的關聯的圖層才是真正用來在螢幕上顯示和做動畫的.UIView 就是對CALayer圖層的封裝,提供使用者互動介面.

圖層數結構

每個可見的圖層樹,都由2個相應的樹組成.一個是呈現樹,一個是渲染樹.

image

  • 圖層樹: 包含每一層的物件模型值.其實就是開發者設定的圖層的屬性值
  • 呈現樹: 包括當前動畫發生時候將要顯示的相應的值,例如,你要給圖層背景顏色設定新的值的時候,它就會立即修改圖層樹裡對應的值.但是在呈現樹裡面的背景顏色值將要現在給使用者的時候才會更新為新值.
  • 渲染樹: 在渲染圖層的使用呈現樹的值,渲染樹負責執行獨立u應用活動的複雜操作.渲染由一個單獨的程式/執行緒來執行,使其對應用程式的執行迴圈影響降到最低.

為什麼iOS要基於UIView 和 CALayer 提供兩個平行的層級關係.

蘋果為何要如此設計?為何不用一個簡單的層級來處理所有的事情. 其實原因在於職責分離,這樣可以避免很多重複程式碼. 在iOS 和 Mac OS 兩個平臺下,事件和使用者互動存在比較大的差異,比如Mac OS的使用者互動可以通過滑鼠/鍵盤控制.而iOS則通過手勢觸控. 這就是為何iOS開發介面使用UIKit 和UIView ,而Mac OS 開發介面使用AppKit 和 NSView. 因為他們之間的使用者互動手段不一樣.但是它們在功能上是非常類似的,所以都有CALayer ,而CALayer 只處理顯示上的需求,不做互動上的需求處理.這樣設計就可以減少非常多不必要的程式碼.

為何開發者要使用CALayer ?

根據剛剛的描述,既然CALayer 只是UIView 的內部實現細節,那為何在要來使用或者學習它? 而且蘋果也提供給我們非常多優美簡潔且高效的介面,幾乎沒有必要去使用CALayer了.實際上介面的封裝帶來了方便卻喪失了靈活性.如果你略微想在底層上做一些改變或者使用一些蘋果沒有提供的介面功能,這是你就只能介入到Core Animation的底層之外,別無他選.

  • 圖層不能處理觸控事件,同樣也要檢視不能做的事情:
    • 陰影,圓角,顏色邊框
    • 3D變換
    • 非矩形範圍
    • 透明遮罩
    • 多級非線性動畫

CALayer's function

除了CALayer 類,CoreAnimation 還提供了很多其他內容的類.

  • MAC OS 與 iOS 通用的類:

    • CAScrollLayer: CALayer 子類,簡化顯示圖層的一部分內容,CAScrollLayer 物件的滾動區域範圍在它的子圖層中定義.CAScorllLayer 不提供鍵盤/滑鼠處理事件和不顯示滾動條.
    • CATextLayer : 為了方便顯示字串圖層
    • CATiledLayer: 允許遞增的顯示大而複雜的圖片

  • Mac OS 單獨提供的類

    • CAOpenGLLayer 提供一個OpenGL 渲染環境.你必須繼承這個類才能使用OpenGL 提供的內容. 內容可以靜態也可以及時更新

    • QCCompositionLayer(Quartz框架提供): 顯示Quartz合成動畫.

    • QTMovieLayer & QTCaptureLayer: (QTKit框架提供),播放QuickTime 視訊內容

  • iOS 新增的相關Layer

    • CAEAGLLayer : OpenGL ES 渲染環境

End

  • 參考 #核心動畫程式設計指南#
  • 參考 #iOS核心動畫高階技巧#

關注微信公眾號：iOSSir，每日更新蘋果資訊、技術乾貨！

image.png

相關文章