你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發基礎 >> iOS動畫淺匯

iOS動畫淺匯

編輯:IOS開發基礎

550.jpg

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

000.jpg

UIView

006.jpg

彈性動畫

002.jpg

關鍵幀動畫(中間可以添加合適多的幀來做不同的銜接動畫)

001.jpg

CALayer動畫

QQ截圖20160311103444.png

常用屬性 

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)總結。

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

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved