iOS 動(dòng)畫方法內(nèi)容整理

動(dòng)畫在UI交互中是一種增強(qiáng)用戶體驗(yàn)的利器，目前看到幾乎每一個(gè)移動(dòng)App都會(huì)使用到各種動(dòng)畫效果。

創(chuàng)新互聯(lián)建站2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元陽(yáng)新做網(wǎng)站,已為上家服務(wù),為陽(yáng)新各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

在IOS開發(fā)中實(shí)現(xiàn)動(dòng)畫效果通常有三種方式。

可以用來做什么呢：

設(shè)置UIView的屬性:例如

frame

bounds

center

transform

alpha

backgroundColor

contentStretch

看一下實(shí)例：

我們可以看到self.greenView通過UIView Animation動(dòng)畫將某些屬性進(jìn)行了改變。

現(xiàn)在我們適當(dāng)?shù)募尤胍恍﹦?dòng)畫執(zhí)行的方式【options】

在開發(fā)中可以添加特定的options滿足不同的動(dòng)畫需要。

彈簧效果：

CABasicAnimation 為layer屬性提供了基礎(chǔ)的幀動(dòng)畫能力，創(chuàng)建一個(gè)CABasicAnimation的實(shí)例，使用繼承自CAPropertyAnimation的animationWithKeyPath:方法，來指定要添加動(dòng)畫的layer屬性的keypath

讓一個(gè)view向左平移，在x方向上從屏幕x中間線型移動(dòng)到左邊消失，耗時(shí)1.5秒的動(dòng)畫

KeyPath的改變動(dòng)畫的效果就不一樣，開發(fā)中改變KeyPath的屬性可以實(shí)現(xiàn)大多數(shù)我們需要的動(dòng)畫執(zhí)行的效果

用CABasicAnimation執(zhí)行動(dòng)畫，在動(dòng)畫結(jié)束后會(huì)回歸動(dòng)畫開始前的狀態(tài)。想要解決的話，必須設(shè)置“removedOnCompletion”和“fillMode”這兩個(gè)屬性。

由于在開發(fā)過程中光是CABasicAnimation的fromValue、toValue起點(diǎn)和終點(diǎn)設(shè)置是無法滿足我們希望在動(dòng)畫中途進(jìn)行更多的變化的需求，所以我們需要認(rèn)識(shí)一下CAKeyframeAnimation

從上面的繼承圖我們看出CAKeyframeAnimation 比CABasicAnimation多了更多的可設(shè)置屬性

關(guān)鍵幀動(dòng)畫其實(shí)通過一組動(dòng)畫類型的值（或者一個(gè)指定的路徑）和這些值對(duì)應(yīng)的時(shí)間節(jié)點(diǎn)以及各時(shí)間節(jié)點(diǎn)的過渡方式來控制顯示的動(dòng)畫。關(guān)鍵幀動(dòng)畫可以通過path屬性和values屬性來設(shè)置動(dòng)畫的關(guān)鍵幀。

可以保存一組動(dòng)畫CAKeyframeAnimation、CABasicAnimation對(duì)象，將CAAnimationGroup對(duì)象加入圖層后，組中所有動(dòng)畫對(duì)象可以同時(shí)并發(fā)運(yùn)行。

注意：默認(rèn)情況下，一組動(dòng)畫對(duì)象是同時(shí)運(yùn)行的，也可以通過設(shè)置單個(gè)動(dòng)畫對(duì)象的beginTime屬性來更改動(dòng)畫的開始時(shí)間，單個(gè)動(dòng)畫的執(zhí)行效果可以與動(dòng)畫組執(zhí)行效果屬性分開設(shè)定，根據(jù)需要調(diào)整改變。

聊聊iOS中的動(dòng)畫

CAAnimation：核心動(dòng)畫的基礎(chǔ)類，不能直接使用，負(fù)責(zé)動(dòng)畫運(yùn)行時(shí)間、速度的控制，本身實(shí)現(xiàn)了CAMediaTiming協(xié)議。

CAPropertyAnimation：屬性動(dòng)畫的基類（通過屬性進(jìn)行動(dòng)畫設(shè)置，注意是可動(dòng)畫屬性），不能直接使用。

CAAnimationGroup：動(dòng)畫組，動(dòng)畫組是一種組合模式設(shè)計(jì)，可以通過動(dòng)畫組來進(jìn)行所有動(dòng)畫行為的統(tǒng)一控制，組中所有動(dòng)畫效果可以并發(fā)執(zhí)行。

CATransition：轉(zhuǎn)場(chǎng)動(dòng)畫，主要通過濾鏡進(jìn)行動(dòng)畫效果設(shè)置。

CABasicAnimation：基礎(chǔ)動(dòng)畫，通過屬性修改進(jìn)行動(dòng)畫參數(shù)控制，只有初始狀態(tài)和結(jié)束狀態(tài)。

CAKeyframeAnimation：關(guān)鍵幀動(dòng)畫，同樣是通過屬性進(jìn)行動(dòng)畫參數(shù)控制，但是同基礎(chǔ)動(dòng)畫不同的是它可以有多個(gè)狀態(tài)控制。

基礎(chǔ)動(dòng)畫、關(guān)鍵幀動(dòng)畫都屬于屬性動(dòng)畫，就是通過修改屬性值產(chǎn)生動(dòng)畫效果，開發(fā)人員只需要設(shè)置初始值和結(jié)束值，中間的過程動(dòng)畫（又叫“補(bǔ)間動(dòng)畫”）由系統(tǒng)自動(dòng)計(jì)算產(chǎn)生。和基礎(chǔ)動(dòng)畫不同的是關(guān)鍵幀動(dòng)畫可以設(shè)置多個(gè)屬性值，每?jī)蓚€(gè)屬性中間的補(bǔ)間動(dòng)畫由系統(tǒng)自動(dòng)完成，因此從這個(gè)角度而言基礎(chǔ)動(dòng)畫又可以看成是有兩個(gè)關(guān)鍵幀的關(guān)鍵幀動(dòng)畫。

**注意點(diǎn)** 如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在動(dòng)畫執(zhí)行完畢后，圖層會(huì)保持顯示動(dòng)畫執(zhí)行后的狀態(tài)。但在實(shí)質(zhì)上，圖層的屬性值還是動(dòng)畫執(zhí)行前的初始值，并沒有真正被改變。

在實(shí)際項(xiàng)目中很多需求使用UIView動(dòng)畫或者基本動(dòng)畫就可以實(shí)現(xiàn)，比如下面比較常用的縮放和彈性動(dòng)畫效果

如果想實(shí)現(xiàn)更炫酷一點(diǎn)的動(dòng)畫，如雷達(dá)，波紋，咻一咻效果，時(shí)鐘，帶動(dòng)畫的指示器等就需要用到UIBezierPath和CAShapeLayer,CAReplicatorLayer等知識(shí)。

下面簡(jiǎn)單的說一下CAShapeLayer和CAReplicatorLayer

//波紋，咻一咻，雷達(dá)效果

//利用UIBezierPath和CAShapeLayer實(shí)現(xiàn)不規(guī)則的圖形，并帶有動(dòng)畫效果，可以在折線圖中使用

-(void)myTest{

UIView *line=[[UIView alloc] initWithFrame:CGRectMake(0, 100, 400, 1)];

line.backgroundColor=[UIColor grayColor];

[self.view addSubview:line];

}

-(void)clickk:(UITapGestureRecognizer *)tap{

CGPoint point=[tap locationInView:_testView1];

if ([_path containsPoint:point]) {

NSLog(@"點(diǎn)擊不規(guī)則圖形");

}

}

iOS動(dòng)畫-CAAnimation的說明與簡(jiǎn)單使用

1.CABasicAnimation

通過設(shè)定起始點(diǎn)，終點(diǎn)，時(shí)間，動(dòng)畫會(huì)沿著你這設(shè)定點(diǎn)進(jìn)行移動(dòng)?？梢钥醋鎏厥獾腃AKeyFrameAnimation

2.CAKeyframeAnimation

Keyframe顧名思義就是關(guān)鍵點(diǎn)的frame，你可以通過設(shè)定CALayer的始點(diǎn)、中間關(guān)鍵點(diǎn)、終點(diǎn)的frame，時(shí)間，動(dòng)畫會(huì)沿你設(shè)定的軌跡進(jìn)行移動(dòng)

3.CAAnimationGroup

Group也就是組合的意思，就是把對(duì)這個(gè)Layer的所有動(dòng)畫都組合起來。PS：一個(gè)layer設(shè)定了很多動(dòng)畫，他們都會(huì)同時(shí)執(zhí)行，

4.CATransition

這個(gè)就是蘋果幫開發(fā)者封裝好的一些動(dòng)畫，

values 指明整個(gè)動(dòng)畫過程中的關(guān)鍵幀點(diǎn)

path 與values屬性一樣，同樣是用于指定整個(gè)動(dòng)畫所經(jīng)過的路徑的。需要注意的是，values與path是互斥的，當(dāng)values與path同時(shí)指定時(shí)，path會(huì)覆蓋values，即values屬性將被忽略。

keyTimes 是一個(gè)數(shù)組，用以指定每個(gè)子路徑(AB,BC,CD)的時(shí)間。如果你沒有顯式地對(duì)keyTimes進(jìn)行設(shè)置，則系統(tǒng)會(huì)默認(rèn)每條子路徑的時(shí)間為：ti=duration/(5-1)，即每條子路徑的duration相等，都為duration的1\4。當(dāng)然，我們也可以傳個(gè)數(shù)組讓物體快慢結(jié)合。例如，你可以傳入{0.0, 0.1,0.6,0.7,1.0}，其中首尾必須分別是0和1，因此tAB=0.1-0, tCB=0.6-0.1, tDC=0.7-0.6, tED=1-0.7.....

timeFunctions 這個(gè)屬性用以指定時(shí)間函數(shù)，類似于運(yùn)動(dòng)的加速度，有以下幾種類型。記住，這是一個(gè)數(shù)組，你有幾個(gè)子路徑就應(yīng)該傳入幾個(gè)元素

/** Timing function names. **/

calculationMode 該屬性決定了物體在每個(gè)子路徑下是跳著走還是勻速走，跟timeFunctions屬性有點(diǎn)類似

iOS動(dòng)畫效果三：CABAsicAnimation實(shí)現(xiàn)平移、旋轉(zhuǎn)和放大

使用CABAsicAnimation來實(shí)現(xiàn)動(dòng)畫的放縮和旋轉(zhuǎn)是比較常用的，這篇主要介紹CABasicAnimation實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果

最終的效果圖為：

Demo地址

對(duì)應(yīng)的實(shí)現(xiàn)文件是SecondViewController

首先，我們先定義一個(gè)UIView以及三個(gè)button按鈕，分別對(duì)應(yīng)平移、放大和旋轉(zhuǎn)

在.h文件中定義相應(yīng)的屬性

之后，在.m文件中實(shí)現(xiàn)相應(yīng)的懶加載

將UIView以及button添加到界面上

之后，我們先來實(shí)現(xiàn)平移動(dòng)畫，實(shí)現(xiàn)下面的方法

這里面遇到挺多坑的，下面逐條說明一下

接下倆，我們類似添加相應(yīng)的放大和旋轉(zhuǎn)的動(dòng)畫效果

這樣，我們就完成了CABasicAnimation實(shí)現(xiàn)平移、放大和旋轉(zhuǎn)的動(dòng)畫效果

這種動(dòng)畫效果使用挺多的

另外，我們閱讀蘋果開發(fā)文檔時(shí)，我們可以看到協(xié)議CAAnimationDelegate，通過這個(gè)協(xié)議我們可以觀察動(dòng)畫的開始和結(jié)束。

在平移動(dòng)畫中，讓CABasicAnimation遵守這個(gè)協(xié)議

實(shí)現(xiàn)相應(yīng)的協(xié)議方法

比較重要的是，我們通過協(xié)議方法可以判斷動(dòng)畫是否正常完成還是被打斷，這個(gè)我以前就碰到過動(dòng)畫過程被UITableView 的reloadData打斷，導(dǎo)致動(dòng)畫表現(xiàn)異常，具體可以看下這篇文章

CAnimationGroup動(dòng)畫執(zhí)行時(shí)間比duration小

)

最終效果圖為：

Demo地址

我寫的同一系列的其他文章

iOS開發(fā)中動(dòng)畫效果的探究(一)

iOS動(dòng)畫效果的探究二：UIView Animation實(shí)現(xiàn)動(dòng)畫

iOS動(dòng)畫效果三：CABAsicAnimation實(shí)現(xiàn)平移、旋轉(zhuǎn)和放大

ios動(dòng)畫效果四：使用Pop框架實(shí)現(xiàn)彈簧效果

iOS動(dòng)畫效果五：CABasicAnimation實(shí)現(xiàn)繞定點(diǎn)旋轉(zhuǎn)的效果 ]

iOS動(dòng)畫效果六：實(shí)現(xiàn)自定義的push轉(zhuǎn)場(chǎng)動(dòng)畫

iOS動(dòng)畫效果七：實(shí)現(xiàn)自定義present轉(zhuǎn)場(chǎng)動(dòng)畫效果

iOS動(dòng)畫效果八:實(shí)現(xiàn)類似系統(tǒng)的測(cè)滑返回效果