iOS基礎動畫教程分享_IOS

來源:互聯網
上載者:User

iOS的動畫多種多樣,動畫做的好的應用會更加吸引人,用起來也會更加炫目,本文介紹iOS幾種基礎動畫,單個講解便於理解,但真正使用時,結合起來用會看起來更加帥,這就看具體的應用情境和大家的想象力啦。

所有的基礎動畫都給予UIView一個基礎的方法:animateWithDuration。這個方法可以包含一個代碼塊,裡面設定要改變的東西,在執行的時候iOS會自動以動畫的形式展現出來,代碼如下:

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

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

位置動畫

我們在介面上放置一個方塊,然後想要他通過動畫移動到另一個位置,怎麼做呢?很簡單,在上面的代碼塊的位置改變方塊的中心就好了,如下:

  [UIView animateWithDuration:1 animations:^{    // 改變藍色方塊的位置    CGPoint blueCenter = self.blueSquare.center;// 擷取原來的方塊中心位置    blueCenter.x = self.view.bounds.size.width - self.blueSquare.center.x;// 改變中心位置的X座標    self.blueSquare.center = blueCenter;// 設定方塊的中心位置到新的位置  }];

這樣運行就可以看到動畫了,很簡單吧。
此外,還可以延遲動畫的執行時間,比如想延遲半秒後執行,那麼還是同樣的方法,但是參數要多一點:

  [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座標    self.blueSquare.center = blueCenter;// 設定方塊的中心位置到新的位置  } completion:nil];

delay參數表示延遲0.5秒執行動畫,options可以不填,completion是完成後的操作,也可以不填。這樣就實現了。

透明度動畫

假設我們想通過動畫漸層一個控制項的透明度,比如慢慢變成基本看不見,也很簡單,還是那個方法:

  // 開始透明度動畫(一秒完成)  [UIView animateWithDuration:1 animations:^{    // 透明度變為0.1    self.blueSquare.alpha = 0.1;  }];

方塊原來就有透明度,當然預設為1,通過這個設定,就可以讓它在一秒鐘時間裡慢慢將透明度變成0.1,是不是很簡單!

大小動畫

如果想改變一個控制項的大小,需要在代碼塊裡用到一個改變大小的函數:CGAffineTransformMakeScale,這個函數的參數分別為設定長和寬為原來的多少倍,比如我們通過動畫將控制項放大到原來的兩倍:

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

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

顏色動畫

現在來到顏色的漸層動畫,同樣簡單的很:

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

在代碼塊裡重新設定一下方塊的顏色,就可以實現漸層效果了,簡單到哭。。。

旋轉動畫

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

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

這樣確實可以達到旋轉的目的,根據參數,啟動並執行時候會旋轉半圓,然後停住。如果只是想旋轉一下停住,按照這種方式寫,改變角度就可以了,但是如果想要旋轉一個整圓,第一個想到的可能是把角度改成整圓:

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

這樣寫,運行起來其實是不會動的,可以試一下,因為它的最終位置,也就是轉了一個整圓後,還是在原位置,所以iOS選擇不動。就跟改變位置,位置還是原來的位置時,也不會動一樣。那怎麼辦呢。另外,這裡的旋轉都是一次性的,如果想要一直轉,怎麼做呢,是不是很容易想到迴圈?其實就是迴圈,但是我們可以用比for迴圈更加優雅的動畫迴圈方式,還記得剛才做延遲動畫的時候的方法,最後有一個參數是completion嘛,這個參數的功能是提供動畫結束時執行的內容,那我們可不可以在這裡調用它自己呢?當然可以:

// 持續旋轉動畫- (void)spin {  // options屬性設定可以讓其順暢地迴圈轉動,completion讓其不斷在完成之後調用自己  [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{    self.wheelImg.transform = CGAffineTransformRotate(self.wheelImg.transform, M_PI);// 第一個參數為開始旋轉的角度,第二個為旋轉的角度  }completion:^(BOOL finished){// 結束時繼續執行    [self spin];  }];}

這裡我們把動畫放到一個函數裡,方便我們在completion裡調用,這樣就實現了持續旋轉了,當然,如果想只旋轉一個整圓,可以用for迴圈,條條大路通羅馬嘛。

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

可以在github下載我的樣本工程:https://github.com/Cloudox/iOSAnimationSample

以上就是本文的全部內容,希望對大家的學習有所協助,也希望大家多多支援雲棲社區。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.