天天看點

IOS開發UI篇--IOS動畫(Core Animation)總結

ios 動畫主要是指core animation架構。官方使用文檔位址為:core animation guide。

core animation是ios和os x平台上負責圖形渲染與動畫的基礎架構。core animation可以作用與動畫視圖或者其他可視元素,為你完成了動畫所需的大部分繪幀工作。你隻需要配置少量的動畫參數(如開始點的位置和結束點的位置)即可使用core animation的動畫效果。core animation将大部分實際的繪圖任務交給了圖形硬體來處理,圖形硬體會加速圖形渲染的速度。這種自動化的圖形加速技術讓動畫擁有更高的幀率并且顯示效果更加平滑,不會加重cpu的負擔而影響程式的運作速度。

core animation類的繼承關系圖

IOS開發UI篇--IOS動畫(Core Animation)總結

常用屬性

duration : 動畫的持續時間

begintime : 動畫的開始時間

repeatcount : 動畫的重複次數

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

timingfunction : 控制動畫的顯示節奏系統提供五種值選擇,分别是:

kcamediatimingfunctionlinear 線性動畫

kcamediatimingfunctioneasein 先慢後快(慢進快出)

kcamediatimingfunctioneaseout 先塊後慢(快進慢出)

kcamediatimingfunctioneaseineaseout 先慢後快再慢

kcamediatimingfunctiondefault 預設,也屬于中間比較快

delegate : 動畫代理。能夠檢測動畫的執行和結束。

path:關鍵幀動畫中的執行路徑

type : 過渡動畫的動畫類型,系統提供了四種過渡動畫。

- kcatransitionfade 漸變效果

- kcatransitionmovein 進入覆寫效果

- kcatransitionpush 推出效果

- kcatransitionreveal 揭露離開效果

subtype : 過渡動畫的動畫方向

- kcatransitionfromright 從右側進入

- kcatransitionfromleft 從左側進入

- kcatransitionfromtop 從頂部進入

- kcatransitionfrombottom 從底部進入

重要屬性

fromvalue : keypath對應的初始值

tovalue : keypath對應的結束值

基礎動畫主要提供了對于calayer對象中的可變屬性進行簡單動畫的操作。比如:位移、透明度、縮放、旋轉、背景色等等。

效果示範:

IOS開發UI篇--IOS動畫(Core Animation)總結

位移動畫代碼示範:

注意點

如果fillmode=kcafillmodeforwards和removedoncomletion=no,那麼在動畫執行完畢後,圖層會保持顯示動畫執行後的狀态。但在實質上,圖層的屬性值還是動畫執行前的初始值,并沒有真正被改變。

cakeyframeanimation和cabaseanimation都屬于capropertyanimatin的子類。cabaseanimation隻能從一個數值(fromvalue)變換成另一個數值(tovalue),而cakeyframeanimation則會使用一個nsarray儲存一組關鍵幀。

values: 就是上述的nsarray對象。裡面的元素稱為”關鍵幀”(keyframe)。動畫對象會在指定的時間(duration)内,依次顯示values數組中的每一個關鍵幀

path: 可以設定一個cgpathref\cgmutablepathref,讓層跟着路徑移動。path隻對calayer的anchorpoint和position起作用。如果你設定了path,那麼values将被忽略。

keytimes: 可以為對應的關鍵幀指定對應的時間點,其取值範圍為0到1.0,keytimes中的每一個時間值都對應values中的每一幀.當keytimes沒有設定的時候,各個關鍵幀的時間是平分的。

IOS開發UI篇--IOS動畫(Core Animation)總結

圓形路徑動畫代碼示範:

說明:cabasicanimation可看做是最多隻有2個關鍵幀的cakeyframeanimation

caanimation的子類,可以儲存一組動畫對象,将caanimationgroup對象加入層後,組中所有動畫對象可以同時并發運作。

animations : 用來儲存一組動畫對象的nsarray

IOS開發UI篇--IOS動畫(Core Animation)總結

組動畫代碼示範:

caanimation的子類,用于做過渡動畫或者轉場動畫,能夠為層提供移出螢幕和移入螢幕的動畫效果。

type:動畫過渡類型

apple 官方的sdk其實隻提供了四種過渡效果。

私有api提供了其他很多非常炫的過渡動畫,比如@”cube”、@”suckeffect”、@”oglflip”、 @”rippleeffect”、@”pagecurl”、@”pageuncurl”、@”camerairishollowopen”、@”camerairishollowclose”等。

私有api,不建議開發者們使用。因為蘋果公司不提供維護,并且有可能造成你的app稽核不通過。

subtype:動畫過渡方向

kcatransitionfromright 從右側進入

kcatransitionfromleft 從左側進入

kcatransitionfromtop 從頂部進入

kcatransitionfrombottom 從底部進入

startprogress:動畫起點(在整體動畫的百分比)

endprogress:動畫終點(在整體動畫的百分比)

IOS開發UI篇--IOS動畫(Core Animation)總結
IOS開發UI篇--IOS動畫(Core Animation)總結

動畫解析:

1、點選紅色按鈕,紅色按鈕旋轉。(旋轉動畫)

2、黑色小按鈕依次彈出,并且帶有旋轉效果。(位移動畫、旋轉動畫、組動畫)

3、點選黑色小按鈕,其他按鈕消失,被點選的黑色按鈕變大變淡消失。(縮放動畫、alpha動畫、組動畫)

部落客的話:代碼過多,這裡不做示範。文章最後提供代碼下載下傳位址。

IOS開發UI篇--IOS動畫(Core Animation)總結

看上去挺炫的,其實實作很簡單,就是位移動畫+縮放動畫。

IOS開發UI篇--IOS動畫(Core Animation)總結

這裡其實隻有按鈕變大效果使用的縮放動畫。煙花效果 使用的是一種比較特殊的動畫–粒子動畫。

一個粒子系統一般有兩部分組成:

1、caemittercell:可以看作是單個粒子的原型(例如,一個單一的粉撲在一團煙霧)。當散發出一個粒子,uikit根據這個發射粒子和定義的基礎上建立一個随機粒子。此原型包括一些屬性來控制粒子的圖檔,顔色,方向,運動,縮放比例和生命周期。

2、caemitterlayer:主要控制發射源的位置、尺寸、發射模式、發射源的形狀等等。

以上兩個類的屬性還是比較多的,這裡就不細講了。大家可以google一下,詳細的了解吧。

任何複雜的動畫其實都是由一個個簡單的動畫組裝而成的,隻要我們善于分解群組裝,我們就能實作出滿意的效果。動畫其實也不是那麼難。

github下載下傳位址:https://github.com/yixiangboy/iosanimationdemo

如果覺得對你還有些用,給一顆star吧。你的支援是我繼續的動力。

個人部落格位址:http://blog.csdn.net/yixiangboy

以前看過很多别人的部落格,學到不少東西。現在準備自己也開始寫寫部落格,希望能夠幫到一些人。如果工作不是特别忙的話,準備每周寫一篇。

我的聯系方式:

微網誌:新浪微網誌

部落格:http://blog.csdn.net/yixiangboy

github:https://github.com/yixiangboy

繼續閱讀