iOS 開發(fā)之動(dòng)畫篇 - 從 UIView 動(dòng)畫說(shuō)起
2016-02-15 06:19編輯：lansekuangtu分類：iOS開發(fā)來(lái)源：Sindri的小巢 投稿
237297
作者：Sindri的小巢
毋庸置疑的：在iOS開發(fā)中乖坠，制作動(dòng)畫效果是最讓開發(fā)者享受的環(huán)節(jié)之一窘行。一個(gè)設(shè)計(jì)嚴(yán)謹(jǐn)照宝、精細(xì)的動(dòng)畫效果能給用戶耳目一新的效果鸟悴，吸引他們的眼光 —— 這對(duì)于app而言是非常重要的缔赠。
本文作為動(dòng)畫文集的第一篇缩功，最開始是想做個(gè)qq下拉刷新的水滴動(dòng)畫的制作講解夕膀，但這幾天研讀《iOS Animations by Tutorials》一書果善，對(duì)iOS動(dòng)畫開發(fā)有了更為深刻的了解诊笤，于是決定動(dòng)畫篇將從UIView動(dòng)畫開始講起，以后還會(huì)有Layer巾陕、Transitioning等在內(nèi)的動(dòng)畫讨跟，希望本文能拋磚引玉，帶給大家不一樣的理解鄙煤，下面送上一張書中demo的效果圖晾匠。購(gòu)買書籍
動(dòng)效
先放上本文demo：點(diǎn)這
ps：本文屬于新手向的動(dòng)畫入門文章
從登錄動(dòng)畫說(shuō)起
很長(zhǎng)一段時(shí)間以來(lái)，我都在基于CALayer層進(jìn)行動(dòng)畫實(shí)現(xiàn)梯刚，卻忽略了UIKit提供給我們的動(dòng)畫接口凉馆。這些接口函數(shù)足夠的強(qiáng)大并且十分的靈活，足以滿足我們開發(fā)中大部分的動(dòng)畫需求亡资。
在我們了解這些強(qiáng)大的接口前澜共，我們先來(lái)看看第一個(gè)效果：在用戶打開app要進(jìn)行登錄的時(shí)候，賬戶和密碼輸入框從屏幕的左邊進(jìn)入锥腻，接著登錄按鈕出現(xiàn)咳胃。
界面動(dòng)畫
在這段動(dòng)畫之中發(fā)生的最為明顯的事情就是兩個(gè)文本框的位置變化，在動(dòng)畫開始之前旷太，兩個(gè)文本框的位置應(yīng)該是在屏幕的左邊展懈，而下方的按鈕現(xiàn)在是隱藏狀態(tài)（設(shè)置alpha）
動(dòng)畫開始前
因此，這個(gè)動(dòng)畫之中發(fā)生的事情供璧，我們可以用概括為下面的代碼：
self.userName.center.x?+=?offset;????//userName進(jìn)入
self.password.center.x?+=?offset;????//password進(jìn)入
self.login.alpha?=?1;????????????????//顯示登錄按鈕
既然已經(jīng)知道了我們的動(dòng)畫發(fā)生了什么存崖，接著就可以使用UIKit的動(dòng)畫API讓我們的動(dòng)畫活起來(lái)了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16//設(shè)置文本框初始位置為屏幕左側(cè)
CGPoint?accountCenter?=?self.userName.center;
CGPoint?psdCenter?=?self.password.center;
accountCenter.x?-=?200;
pasCenter.x?-=?200;
self.userName.center?=?accountCenter;
self.password.center?=?psdCenter;
//還原中心坐標(biāo)
accountCenter.x?+=?200;
psdCenter.x?+=?200;
[UIView?animateWithDuration:?0.5?animations:?^{
self.userName.center?=?accountCenter;
self.password.center?=?passwordCenter;
self.login.alpha?=?1;
}?completion:?nil];
在UIKit中，系統(tǒng)提供了animate標(biāo)題打頭的屬于UIView的類方法讓我們可以輕松的制作動(dòng)畫效果睡毒，每一個(gè)這樣的類方法提供了名為animations的block代碼塊来惧，這些代碼會(huì)在方法調(diào)用后立刻或者延遲一段時(shí)間以動(dòng)畫的方式執(zhí)行。此外演顾，所有這些API的第一個(gè)參數(shù)都是用來(lái)設(shè)置動(dòng)畫時(shí)長(zhǎng)的供搀。
在viewDidAppear:中運(yùn)行這段代碼，你會(huì)看到文本框從左側(cè)滑動(dòng)钠至，按鈕也漸變顯示出來(lái)的葛虐，但是跟我們要的結(jié)果不太一樣 —— 三個(gè)動(dòng)畫沒有錯(cuò)開，效果并不那么的好看棉钧。我們希望密碼框能在賬戶文本框滑動(dòng)后的一段時(shí)間后再出現(xiàn)屿脐，按鈕同樣也需要晚一些顯示。所以，我們需要使用下面的方法來(lái)實(shí)現(xiàn)這個(gè)效果：
1
2
3
4
5
6
7[UIView?animateWithDuration:?0.5?delay:?0.35?options:?UIViewAnimationOptionCurveEaseInOut?animations:?^{
self.password.center?=?passwordCenter;
}?completion:?^(BOOL?finished)?{
[UIView?animateWithDuration:?0.2?animations:?^{
self.login.alpha?=?1;
}];
}];
這個(gè)方法看起來(lái)非常的熟悉的诵，相比上面的方法這里多了幾個(gè)參數(shù)來(lái)高度定制我們的動(dòng)畫：
duration： ?動(dòng)畫時(shí)長(zhǎng)
delay： ?決定了動(dòng)畫在延遲多久之后執(zhí)行
options：用來(lái)決定動(dòng)畫的展示方式万栅，接下來(lái)會(huì)進(jìn)行講解
animations：轉(zhuǎn)化成動(dòng)畫表示的代碼
completion：動(dòng)畫結(jié)束后執(zhí)行的代碼塊
在上面的代碼中，密碼輸入框在延后0.35秒之后開始從左側(cè)出來(lái)西疤，在持續(xù)0.5秒的動(dòng)畫之后烦粒，開始漸變顯示按鈕，然后動(dòng)畫完成代赁。
可實(shí)現(xiàn)動(dòng)畫的屬性
現(xiàn)在你已經(jīng)可以制作簡(jiǎn)單的動(dòng)畫了扰她，但要記住：不是所有修改屬性的操作放到animations代碼塊中都是變成動(dòng)畫實(shí)現(xiàn)的 —— 不管你怎么修改一個(gè)視圖的tag管跺，或者是delegate义黎。因此禾进，可實(shí)現(xiàn)動(dòng)畫的屬性必定會(huì)導(dǎo)致視圖的重新渲染豁跑。
這些可以生成動(dòng)畫的屬性大致可以分成這么三類：坐標(biāo)尺寸、視圖顯示泻云、形態(tài)變化
坐標(biāo)尺寸類
bounds：修改這個(gè)屬性會(huì)結(jié)合center屬性重新計(jì)算frame艇拍。建議通過(guò)這個(gè)屬性修改尺寸
frame：修改這個(gè)屬性通常會(huì)導(dǎo)致視圖形變的同時(shí)也發(fā)生移動(dòng)，然后會(huì)重新設(shè)置center跟bounds屬性
center: 設(shè)置后視圖會(huì)移動(dòng)到一個(gè)新位置宠纯，修改后會(huì)結(jié)合bounds重新計(jì)算frame
尺寸修改
視圖顯示類
backgroundColor: 修改這個(gè)屬性會(huì)產(chǎn)生顏色漸變過(guò)渡的效果卸夕，本質(zhì)上是系統(tǒng)不斷修改了tintColor來(lái)實(shí)現(xiàn)的
alpha：修改這個(gè)屬性會(huì)產(chǎn)生淡入淡出的效果
hidden：修改這個(gè)屬性可以制作翻頁(yè)隱藏的效果
修改透明度
形態(tài)變化類
transform：修改這個(gè)屬性可以實(shí)現(xiàn)旋轉(zhuǎn)、形變婆瓜、移動(dòng)快集、翻轉(zhuǎn)等動(dòng)畫效果，其通過(guò)矩陣運(yùn)算的方式來(lái)實(shí)現(xiàn)廉白，因此更加強(qiáng)大
旋轉(zhuǎn)
動(dòng)畫參數(shù)
上面我們使用到的動(dòng)畫方法中有一個(gè)重要的參數(shù)options个初，它能讓你高度的自定義動(dòng)畫效果。下面展示這個(gè)參數(shù)類型的值集合猴蹂，你可以通過(guò)結(jié)合不同的參數(shù)來(lái)實(shí)現(xiàn)自己的動(dòng)畫：
Repeating
1
2UIViewAnimationOptionRepeat//動(dòng)畫循環(huán)執(zhí)行
UIViewAnimationOptionAutoreverse//動(dòng)畫在執(zhí)行完畢后會(huì)反方向再執(zhí)行一次
我們將這兩個(gè)參數(shù)傳入到上面密碼框出現(xiàn)動(dòng)畫中院溺，看看會(huì)有什么效果（不同的參數(shù)使用|操作符一起傳入）
1
2
3
4
5
6
7[UIView?animateWithDuration:?0.5?delay:?0.35?options:?UIViewAnimationOptionAutoreverse?|?UIViewAnimationOptionRepeat?animations:?^{
self.password.center?=?passwordCenter;
}?completion:?^(BOOL?finished)?{
[UIView?animateWithDuration:?0.2?animations:?^{
self.login.alpha?=?1;
}];
}];
重復(fù)的動(dòng)畫
我們可以看到密碼框在不斷的循環(huán)進(jìn)入屏幕，反方向退出屏幕這個(gè)操作磅轻，并且登錄按鈕也始終沒有漸變出現(xiàn)珍逸。由此可以知道UIViewAnimationOptionRepeat參數(shù)不僅是讓動(dòng)畫循環(huán)播放，并且還導(dǎo)致了completion的回調(diào)永遠(yuǎn)無(wú)法執(zhí)行聋溜。
Easing
我們都知道谆膳，一個(gè)好的動(dòng)畫應(yīng)該更符合我們認(rèn)知的規(guī)則。比如撮躁，任何事物都不能突然間的開始移動(dòng)和停下摹量，像車輛啟動(dòng)和停止都有一個(gè)加速和減速的過(guò)程。
汽車的加速減速.png
為了讓動(dòng)畫更具符合我們的認(rèn)知，系統(tǒng)同樣提供了類似的效果的參數(shù)給我們使用：
1
2
3
4UIViewAnimationOptionCurveEaseInOut//先加速后減速缨称，默認(rèn)
UIViewAnimationOptionCurveEaseIn//由慢到快
UIViewAnimationOptionCurveEaseOut//由快到慢
UIViewAnimationOptionCurveLinear//勻速
我在demo上創(chuàng)建了四個(gè)橙色的UIView凝果，分別傳入這四個(gè)不同的參數(shù)，然后讓這四個(gè)view在同一時(shí)間y軸上向上移動(dòng)睦尽。
1
2
3
4
5
6
7
8
9
10
11
12
13
14[self?animatedView:?_view1];
[self?animatedView:?_view2];
[self?animatedView:?_view3];
[self?animatedView:?_view4];
//y軸上移動(dòng)視圖上升250
-?(void)animatedView:?(UIView?*)view
{
[UIView?animateWithDuration:?0.5?delay:?0?options:?UIViewAnimationOptionCurveLinear?animations:?^{
CGPoint?center?=?view.center;
center.y?-=?250;
view.center?=?center;
}?completion:?nil];
}
四種線性速度表示
在模擬器運(yùn)行狀態(tài)下器净，點(diǎn)擊上面的菜單欄DEBUG -> Slow Animation或者快捷鍵command + T，這會(huì)放慢我們app的動(dòng)畫運(yùn)行速度（demo在6p的模擬器上運(yùn)行）当凡。
在減速環(huán)境下山害，我們看到四個(gè)view的速度變化如下：
1、逐漸加速沿量。EaseIn
2浪慌、先加速，后減速朴则。EaseInOut
3权纤、速度領(lǐng)先，然后減速乌妒。EaseOut
4汹想、勻速運(yùn)動(dòng)。Linear
運(yùn)行最開始的登錄動(dòng)畫撤蚊，放慢模擬器的動(dòng)畫速度古掏，你會(huì)看到默認(rèn)情況下使用的EaseInOut參數(shù)使得密碼框在接近結(jié)束點(diǎn)的時(shí)候出現(xiàn)了明顯的減速動(dòng)畫。
Transitioning
除了上面提到的這些效果侦啸，在視圖槽唾、圖片切換的時(shí)候，我們還能通過(guò)傳入下面的這些參數(shù)來(lái)實(shí)現(xiàn)一些特殊的動(dòng)畫效果光涂。
1
2
3
4
5
6
7
8UIViewAnimationOptionTransitionNone//沒有效果庞萍，默認(rèn)
UIViewAnimationOptionTransitionFlipFromLeft//從左翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionFlipFromRight//從右翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionCurlUp//從上往下翻頁(yè)
UIViewAnimationOptionTransitionCurlDown//從下往上翻頁(yè)
UIViewAnimationOptionTransitionCrossDissolve//舊視圖溶解過(guò)渡到下一個(gè)視圖
UIViewAnimationOptionTransitionFlipFromTop//從上翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionFlipFromBottom//從上翻轉(zhuǎn)效果
那么這些參數(shù)使用的時(shí)機(jī)是什么時(shí)候呢？我們來(lái)看看這么一段代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16[UIView?transitionWithView:?firstPV?duration:?0.5?options:?UIViewAnimationOptionTransitionFlipFromLeft?animations:?^{
[firstPV?flipCard];
}?completion:?^(BOOL?finished)?{
isAnimating?=?NO;
}];
-?(void)flipCard
{
if(isfliped)?{
self.image?=?[UIImage?imageNamed:?@"flipPicBG.png"];
isfliped?=?NO;
}else{
self.image?=?[UIImage?imageNamed:?[NSString?stringWithFormat:?@"flipPic%d.png",?type]];
isfliped?=?YES;
}
}
這段代碼中我改變了一個(gè)UIImageView的圖片顯示顶捷，同樣用了一個(gè)動(dòng)畫的方式表現(xiàn)挂绰。這里用到了一個(gè)新的動(dòng)畫API方法，transitionWithView: duration: options: animations: completion:服赎，這個(gè)方法跟上面的animateWithDuration系列方法相比多了一個(gè)UIView類型的參數(shù)葵蒂，這個(gè)參數(shù)接收的對(duì)象作為動(dòng)畫的作用者。這段代碼是我以前做的一個(gè)翻卡匹配的小游戲重虑，點(diǎn)擊之后的動(dòng)畫效果如下：
翻卡匹配小游戲
在模擬器下使用command+T放慢了動(dòng)畫的速度之后践付，我截取了翻轉(zhuǎn)的四張圖片：
慢動(dòng)作翻轉(zhuǎn)
在我們切換圖片的時(shí)候，原有的圖片會(huì)基于視圖中心位置進(jìn)行x軸上的翻轉(zhuǎn)缺厉，為了達(dá)到更逼真的效果永高，系統(tǒng)還為我們?cè)谇袚Q中加上了陰影效果（ps: 再次要說(shuō)明的是隧土，transition的動(dòng)畫你應(yīng)該只用在視圖的切換當(dāng)中 —— 你不會(huì)在移動(dòng)中產(chǎn)生任何transition效果的）
彈簧動(dòng)畫
恭喜你，你已經(jīng)可以使用UIKit的動(dòng)畫接口制作精美的動(dòng)畫了命爬，通過(guò)組合不同的options參數(shù)你可以制作真實(shí)的動(dòng)畫曹傀。但是，我們總是能做的更多饲宛，比如一個(gè)彈簧被用力壓扁皆愉，當(dāng)松開手的時(shí)候會(huì)反復(fù)彈動(dòng)。使用上面的方式縱然可以實(shí)現(xiàn)這樣的動(dòng)畫艇抠，但代碼量復(fù)雜幕庐，也基本無(wú)復(fù)用性可言，可想而知會(huì)是糟糕的代碼家淤。因此异剥，我們需要其他的動(dòng)畫方式，系統(tǒng)也正好提供了這樣的一種動(dòng)畫供我們使用：
1
+?(void)animateWithDuration:(NSTimeInterval)duration?delay:(NSTimeInterval)delay?usingSpringWithDamping:(CGFloat)dampingRatio?initialSpringVelocity:(CGFloat)velocity?options:(UIViewAnimationOptions)options?animations:(void?(^)(void))animations?completion:(void?(^?__nullable)(BOOL?finished))completion
照例科普一下額外的參數(shù)信息：
dampingRatio：速度衰減比例絮重。取值范圍0 ~ 1冤寿，值越低震動(dòng)越強(qiáng)
velocity：初始化速度，值越高則物品的速度越快
當(dāng)一個(gè)圓角按鈕高速移動(dòng)的進(jìn)入界面中绿鸣，接著狠狠的震動(dòng)疚沐，這絕對(duì)會(huì)狠狠地吸引住你的眼球暂氯。比如我嘗試著讓某個(gè)UICollectionView的分類按鈕從屏幕下方彈入視圖的時(shí)候潮模；又或者我讓這個(gè)小球彈到右下角，以提示用戶該如何操作：
小球彈出效果
這效果非常的棒痴施，在看到這些小圓球之后擎厢，你本能的會(huì)想要去點(diǎn)擊這些按鈕，而這些小球彈出的動(dòng)畫僅僅需要下面這么幾句代碼：
1
2
3
4
5
6
7
8CGPoint?center?=?cell.center;
CGPoint?startCenter?=?center;
startCenter.y?+=?LXD_SCREEN_HEIGHT;
cell.center?=?startCenter;
[UIView?animateWithDuration:?0.5?delay:?0.35?*?indexPath.item?usingSpringWithDamping:?0.6?initialSpringVelocity:?0?options:?UIViewAnimationOptionCurveLinear?animations:?^{
cell.center?=?center;
}?completion:?nil];
除了這段彈出的代碼辣吃，在小球被點(diǎn)擊的時(shí)候动遭，還會(huì)產(chǎn)生一個(gè)彈到右下角的動(dòng)畫，然后從左側(cè)彈出列表神得。這非常的酷厘惦，因?yàn)椴挥妙~外的提示，用戶會(huì)很自然的知道該怎么回到分組的界面 —— 點(diǎn)擊一下右下角的圓形按鈕哩簿。這是非常重要的宵蕉，我們的動(dòng)畫應(yīng)該不僅僅只是為了讓界面更加的優(yōu)雅漂亮，還應(yīng)該能用以減少用戶學(xué)習(xí)使用app的成本节榜，這些都是動(dòng)畫的追求羡玛。
最后
相比起PC端的粗糙，移動(dòng)端的應(yīng)用需要更加精致宗苍，精致復(fù)雜的動(dòng)畫都是源于一個(gè)個(gè)簡(jiǎn)單的動(dòng)畫組合而成的稼稿。本文作為動(dòng)畫篇的第一篇博客薄榛，目的是為了從最簡(jiǎn)單的UIView動(dòng)畫講起，慢慢的拓展其它的動(dòng)畫让歼，也希望能起到拋磚引玉的作用敞恋。在文章的最后，如果你是iOS動(dòng)畫的初學(xué)者谋右，請(qǐng)嘗試結(jié)合上面提到的知識(shí)耳舅，為本文最開始的登錄demo中添加代碼，讓按鈕從下方漸變顯示彈出：
彈出的登錄按鈕
轉(zhuǎn)載于cocoChina
