iOS 開發--動畫

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

理論 UIview VS UIlayerapp

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動畫url

000.jpg

UIView.net

006.jpg

 

 

彈性動畫設計

002.jpg

關鍵幀動畫(中間能夠添加合適多的幀來作不一樣的銜接動畫)3d

001.jpg

 

CALayer動畫指針

QQ截圖20160311103444.png

經常使用屬性 orm

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 實現下拉剪頭的展開和收起

273.jpg

  • 關鍵幀動畫(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沒有設置的時候,各個關鍵幀的時間是平分的。

  • 組合動畫:

271.jpg

  • 過渡動畫(CATransition) 多數爲私有的API使用後沒法上架app。 私有API提供了其餘不少很是炫的過渡動畫,好比@」cube」、@」suckEffect」、@」oglFlip」、 @」rippleEffect」、@」pageCurl」、@」pageUnCurl」、@」cameraIrisHollowOpen」、@」cameraIrisHollowClose」等。

粒子動畫

transform動畫

transform是一個很是重要的屬性,它在矩陣變換的層面上改變視圖的顯示效果,完成旋轉、形變、平移等等操做。在它被修改的同時,視圖的frame也會被真實改變。有兩個數據類型用來表示transform,分別是CGAffineTransform和CATransform3D。前者做用於UIView,後者爲layer層次的變換類型。基於後者能夠實現更增強大的功能。 對於想要了解矩陣變換是如何做用實現的,能夠參考這篇博客: CGAffineTransform 放射變換

272.jpg在開始使用transform實現你的動畫以前,我先介紹幾個經常使用的函數:

272.jpg

transform嚴格的說不是一種動畫,而是動畫中的一部分操做,我拿出來講是由於它同時出如今了UIView 動畫和CALayer動畫中。

一些應用

利用上面CALayer 基礎動畫的代碼實現下拉剪頭的展開和收起,還能夠實現時鐘指針的旋轉

51.jpg

輸入框在輸入錯誤信息時的搖晃效果。

QQ圖片20160311102656.gif

利用CAShapeLayer 和CABasicAnimation 能夠實現加載動畫。

9080b2e6fcfcae3165ee971f41b2300e.png

iOS渲染視圖的層級圖: 

91603d0368ed8f57c1b250856008573c.png

更多內容能夠點擊 iOS開發UI篇--iOS動畫(Core Animation)總結

相關文章
相關標籤/搜索