iOS 很美的一部分就是它的動畫,動畫對于用戶體驗的提升很重要借跪。iOS 提供了一些簡單的 API 來幫助我們實現(xiàn)一些比較簡單的動畫政己,不能小看這些簡單的 API,大道至簡不是么 :]
實際上的確是這樣子掏愁,很多動畫并不需要什么奇技淫巧歇由,往往可以用更簡單的方式來實現(xiàn)。
最近閱讀完 ios 核心動畫技巧 這本書后托猩,對于 iOS 動畫有了一些基本的了解印蓖,但是此書講的比較深,所以有很多地方不是很明白京腥。由于我是很快的去閱讀赦肃,所以沒有寫一些比較基本的代碼來做一些實現(xiàn),因此又照著 RaywenderLich 的 iOS Animation 教程開始做一些例子公浪,來加強(qiáng)學(xué)習(xí)他宛。
UIView 類提供了大量的動畫 API,這些都是 UIView 的類方法欠气,使用這些方法來實現(xiàn)動畫將會變的很簡單厅各。
視圖的屬性動畫
UIView 的 + animateWithDuration:delay:options:animations:completion:
方法,可以通過改變視圖的一些屬性來生成動畫预柒。
+ (void)animateWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
options:(UIViewAnimationOptions)options
animations:(void (^)(void))animations
completion:(void (^)(BOOL finished))completion
這個方便使用起來很簡單队塘,只需要在 animations 參數(shù)中的 block 中寫入對 UIView 屬性的改變即可袁梗,系統(tǒng)會自動根據(jù)你的代碼,將屬性的改變做一個平緩的動畫憔古。
- duration :整個動畫持續(xù)的時間
- delay:動畫在多久之后開始遮怜,值為 0 表示代碼執(zhí)行到這里后動畫立刻開始
- options:一些有關(guān)動畫的設(shè)置,例如想要動畫剛開始比較快鸿市,到快結(jié)束時比較慢锯梁,都在這里設(shè)置。
- animations:在這個 block 中寫入你想要執(zhí)行的代碼即可焰情。block 中對視圖的動畫屬性所做的改變都會生成動畫
- completion:動畫完成后會調(diào)用陌凳,finished 表示動畫是否成功執(zhí)行完畢∧谥郏可以將動畫執(zhí)行完成后需要執(zhí)行的代碼寫在這里
舉個例子合敦,我想讓一個 View 從左上角移動到右下角某個位置,并且背景色更改為 red谒获,整個移動的過程(動畫持續(xù)執(zhí)行的時間)為 1 秒蛤肌,并且延遲 0.3 秒執(zhí)行壁却。那么可以這么寫:
- (void)animationProperty {
[UIView animateWithDuration:1.0 delay:0.3 options:0 animations:^{
self.someView.center = CGPointMake(300, 400);
self.someView.backgroundColor = [UIColor redColor];
} completion:^(BOOL finished) {
NSLog(@"動畫完成了");
}];
}
當(dāng)這個方法被調(diào)用時批狱,首先有一個 0.3 秒的延遲,然后動畫開始展东,在 1 秒內(nèi) someView 將從原來的位置移動到 (300赔硫,400)的位置,并且背景色有原來的顏色逐漸變?yōu)榧t色盐肃。
其實在上面的代碼中爪膊,我們只是告訴系統(tǒng),我希望有一個動畫砸王,這個動畫的動作為視圖位置與背景色的更改推盛,設(shè)置好動畫時間,其他的工作系統(tǒng)已經(jīng)為我們?nèi)孔龊们澹⑶以趧赢嬐瓿蓵r還通知我們耘成。
可以看出使用 UIView 的類方法實現(xiàn)動畫很是便捷。
細(xì)心點就會發(fā)現(xiàn)驹闰,我們對 UIView 的屬性做了改變瘪菌,然后系統(tǒng)相應(yīng)地自動為屬性的整個改變過程做了動畫。那么 UIView 的哪些屬性支持動畫呢嘹朗?
- 位置和大惺γ睢(Position & Size):你可以改變視圖的位置和大小,使得 View 變大變小或移動到某個位置屹培,具體可以使用這些屬性:
- bounds:重新設(shè)置 View 的大小
- Frame:移動或縮放 View
- center:更改 View 的位置(有關(guān) UIView 的 center默穴、Frame 等關(guān)系另行搜索 )
- 外觀(Appearance):可以通過設(shè)置以下屬性來更改 view 的外觀:
- backgroundColor:這個就比較簡單啦怔檩,背景色的改變在這個動畫期間是從原來的舊值過渡到新值的
- alpha:此值的變化也是過渡的,設(shè)置為 0 可以讓 view 逐漸消失
- 變換(Transformation):主要通過改變 View 的 transform 來做動畫蓄诽,這樣子就可以做更多的事情啦珠洗。transform 具體就不講了,不懂的可以搜一下若专。
動畫選項 Animation Options
在剛才的方法中许蓖,options 選項我們填寫了 0 ,表示采用默認(rèn)的值调衰。options 主要用于設(shè)置動畫的一些執(zhí)行特性膊爪,告訴 UIKit 來如何創(chuàng)建動畫。下面我們來看一哈這個枚舉類型都有哪些值嚎莉。
重復(fù) Repeat
首先可以簡單看一下下面兩個選項:
-UIViewAnimationOptionRepeat:表示動畫重復(fù)執(zhí)行米酬,即執(zhí)行完成后再來一次.
-UIViewAnimationOptionAutoreverse: 這個選項只能配合 repeat 一起使用,表示反向重復(fù)趋箩,即這個動畫是來來回回的執(zhí)行赃额,并不是簡單重復(fù)。更簡單點說就是叫确,動畫完成后倒退回去再繼續(xù)整個過程跳芳。
減緩 easing
在真實的世界中,運動都是有一個過程的竹勉,例如球的滾動是剛開始比較快飞盆,最后快停下來的時候比較慢。下面的選項就是設(shè)置動畫執(zhí)行的速度的:
UIViewAnimationOptionCurveLinear:線性地次乓,即始終都是一個速率吓歇,以某個速度突然的開始動畫,突然的停止動畫票腰,整個動畫過程都是一個速率城看。
UIViewAnimationOptionCurveEaseIn:緩慢的開始,然后以某個速率開始動畫杏慰,一直到結(jié)束
UIViewAnimationOptionCurveEaseOut:緩慢的結(jié)束
UIViewAnimationOptionCurveEaseInOut:開始和結(jié)束時都比較緩慢
?
還有其他的一些選項测柠,這里不做多的說明,可以看文檔并且自己動手實踐來體會逃默,這也是最好的方法鹃愤。
動畫完成時的回調(diào) completion
當(dāng)動畫序列執(zhí)行完畢后,系統(tǒng)將執(zhí)行回調(diào)中的代碼完域。block 中只有一個 finished 參數(shù)表示 block 被調(diào)用時软吐,動畫是否完成。
如果動畫的 duration 為 0 吟税,那么block 中的代碼將在下一個 RunLoop 循環(huán)中執(zhí)行凹耙。
此時姿现,我們可以使用這個 UIView 類方法實現(xiàn)大多數(shù)我們想要的動畫。屬性動畫是可以合并的肖抱,比如在移動的同時縮放备典、更改背景色。
動畫可以疊加意述,串成一個動畫鏈提佣。比如在 animation1 的 completion 回調(diào)中創(chuàng)建 animation2,那么動畫1 完成后將繼續(xù)執(zhí)行動畫 2荤崇。
根據(jù)官方文檔拌屏,在整個動畫過程中,用戶交互對于此視圖是暫時無效的(而IOS5.0前术荤,動畫過程中倚喂,用戶交互對于整個應(yīng)用是無效的),如果想要用戶可以和視圖交互瓣戚,可以改變
UIViewAnimationOptionAllowUserInteraction
一些個人的想法
下面講一下個人的一些理解端圈,但是不能保證正確,如果有錯誤的地方還請在評論中指出子库,大家相互學(xué)習(xí)舱权。
UIView 的這個類方法本質(zhì)為創(chuàng)建 CAAnimation 對象并且添加到相應(yīng)的 view 所管理的 CALayer 上,然后在下個 RunLoop 中執(zhí)行動畫刚照。
如果在多個類方法中將 view 的屬性做改變刑巧,那么創(chuàng)建的 CAAnimation 對象將做合并。