你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> iOS 開發之動畫篇 - 從 UIView 動畫說起

iOS 開發之動畫篇 - 從 UIView 動畫說起

編輯:IOS開發綜合

毋庸置疑的:在iOS開發中,制作動畫效果是最讓開發者享受的環節之一。一個設計嚴謹、精細的動畫效果能給用戶耳目一新的效果,吸引他們的眼光 —— 這對於app而言是非常重要的。

本文作為動畫文集的第一篇,最開始是想做個qq下拉刷新的水滴動畫的制作講解,但這幾天研讀《iOS Animations by Tutorials》一書,對iOS動畫開發有了更為深刻的了解,於是決定動畫篇將從UIView動畫開始講起,以後還會有Layer、Transitioning等在內的動畫,希望本文能拋磚引玉,帶給大家不一樣的理解,下面送上一張書中demo的效果圖。

1.gif 動效

先放上本文demo:點這
ps:本文屬於新手向的動畫入門文章

從登錄動畫說起


很長一段時間以來,我都在基於CALayer層進行動畫實現,卻忽略了UIKit提供給我們的動畫接口。這些接口函數足夠的強大並且十分的靈活,足以滿足我們開發中大部分的動畫需求。

在我們了解這些強大的接口前,我們先來看看第一個效果:在用戶打開app要進行登錄的時候,賬戶和密碼輸入框從屏幕的左邊進入,接著登錄按鈕出現。

2.gif 界面動畫


在這段動畫之中發生的最為明顯的事情就是兩個文本框的位置變化,在動畫開始之前,兩個文本框的位置應該是在屏幕的左邊,而下方的按鈕現在是隱藏狀態(設置alpha)

3.jpg 動畫開始前


因此,這個動畫之中發生的事情,我們可以用概括為下面的代碼:

self.userName.center.x+=offset;//userName進入
self.password.center.x+=offset;//password進入
self.login.alpha=1;//顯示登錄按鈕

既然已經知道了我們的動畫發生了什麼,接著就可以使用UIKit的動畫API讓我們的動畫活起來了

//設置文本框初始位置為屏幕左側 CGPointaccountCenter=self.userName.center; CGPointpsdCenter=self.password.center; accountCenter.x-=200; pasCenter.x-=200; self.userName.center=accountCenter; self.password.center=psdCenter;   //還原中心坐標 accountCenter.x+=200; psdCenter.x+=200; [UIViewanimateWithDuration:0.5animations:^{ self.userName.center=accountCenter; self.password.center=passwordCenter; self.login.alpha=1; }completion:nil];

在UIKit中,系統提供了animate標題打頭的屬於UIView的類方法讓我們可以輕松的制作動畫效果,每一個這樣的類方法提供了名為animationsblock代碼塊,這些代碼會在方法調用後立刻或者延遲一段時間以動畫的方式執行。此外,所有這些API的第一個參數都是用來設置動畫時長的。

viewDidAppear:中運行這段代碼,你會看到文本框從左側滑動,按鈕也漸變顯示出來的,但是跟我們要的結果不太一樣 —— 三個動畫沒有錯開,效果並不那麼的好看。我們希望密碼框能在賬戶文本框滑動後的一段時間後再出現,按鈕同樣也需要晚一些顯示。所以,我們需要使用下面的方法來實現這個效果:

  [UIViewanimateWithDuration:0.5delay:0.35options:UIViewAnimationOptionCurveEaseInOutanimations:^{ self.password.center=passwordCenter; }completion:^(BOOLfinished){ [UIViewanimateWithDuration:0.2animations:^{ self.login.alpha=1; }]; }];

這個方法看起來非常的熟悉,相比上面的方法這裡多了幾個參數來高度定制我們的動畫:

duration: 動畫時長

delay: 決定了動畫在延遲多久之後執行

options:用來決定動畫的展示方式,接下來會進行講解

animations:轉化成動畫表示的代碼

completion:動畫結束後執行的代碼塊

在上面的代碼中,密碼輸入框在延後0.35秒之後開始從左側出來,在持續0.5秒的動畫之後,開始漸變顯示按鈕,然後動畫完成。

可實現動畫的屬性


現在你已經可以制作簡單的動畫了,但要記住:不是所有修改屬性的操作放到animations代碼塊中都是變成動畫實現的 —— 不管你怎麼修改一個視圖的tag,或者是delegate。因此,可實現動畫的屬性必定會導致視圖的重新渲染。
這些可以生成動畫的屬性大致可以分成這麼三類:坐標尺寸視圖顯示形態變化

坐標尺寸類

bounds:修改這個屬性會結合center屬性重新計算frame。建議通過這個屬性修改尺寸

frame:修改這個屬性通常會導致視圖形變的同時也發生移動,然後會重新設置centerbounds屬性

center: 設置後視圖會移動到一個新位置,修改後會結合bounds重新計算frame

blob.png
尺寸修改

視圖顯示類

backgroundColor: 修改這個屬性會產生顏色漸變過渡的效果,本質上是系統不斷修改了tintColor來實現的

alpha:修改這個屬性會產生淡入淡出的效果

hidden:修改這個屬性可以制作翻頁隱藏的效果


修改透明度

blob.png

形態變化類

transform:修改這個屬性可以實現旋轉、形變、移動、翻轉等動畫效果,其通過矩陣運算的方式來實現,因此更加強大

blob.png
旋轉

動畫參數


上面我們使用到的動畫方法中有一個重要的參數options,它能讓你高度的自定義動畫效果。下面展示這個參數類型的值集合,你可以通過結合不同的參數來實現自己的動畫:

Repeating

UIViewAnimationOptionRepeat//動畫循環執行 UIViewAnimationOptionAutoreverse//動畫在執行完畢後會反方向再執行一次

我們將這兩個參數傳入到上面密碼框出現動畫中,看看會有什麼效果(不同的參數使用|操作符一起傳入)

  [UIViewanimateWithDuration:0.5delay:0.35options:UIViewAnimationOptionAutoreverse|UIViewAnimationOptionRepeatanimations:^{ self.password.center=passwordCenter; }completion:^(BOOLfinished){ [UIViewanimateWithDuration:0.2animations:^{ self.login.alpha=1; }]; }]; 3.gif
重復的動畫


我們可以看到密碼框在不斷的循環進入屏幕,反方向退出屏幕這個操作,並且登錄按鈕也始終沒有漸變出現。由此可以知道UIViewAnimationOptionRepeat參數不僅是讓動畫循環播放,並且還導致了completion的回調永遠無法執行。

Easing
我們都知道,一個好的動畫應該更符合我們認知的規則。比如,任何事物都不能突然間的開始移動和停下,像車輛啟動和停止都有一個加速和減速的過程。

blob.png
汽車的加速減速.png


為了讓動畫更具符合我們的認知,系統同樣提供了類似的效果的參數給我們使用:

  UIViewAnimationOptionCurveEaseInOut//先加速後減速,默認 UIViewAnimationOptionCurveEaseIn//由慢到快 UIViewAnimationOptionCurveEaseOut//由快到慢 UIViewAnimationOptionCurveLinear//勻速

我在demo上創建了四個橙色的UIView,分別傳入這四個不同的參數,然後讓這四個view在同一時間y軸上向上移動。

  [selfanimatedView:_view1]; [selfanimatedView:_view2]; [selfanimatedView:_view3]; [selfanimatedView:_view4];   //y軸上移動視圖上升250 -(void)animatedView:(UIView*)view { [UIViewanimateWithDuration:0.5delay:0options:UIViewAnimationOptionCurveLinearanimations:^{ CGPointcenter=view.center; center.y-=250; view.center=center; }completion:nil]; } 4.gif
四種線性速度表示


在模擬器運行狀態下,點擊上面的菜單欄DEBUG -> Slow Animation或者快捷鍵command + T,這會放慢我們app的動畫運行速度(demo在6p的模擬器上運行)。
在減速環境下,我們看到四個view的速度變化如下:
1、逐漸加速。EaseIn
2、先加速,後減速。EaseInOut
3、速度領先,然後減速。EaseOut
4、勻速運動。Linear
運行最開始的登錄動畫,放慢模擬器的動畫速度,你會看到默認情況下使用的EaseInOut參數使得密碼框在接近結束點的時候出現了明顯的減速動畫。

Transitioning
除了上面提到的這些效果,在視圖、圖片切換的時候,我們還能通過傳入下面的這些參數來實現一些特殊的動畫效果。

  UIViewAnimationOptionTransitionNone//沒有效果,默認 UIViewAnimationOptionTransitionFlipFromLeft//從左翻轉效果 UIViewAnimationOptionTransitionFlipFromRight//從右翻轉效果 UIViewAnimationOptionTransitionCurlUp//從上往下翻頁 UIViewAnimationOptionTransitionCurlDown//從下往上翻頁 UIViewAnimationOptionTransitionCrossDissolve//舊視圖溶解過渡到下一個視圖 UIViewAnimationOptionTransitionFlipFromTop//從上翻轉效果 UIViewAnimationOptionTransitionFlipFromBottom//從上翻轉效果

那麼這些參數使用的時機是什麼時候呢?我們來看看這麼一段代碼:

  [UIViewtransitionWithView:firstPVduration:0.5options:UIViewAnimationOptionTransitionFlipFromLeftanimations:^{ [firstPVflipCard]; }completion:^(BOOLfinished){ isAnimating=NO; }];   -(void)flipCard { if(isfliped){ self.image=[UIImageimageNamed:@"flipPicBG.png"]; isfliped=NO; }else{ self.image=[UIImageimageNamed:[NSStringstringWithFormat:@"flipPic%d.png",type]]; isfliped=YES; } }

這段代碼中我改變了一個UIImageView的圖片顯示,同樣用了一個動畫的方式表現。這裡用到了一個新的動畫API方法,transitionWithView: duration: options: animations: completion:,這個方法跟上面的animateWithDuration系列方法相比多了一個UIView類型的參數,這個參數接收的對象作為動畫的作用者。這段代碼是我以前做的一個翻卡匹配的小游戲,點擊之後的動畫效果如下:

5.gif
翻卡匹配小游戲


在模擬器下使用command+T放慢了動畫的速度之後,我截取了翻轉的四張圖片:

blob.png
慢動作翻轉


在我們切換圖片的時候,原有的圖片會基於視圖中心位置進行x軸上的翻轉,為了達到更逼真的效果,系統還為我們在切換中加上了陰影效果(ps: 再次要說明的是,transition的動畫你應該只用在視圖的切換當中 —— 你不會在移動中產生任何transition效果的)

彈簧動畫


恭喜你,你已經可以使用UIKit的動畫接口制作精美的動畫了,通過組合不同的options參數你可以制作真實的動畫。但是,我們總是能做的更多,比如一個彈簧被用力壓扁,當松開手的時候會反復彈動。使用上面的方式縱然可以實現這樣的動畫,但代碼量復雜,也基本無復用性可言,可想而知會是糟糕的代碼。因此,我們需要其他的動畫方式,系統也正好提供了這樣的一種動畫供我們使用:

  +(void)animateWithDuration:(NSTimeInterval)durationdelay:(NSTimeInterval)delayusingSpringWithDamping:(CGFloat)dampingRatioinitialSpringVelocity:(CGFloat)velocityoptions:(UIViewAnimationOptions)optionsanimations:(void(^)(void))animationscompletion:(void(^__nullable)(BOOLfinished))completion

照例科普一下額外的參數信息:

dampingRatio:速度衰減比例。取值范圍0 ~ 1,值越低震動越強

velocity:初始化速度,值越高則物品的速度越快

當一個圓角按鈕高速移動的進入界面中,接著狠狠的震動,這絕對會狠狠地吸引住你的眼球。比如我嘗試著讓某個UICollectionView的分類按鈕從屏幕下方彈入視圖的時候;又或者我讓這個小球彈到右下角,以提示用戶該如何操作:

6.gif
  • 小球彈出效果


    這效果非常的棒,在看到這些小圓球之後,你本能的會想要去點擊這些按鈕,而這些小球彈出的動畫僅僅需要下面這麼幾句代碼:

      CGPointcenter=cell.center; CGPointstartCenter=center; startCenter.y+=LXD_SCREEN_HEIGHT; cell.center=startCenter;   [UIViewanimateWithDuration:0.5delay:0.35*indexPath.itemusingSpringWithDamping:0.6initialSpringVelocity:0options:UIViewAnimationOptionCurveLinearanimations:^{ cell.center=center; }completion:nil];

    除了這段彈出的代碼,在小球被點擊的時候,還會產生一個彈到右下角的動畫,然後從左側彈出列表。這非常的酷,因為不用額外的提示,用戶會很自然的知道該怎麼回到分組的界面 —— 點擊一下右下角的圓形按鈕。這是非常重要的,我們的動畫應該不僅僅只是為了讓界面更加的優雅漂亮,還應該能用以減少用戶學習使用app的成本,這些都是動畫的追求。

    最後

    相比起PC端的粗糙,移動端的應用需要更加精致,精致復雜的動畫都是源於一個個簡單的動畫組合而成的。本文作為動畫篇的第一篇博客,目的是為了從最簡單的UIView動畫講起,慢慢的拓展其它的動畫,也希望能起到拋磚引玉的作用。在文章的最後,如果你是iOS動畫的初學者,請嘗試結合上面提到的知識,為本文最開始的登錄demo中添加代碼,讓按鈕從下方漸變顯示彈出:

    7.gif 彈出的登錄按鈕
  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved