iOS開發：UIView的Animation效果

 　　所謂動畫效果，就是會動的畫，到iOS App中來說的話，就是各種UIView的移動。 想想看，如果我們自己來實現所有UIView的動畫效果，需要考慮些什麼東西呢?

　　* 該UIView現在在哪兒?

　　* 該UIView最後會動到哪兒?

　　* 該UIView以什麼樣的方式移動到那兒?

　　* 該動畫持續多長時間?

　　* 每次移動的最小時間間隔?

　　* 每次最小時間間隔的移動的應該移動到哪兒?

　　* ….

　　想想這是一個多麼殺腦細胞的過程，尤其是每一次的動畫過程都要重複這一折磨的過程。

　　還好，現實比想象的美好， 蘋果公司為開發人員思考了上面的問題，通過使用UIKit提供的動畫支援，開發人員只需要簡單的幾行代碼就能實現各種各樣的動畫效果。在UIKit中，所有的動畫效果支援的方法都在UIView類中。

　　首先，在UIView中有很多屬性用以描述一個UIView的狀態，而動畫就是讓UIView從一個狀態平滑的過渡到另外一個狀態的過程。這些屬性有：

　　通過設定這些屬性，基本上就解決了動畫中的移動到哪兒的問題。

　　接著，蘋果公司在UIView中加入很多方法來方便家控制動畫的移動時間，以及移動的方式。iOS3.0及之前，UIView支援的Animation方法有如下這麼多：

　　Object-c代碼

　　@interface UIView(UIViewAnimation)

　　+ (void)beginAnimations:(NSString *)animationID context:(void *)context; // additional context info passed to will start/did stop selectors. begin/commit can be nested

　　+ (void)commitAnimations; // starts up any animations when the top level animation is commited

　　// no getters. if called outside animation block, these setters have no effect.

　　+ (void)setAnimationDelegate:(id)delegate; // default = nil

　　+ (void)setAnimationWillStartSelector:(SEL)selector; // default = NULL. -animationWillStart:(NSString *)animationID context:(void *)context

　　+ (void)setAnimationDidStopSelector:(SEL)selector; // default = NULL. -animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context

　　+ (void)setAnimationDuration:(NSTimeInterval)duration; // default = 0.2

　　+ (void)setAnimationDelay:(NSTimeInterval)delay; // default = 0.0

　　+ (void)setAnimationStartDate:(NSDate *)startDate; // default = now ([NSDate date])

　　+ (void)setAnimationCurve:(UIViewAnimationCurve)curve; // default = UIViewAnimationCurveEaseInOut

　　+ (void)setAnimationRepeatCount:(float)repeatCount; // default = 0.0. May be fractional

　　+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; // default = NO. used if repeat count is non-zero

　　+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState; // default = NO. If YES, the current view position is always used for new animations -- allowing animations to "pile up" on each other. Otherwise, the last end state is used for the animation (the default).

　　+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache; // current limitation - only one per begin/commit block

　　+ (void)setAnimationsEnabled:(BOOL)enabled; // ignore any attribute changes while set.

　　+ (BOOL)areAnimationsEnabled;

　　@end

　　這些方法非常的不直觀，開發人員還是需要花很多時間去思考怎麼組合這些方法。但是自從iOS4.0提供塊文法支援之後，蘋果公司把動畫效果的實現封裝了一下，效果立杆見影，直觀了許多，因此大家完全可以不用去看上面的那些方法，重點關注如下的方法：

　　Object-c代碼

　　@interface UIView(UIViewAnimationWithBlocks)

　　+ (void)animateWithDuration:(NSTimeInterval)duration

　　delay:(NSTimeInterval)delay

　　options:(UIViewAnimationOptions)options

　　animations:(void (^)(void))animations

　　completion:(void (^)(BOOL finished))completion;

　　+ (void)animateWithDuration:(NSTimeInterval)duration

　　animations:(void (^)(void))animations

　　completion:(void (^)(BOOL finished))completion

　　NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0

　　+ (void)animateWithDuration:(NSTimeInterval)duration

　　animations:(void (^)(void))animations

　　NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL

　　+ (void)transitionWithView:(UIView *)view

　　duration:(NSTimeIntervl)duration

　　options:(UIViewAnimationOptins)options

　　animations:(void (^)(void)animations

　　completion:(void (^)(BOOL finished) completion

　　NS_AVAILABLE_IOS(4_0);

　　+ (void)transitionFromView:(UIView *)fromView

　　toView:(UIView *)toView

　　duration:(NSTimeInterval)duration

　　options:(UIViewAnimationOptions)options

　　completion:(void (^)(BOOL finished))completion

　　NS_AVAILABLE_IOS(4_0); // toView added to fromView.superview, fromView removed from its superview

　　@end

　　上面的幾個方法從名字上看就非常直觀。前三個方法都可以按如下的方式直譯，只是後兩個使用了一些預設參數而已：

　　Java代碼

　　做一個動畫效果，期間為duration,

　　延遲delay秒開始執行 ，

　　以options指定的方式運行這個動畫，

　　animations塊中指定哪些UIView會參加本次動畫效果，以及動畫效果完成時這些UIView會是一個什麼狀態，

　　動畫完成之後，執行completion塊進行收尾。

　　有了這3個方法，開發人員只需要思考，初始值，結果值，期間，運行方式就行了，具體的細節移動都交給類庫。

　　後2個方法是用於UIView相互之間轉換的，個人覺得用處不大，因為用上面的三個方法同樣可以做到這些效果，因此略過。

　　關於UIView的動畫效果支援，有2點值得一提

　　* 上面所有的方法都是類方法，當調用這些方法之後，系統會新起線程執行動畫效果，不會阻塞主線程的執行。

　　* UIView的Animation效果只支援一些簡單的2D動畫效果，複雜的大家還得研究Core Animation。

　　一個實戰例子

　　在我寫的一個小遊戲的主機介面中，我使用了一點動畫的效果，主介面的設計圖如下：

　　動畫後的效果圖如下：

　　我想要的效果就是，載入主介面後，圖片緩緩的展開成扇形，然後遊戲的菜單顯示供玩家點擊。

　　代碼如下：

　　首先，準備動畫前狀態,讓想展示的UIView不可見：

　　Object-c代碼

　　-(void) prepareForIntroAnimation

　　{

　　self.sImageView.hidden=YES;

　　self.nImageView.hidden=YES;

　　self.aImageView.hidden=YES;

　　self.pImageView.hidden=YES;

　　self.jokerImageView.hidden=YES;

　　self.hostGameButton.alpha=0.0f;

　　self.joinGameButton.alpha=0.0f;

　　self.singlePlayerGameButton.alpha=0.0f;

　　self.helpButton.alpha=0.0f;

　　_buttonsEnabled = NO;

　　}

　　然後，展示動畫效果：

　　Object-c代碼

　　-(void) performAnimation

　　{

　　//顯示UIView

　　self.sImageView.hidden=NO;

　　self.nImageView.hidden=NO;

　　self.aImageView.hidden=NO;

　　self.pImageView.hidden=NO;

　　self.jokerImageView.hidden=NO;

　　[UIView animateWithDuration:0.65f

　　delay:0.5f

　　options:UIViewAnimationOptionCurveEaseIn

　　animations:^

　　{

　　//確定UIView的的中心位置和偏轉角度

　　self.sImageView.center = CGPointMake(80.0f, 108.0f);

　　self.sImageView.transform = CGAffineTransformMakeRotation(-0.22f);

　　self.nImageView.center = CGPointMake(160.0f, 93.0f);

　　self.nImageView.transform = CGAffineTransformMakeRotation(-0.1f);

　　self.aImageView.center = CGPointMake(240.0f, 88.0f);

　　self.pImageView.center = CGPointMake(320.0f, 93.0f);

　　self.pImageView.transform = CGAffineTransformMakeRotation(0.1f);

　　self.jokerImageView.center = CGPointMake(400.0f, 108.0f);

　　self.jokerImageView.transform = CGAffineTransformMakeRotation(0.22f);

　　}

　　completion:nil];

　　[UIView animateWithDuration:0.5f

　　delay:1.0f

　　options:UIViewAnimationOptionCurveEaseOut

　　animations:^

　　{

　　//透明度設定為1，顯示遊戲菜單。

　　self.hostGameButton.alpha = 1.0f;

　　self.joinGameButton.alpha = 1.0f;

　　self.singlePlayerGameButton.alpha = 1.0f;

　　self.helpButton.alpha = 1.0f;

　　}

　　completion:^(BOOL finished)

　　{

　　_buttonsEnabled = YES;

　　}];

　　}

　　另外，動畫效果還可以使用completion的回調塊做串連，完成多個動畫效果的串連。