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

來源:互聯網
上載者:User

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

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

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

動效

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

從登入動畫說起

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

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

介面動畫


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

動畫開始前


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

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


尺寸修改視圖顯示類

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

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

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


修改透明度

形態變化類

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


旋轉動畫參數

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

Repeating

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

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

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


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

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


汽車的加速減速.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]; }
四種線性速度表示


在模擬器運行狀態下,點擊上面的功能表列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類型的參數,這個參數接收的對象作為動畫的作用者。這段代碼是我以前做的一個翻卡匹配的小遊戲,點擊之後的動畫效果如下:


翻卡匹配小遊戲


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


慢動作翻轉


在我們切換圖片的時候,原有的圖片會基於視圖中心位置進行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的分類按鈕從螢幕下方彈入視圖的時候;又或者我讓這個小球彈到右下角,以提示使用者該如何操作:

  • 小球彈出效果


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

     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中添加代碼,讓按鈕從下方漸層顯示彈出:

    彈出的登入按鈕

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.