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

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

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

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

位置動畫

我們在界面上放置一個方塊，然后想要他通過動畫移動到另一個位置，怎么做呢？很簡單，在上面的代碼塊的位置改變方塊的中心就好了，如下：

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

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

  [UIView animateWithDuration:1 delay:0.5 options:nil animations:^{
    // 改變藍色方塊的位置
    CGPoint blueCenter = self.blueSquare.center;// 獲取原來的方塊中心位置
    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í)行動畫，options可以不填，completion是完成后的操作，也可以不填。這樣就實現(xiàn)了。

透明度動畫

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

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

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

大小動畫

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

  // 進行一秒鐘的動畫
  [UIView animateWithDuration:1 animations:^{
    self.blueSquare.transform = CGAffineTransformMakeScale(2.0, 2.0);// 長和寬分別變成原來的兩倍
  }];

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

顏色動畫

現(xiàn)在來到顏色的漸變動畫，同樣簡單的很：

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

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

旋轉(zhuǎn)動畫

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

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

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

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

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

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

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

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

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

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

最新評論