iOS動畫淺匯

標籤：

轉自：http://www.cocoachina.com/ios/20160311/15660.html

在iOS開發中，製作動畫效果是最讓開發人員享受的環節之一。一個設計嚴謹、精細的動畫效果能給使用者耳目一新的效果，吸引他們的眼光 —— 這對於app而言是非常重要的。我們總是追求更為酷炫的實現，如果足夠仔細，我們不難發現一個好的動畫通過步驟分解後本質上不過是一個個簡單的動畫實現。本文就個人搜集的一些動畫相關的理論和實踐知識做個小結，不足之處請勿見怪。

理論 UIview VS UIlayer

UIView只是CALyer之上的封裝，更準確的來說，UIView是CALyer的簡版封裝，加上事件處理的集合類。 CALayer是QuartzCore庫內的類，是iOS上最基本的繪製單元。其次，我們知道iOS平台的Cocoa Touch 是源於OS X平台的Cocoa)，是在Cocoa的基礎上添加了適用於移動手機裝置的手勢識別、動畫等特性；但從底層實現上來說，Cocoa Touch與Cocoa共用一套底層的庫，其中就包括了QuartCore.framework；但QuartCore.framework一開始就是為OS X設計的，所以其中有部分特性是不適合做行動裝置開發的，比如最重要的座標系統。因此，我們也就不難理解為何UIView/NSView在CALayer上做了一層封裝。

基於UIView實現的動畫

簡單的Block動畫

UIView

 

 

彈性動畫

主要畫面格動畫（中間可以添加合適多的幀來做不同的銜接動畫）

 

CALayer動畫

常用屬性 

duration : 動畫的期間

beginTime : 動畫的開始時間 

repeatCount : 動畫的重複次數 

autoreverses : 執行的動畫按照原動畫返回執行 

timingFunction : 控制動畫的顯示節奏，系統提供五種值選擇， 分別是 

 

• kCAMediaTimingFunctionLinear 線性動畫

• kCAMediaTimingFunctionEaseIn 先慢後快（慢進快出）

• kCAMediaTimingFunctionEaseOut 先塊後慢（快進慢出）

• kCAMediaTimingFunctionEaseInEaseOut 先慢後快再慢

• kCAMediaTimingFunctionDefault 預設，也屬於中間比較快

path：主要畫面格動畫中的執行路徑 

type：過渡動畫的動畫類型，系統提供了四種過渡動畫：

• kCATransitionFade 漸層效果

• kCATransitionMoveIn 進入覆蓋效果

• kCATransitionPush 推出效果

• kCATransitionReveal 揭露離開效果

subtype : 過渡動畫的動畫方向

• kCATransitionFromRight 從右側進入

• kCATransitionFromLeft 從左側進入 

• kCATransitionFromTop 從頂部進入 

• kCATransitionFromBottom 從底部進入

基礎動畫主要提供了對於CALayer對象中的可變屬性進行簡單動畫的操作。比如：位移、透明度、縮放、旋轉、背景色等等。 重要屬性 fromValue ： keyPath對應的初始值 toValue ： keyPath對應的結束值。

• 基礎動畫（CABaseAnimation） 0:1 1:0 實現下拉剪頭的展開和收合

• 主要畫面格動畫（CAKeyframeAnimation） CAKeyframeAnimation和CABaseAnimation都屬於CAPropertyAnimatin的子類。CABaseAnimation只能從一個數值（fromValue）變換成另一個數值（toValue）,而CAKeyframeAnimation則會使用一個NSArray儲存一組主要畫面格。 重要屬性 values ： 就是上述的NSArray對象。裡面的元素稱為”主要畫面格”(keyframe)。動畫對象會在指定的時間(duration)內，依次顯示values數組中的每一個主要畫面格 path ： 可以設定一個CGPathRefCGMutablePathRef,讓層跟著路徑移動。path只對CALayer的anchorPoint和position起作用。如果你設定了path，那麼values將被忽略。 keyTimes ： 可以為對應的主要畫面格指定對應的時間點,其取值範圍為0到1.0,keyTimes中的每一個時間值都對應values中的每一幀.當keyTimes沒有設定的時候,各個主要畫面格的時間是平分的。

• 組合動畫：

• 過渡動畫（CATransition） 多數為私人的API使用後無法上架app。 私人API提供了其他很多非常炫的過渡動畫，比如@”cube”、@”suckEffect”、@”oglFlip”、 @”rippleEffect”、@”pageCurl”、@”pageUnCurl”、@”cameraIrisHollowOpen”、@”cameraIrisHollowClose”等。

粒子動畫

transform動畫

transform是一個非常重要的屬性，它在矩陣變換的層面上改變視圖的顯示效果，完成旋轉、形變、平移等等操作。在它被修改的同時，視圖的frame也會被真實改變。有兩個資料類型用來表示transform，分別是CGAffineTransform和CATransform3D。前者作用於UIView，後者為layer層次的變換類型。基於後者可以實現更加強大的功能。 對於想要瞭解矩陣變換是如何作用實現的，可以參考這篇部落格： CGAffineTransform 放射變換

在開始使用transform實現你的動畫之前，我先介紹幾個常用的函數：

transform嚴格的說不是一種動畫，而是動畫中的一部分操作，我拿出來說是因為它同時出現在了UIView 動畫和CALayer動畫中。

一些應用

利用上面CALayer 基礎動畫的代碼實現下拉剪頭的展開和收合，還可以實現時鐘指標的旋轉

輸入框在輸入錯誤資訊時的搖晃效果。

利用CAShapeLayer 和CABasicAnimation 可以實現載入動畫。

iOS渲染視圖的層級圖： 

更多內容可以點擊 iOS開發UI篇--iOS動畫（Core Animation）總結。

事實告訴我們動畫是要靠設計的，你看我上面的動畫抽的一筆，但事實上用同樣的代碼可以寫出很漂亮的動畫。

  

iOS動畫淺匯（轉）