iOS的動(dòng)畫多種多樣，動(dòng)畫做的好的應(yīng)用會(huì)更加吸引人，用起來(lái)也會(huì)更加炫目，本文介紹iOS幾種基礎(chǔ)動(dòng)畫，單個(gè)講解便于理解，但真正使用時(shí)，結(jié)合起來(lái)用會(huì)看起來(lái)更加帥，這就看具體的應(yīng)用場(chǎng)景和大家的想象力啦。

所有的基礎(chǔ)動(dòng)畫都給予UIView一個(gè)基礎(chǔ)的方法：animateWithDuration。這個(gè)方法可以包含一個(gè)代碼塊，里面設(shè)置要改變的東西，在執(zhí)行的時(shí)候iOS會(huì)自動(dòng)以動(dòng)畫的形式展現(xiàn)出來(lái)，代碼如下：

[UIView animateWithDuration:1 animations:^{
    // 要執(zhí)行的動(dòng)作
}];

其中的參數(shù)“1”表示動(dòng)畫在一秒時(shí)間下完成。
現(xiàn)在分別講解位置、透明度、大小、顏色、旋轉(zhuǎn)的動(dòng)畫。

位置動(dòng)畫

我們?cè)诮缑嫔戏胖靡粋€(gè)方塊，然后想要他通過(guò)動(dòng)畫移動(dòng)到另一個(gè)位置，怎么做呢？很簡(jiǎn)單，在上面的代碼塊的位置改變方塊的中心就好了，如下：

  [UIView animateWithDuration:1 animations:^{
    // 改變藍(lán)色方塊的位置
    CGPoint blueCenter = self.blueSquare.center;// 獲取原來(lái)的方塊中心位置
    blueCenter.x = self.view.bounds.size.width - self.blueSquare.center.x;// 改變中心位置的X坐標(biāo)
    self.blueSquare.center = blueCenter;// 設(shè)置方塊的中心位置到新的位置
  }];

這樣運(yùn)行就可以看到動(dòng)畫了，很簡(jiǎn)單吧。
此外，還可以延遲動(dòng)畫的執(zhí)行時(shí)間，比如想延遲半秒后執(zhí)行，那么還是同樣的方法，但是參數(shù)要多一點(diǎn)：

  [UIView animateWithDuration:1 delay:0.5 options:nil animations:^{
    // 改變藍(lán)色方塊的位置
    CGPoint blueCenter = self.blueSquare.center;// 獲取原來(lái)的方塊中心位置
    blueCenter.x = self.view.bounds.size.width - self.blueSquare.center.x;// 改變中心位置的X坐標(biāo)
    self.blueSquare.center = blueCenter;// 設(shè)置方塊的中心位置到新的位置
  } completion:nil];

delay參數(shù)表示延遲0.5秒執(zhí)行動(dòng)畫，options可以不填，completion是完成后的操作，也可以不填。這樣就實(shí)現(xiàn)了。

透明度動(dòng)畫

假設(shè)我們想通過(guò)動(dòng)畫漸變一個(gè)控件的透明度，比如慢慢變成基本看不見(jiàn)，也很簡(jiǎn)單，還是那個(gè)方法：

  // 開(kāi)始透明度動(dòng)畫（一秒完成）
  [UIView animateWithDuration:1 animations:^{
    // 透明度變?yōu)?.1
    self.blueSquare.alpha = 0.1;
  }];

方塊原來(lái)就有透明度，當(dāng)然默認(rèn)為1，通過(guò)這個(gè)設(shè)置，就可以讓它在一秒鐘時(shí)間里慢慢將透明度變成0.1，是不是很簡(jiǎn)單！

大小動(dòng)畫

如果想改變一個(gè)控件的大小，需要在代碼塊里用到一個(gè)改變大小的函數(shù)：CGAffineTransformMakeScale，這個(gè)函數(shù)的參數(shù)分別為設(shè)置長(zhǎng)和寬為原來(lái)的多少倍，比如我們通過(guò)動(dòng)畫將控件放大到原來(lái)的兩倍：

  // 進(jìn)行一秒鐘的動(dòng)畫
  [UIView animateWithDuration:1 animations:^{
    self.blueSquare.transform = CGAffineTransformMakeScale(2.0, 2.0);// 長(zhǎng)和寬分別變成原來(lái)的兩倍
  }];

這里就將方塊通過(guò)一秒鐘的動(dòng)畫慢慢放大到原來(lái)的兩倍，這里要明確的是放大過(guò)程中，方塊的中心點(diǎn)不變，也就是說(shuō)是從中心向四周放大的。要縮小也可以改變參數(shù)的倍數(shù)就可以了。
這里可以稍作想象，我們把放大動(dòng)畫和透明度動(dòng)畫組合到一起，變放大到整個(gè)屏幕邊漸變到看不見(jiàn)，是不是就很像一些見(jiàn)過(guò)的動(dòng)畫了

顏色動(dòng)畫

現(xiàn)在來(lái)到顏色的漸變動(dòng)畫，同樣簡(jiǎn)單的很：

  // 改變顏色
  [UIView animateWithDuration:1 animations:^{
    self.blueSquare.backgroundColor = [UIColor redColor];
  }];

在代碼塊里重新設(shè)置一下方塊的顏色，就可以實(shí)現(xiàn)漸變效果了，簡(jiǎn)單到哭。。。

旋轉(zhuǎn)動(dòng)畫

上面的動(dòng)畫操作都很簡(jiǎn)單，都是在動(dòng)畫的代碼塊內(nèi)重新設(shè)置一下就可以達(dá)到動(dòng)畫的效果了，而旋轉(zhuǎn)就稍微復(fù)雜一點(diǎn)。
假設(shè)我們有一個(gè)輪子的圖片wheelImg，要旋轉(zhuǎn)他，還是需要用到方法CGAffineTransformMakeRotation，剛才我們伸縮大小用到了CGAffineTransformMakeScale，看起來(lái)差不多，用起來(lái)也差不多，參數(shù)是旋轉(zhuǎn)的角度，我們可以嘗試一下這樣寫：

  [UIView animateWithDuration:1 animations:^{
    self.wheelImg.transform = CGAffineTransformMakeRotation(M_PI);
  }];

這樣確實(shí)可以達(dá)到旋轉(zhuǎn)的目的，根據(jù)參數(shù)，運(yùn)行的時(shí)候會(huì)旋轉(zhuǎn)半圓，然后停住。如果只是想旋轉(zhuǎn)一下停住，按照這種方式寫，改變角度就可以了，但是如果想要旋轉(zhuǎn)一個(gè)整圓，第一個(gè)想到的可能是把角度改成整圓：

  [UIView animateWithDuration:1 animations:^{
    self.wheelImg.transform = CGAffineTransformMakeRotation(2*M_PI);
  }];

這樣寫，運(yùn)行起來(lái)其實(shí)是不會(huì)動(dòng)的，可以試一下，因?yàn)樗淖罱K位置，也就是轉(zhuǎn)了一個(gè)整圓后，還是在原位置，所以iOS選擇不動(dòng)。就跟改變位置，位置還是原來(lái)的位置時(shí)，也不會(huì)動(dòng)一樣。那怎么辦呢。另外，這里的旋轉(zhuǎn)都是一次性的，如果想要一直轉(zhuǎn)，怎么做呢，是不是很容易想到循環(huán)？其實(shí)就是循環(huán)，但是我們可以用比f(wàn)or循環(huán)更加優(yōu)雅的動(dòng)畫循環(huán)方式，還記得剛才做延遲動(dòng)畫的時(shí)候的方法，最后有一個(gè)參數(shù)是completion嘛，這個(gè)參數(shù)的功能是提供動(dòng)畫結(jié)束時(shí)執(zhí)行的內(nèi)容，那我們可不可以在這里調(diào)用它自己呢？當(dāng)然可以：

// 持續(xù)旋轉(zhuǎn)動(dòng)畫
- (void)spin {
  // options屬性設(shè)置可以讓其順暢地循環(huán)轉(zhuǎn)動(dòng)，completion讓其不斷在完成之后調(diào)用自己
  [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
    self.wheelImg.transform = CGAffineTransformRotate(self.wheelImg.transform, M_PI);// 第一個(gè)參數(shù)為開(kāi)始旋轉(zhuǎn)的角度，第二個(gè)為旋轉(zhuǎn)的角度
  }completion:^(BOOL finished){// 結(jié)束時(shí)繼續(xù)執(zhí)行
    [self spin];
  }];
}

這里我們把動(dòng)畫放到一個(gè)函數(shù)里，方便我們?cè)赾ompletion里調(diào)用，這樣就實(shí)現(xiàn)了持續(xù)旋轉(zhuǎn)了，當(dāng)然，如果想只旋轉(zhuǎn)一個(gè)整圓，可以用for循環(huán)，條條大路通羅馬嘛。

以上就是基本的iOS UIView動(dòng)畫了，單個(gè)看各自都挺簡(jiǎn)單的，在我們的真實(shí)使用當(dāng)中，當(dāng)然也要注意結(jié)合使用，發(fā)揮想象力，簡(jiǎn)單的功能也是可以組合出帥氣的效果的~

可以在github下載我的示例工程：https://github.com/Cloudox/iOSAnimationSample

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論