iOS -- Core Animation的常用使用技巧

我們在平時的開發過程中,難免會遇到一些動畫效果需要我們去實現。如果是十分復雜的動畫我們大可以使用gif或者利用播放一組圖片來實現,但如果是一些簡單的動畫,比如:形變(平移、伸縮、旋轉等)、轉場等動畫我們可以自己利用蘋果所提供的API很簡單快捷的去實現。本篇文章旨在通過一些動畫實例,來帶領大家熟悉Core Animation的一些常用使用方法,相信讀者在看完本篇文章之后,可以很輕松的寫出許多自己創造出的小動畫。那么,讓我們現在開始吧!


UIView 與 CALayer

UIView相信大家再熟悉不過,所有可以顯示在屏幕上的控件或者視圖都繼承自UIView對象。當我們打開UIVIew的頭文件,我們會看到這么一個屬性:

每一個UIView里面都有一個layer屬性

那么這個屬性是做什么的呢?


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屬性里面:

用于存放UIImageView的image

我們通過注釋可以知道,contents里存儲的就是我們所要顯示的圖片的CGImageRef對象(為什么是CGImageRef而不是UIImage請參考上一點注意)。所以修改UIImageView的layer的cornerRadius屬性并不能給圖片進行圓角設置。那么我們還是需要圓角設置的圖片該怎么辦呢?這時候我們只需要修改下layer的masksToBounds這個屬性就可以實現對UIImageView圖片的圓角設置。但是請大家注意:

雖然最終UIImageView也可以實現對圖片的圓角設置,但與其他UIView對象的原理是不同的:前者是通過layer的masksToBounds屬性修改了控件的形狀,而后者僅僅是修改了所要繪制內容的范圍。?


上面兩個視圖均為UIImageView對象,同樣設置了layer的cornerRadius屬性,但是由于右邊的UIImageView對象有圖片,所以并沒有進行圓角設置


與上張圖片不同的是,此時設置了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。通過本小節的學習,我們可以完成一個自定義的時鐘,效果如下圖:

僅通過layer屬性的修改,完成一個自定義的時鐘
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容