我們在平時的開發過程中,難免會遇到一些動畫效果需要我們去實現。如果是十分復雜的動畫我們大可以使用gif或者利用播放一組圖片來實現,但如果是一些簡單的動畫,比如:形變(平移、伸縮、旋轉等)、轉場等動畫我們可以自己利用蘋果所提供的API很簡單快捷的去實現。本篇文章旨在通過一些動畫實例,來帶領大家熟悉Core Animation的一些常用使用方法,相信讀者在看完本篇文章之后,可以很輕松的寫出許多自己創造出的小動畫。那么,讓我們現在開始吧!
UIView 與 CALayer
UIView相信大家再熟悉不過,所有可以顯示在屏幕上的控件或者視圖都繼承自UIView對象。當我們打開UIVIew的頭文件,我們會看到這么一個屬性:
那么這個屬性是做什么的呢?
CALayer的前綴CA是Core Animation的簡寫,通過名稱我們可以知道這是一個負責處理核心動畫的圖層,那么為什么每一個UIView都要有一個CALayer屬性,他們兩者有什么關系呢?
在iOS中,你能看得見摸得著的東西基本上都是UIView,比如:一個按鈕、一個文本標簽、一個文本輸入框、一個圖標等,這些都是UIView。而UIView之所以能顯示在屏幕上,完全是因為它的內部有一個圖層。在創建UIView對象時,UIView內部會自動創建一個圖層(即CALayer對象),通過UIView的layer屬性可以訪問這個層。當UIView需要顯示到屏幕上時,會調用drawRect:方法進行繪圖,并且會將所有內容繪制在自己的圖層上,繪圖完畢后,系統會將圖層拷貝到屏幕上,于是就完成了UIView的顯示。
關于CALayer的一些注意點
首先,CALayer是定義在QuartzCore框架中的,CGImageRef、CGColorRef兩種數據類型是定義在CoreGraphics框架中的,而UIColor、UIImage是定義在UIKit框架中。QuartzCore框架和CoreGraphics框架是可以跨平臺使用的,在iOS和Mac OSX上都能使用,但是UIKit只能在iOS中使用。為了保證課移植性,QuartzCore只能使用CGImageRef和CGColorRef,這點需要注意。
我們在平時開發過程中,經常需要處理一些圓角的問題,這個時候我們往往會通過設置layer的cornerRadius屬性來實現,但這里我們需要注意一下UIImageVIew,如果通過修改UIImageVIew的layer的cornerRadius屬性,是不能夠對我們的圖片進行圓角設置的。那么為什么恰恰UIImageView不可以呢?
原因在于我們對于一般的UIView的layer的cornerRadius屬性進行修改,修改的其實是layer上繪制的內容,而UIImageView的圖片不是在layer上繪制的,而是存儲在layer的contents屬性里面:
我們通過注釋可以知道,contents里存儲的就是我們所要顯示的圖片的CGImageRef對象(為什么是CGImageRef而不是UIImage請參考上一點注意)。所以修改UIImageView的layer的cornerRadius屬性并不能給圖片進行圓角設置。那么我們還是需要圓角設置的圖片該怎么辦呢?這時候我們只需要修改下layer的masksToBounds這個屬性就可以實現對UIImageView圖片的圓角設置。但是請大家注意:
雖然最終UIImageView也可以實現對圖片的圓角設置,但與其他UIView對象的原理是不同的:前者是通過layer的masksToBounds屬性修改了控件的形狀,而后者僅僅是修改了所要繪制內容的范圍。?
UIView與CALayer的選擇
既然UIVIew和CALayer都可以實現相同的顯示效果,那究竟該選擇誰好呢?其實,對比CALayer,UIView多了一個事件處理的功能(CALayer繼承自NSObject,UIView繼承自UIResponder)。也就是說CALayer不能處理用戶的觸摸事件,而UIView可以。所以,如果顯示出來的東西需要跟用戶進行交互的話,用UIView;如果不需要跟用戶進行交互,用UIView或者CALayer都可以。當然,CALayer的性能會高一些,因為它少了事件處理的功能,更加輕量級。
當我們清楚了UIView與CALayer之間的關系,我們終于可以開始我們的動畫之旅啦。
Position和AnchorPoint
在正式開始我們Core Animation的使用之前,我們還需要知道兩個很重要的屬性position和anchorPoint。通過本小節的學習,我們可以完成一個自定義的時鐘,效果如下圖: