/* syntax highlight */ /* end of syntax highlight */

2010年12月30日 星期四

iphone app 開發 (三十八) 多重檢視動畫 (animations)

Bookmark and Share

image

相信各位如果有順利完成上一篇的範例,一定很有成就感 (但是之前應該很痛苦…)

總之筆者也是看了很久才完成該範例,使用 Xcode 的環境真的跟以前寫程式的邏輯不太一樣

 

總是本篇是延續上一篇的 iphone app 開發 (三十七) 建立多重檢視應用程式

再進一步將這些多重檢視的切換改成動畫的方式,方法不難,一定要把它學會 !

 

請打開你的 SwitchViewController.m 檔,我們來加入一些 Animation 的原素進去,就可以把這些 View 與 View 之前的切換改成動畫的方式,步驟很簡單,程式碼也很直覺

請從上一篇的 SwitchViewController.m 檔開始修改,加入 [UIView ] 的相關 Animation code

 

  1. -(IBAction)switchViews:(id)sender
  2. {
  3.     [UIView beginAnimations:@"View Flip" context:nil];
  4.     [UIView setAnimationDuration:1.25];
  5.     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
  6.    
  7.     if (self.yellowViewController.view.superview == nil)
  8.     {
  9.         if(self.yellowViewController == nil)
  10.         {
  11.             YellowViewController *yellowXibController =
  12.                 [[YellowViewController alloc] initWithNibName:@"YellowView"
  13.                 bundle:nil];
  14.             self.yellowViewController = yellowXibController;
  15.             [yellowXibController release];
  16.         }
  17.        
  18.         [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft
  19.               forView:self.view cache:YES];
  20.         [blueViewController viewWillAppear:YES];
  21.         [yellowViewController viewWillDisappear:YES];
  22.        
  23.         [blueViewController.view removeFromSuperview];
  24.         [self.view insertSubview:yellowViewController.view atIndex:0];
  25.        
  26.         [yellowViewController viewDidDisappear:YES];
  27.         [blueViewController viewDidAppear:YES];
  28.     }
  29.     else
  30.     {
  31.         if(self.blueViewController == nil)
  32.         {
  33.             BlueViewController *blueXibController = [[BlueViewController
  34.                 alloc] initWithNibName:@"BlueView" bundle:nil];
  35.             self.blueViewController = blueXibController;
  36.             [blueXibController release];
  37.         }
  38.        
  39.         [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft
  40.             forView:self.view cache:YES];
  41.         [yellowViewController viewWillAppear:YES];   
  42.         [blueViewController viewWillDisappear:YES];
  43.                
  44.         [yellowViewController.view removeFromSuperview];
  45.         [self.view insertSubview:blueViewController.view atIndex:0];
  46.  
  47.         [blueViewController viewDidDisappear:YES];
  48.         [yellowViewController viewDidAppear:YES];
  49.  
  50.     }
  51.     [UIView commitAnimations];
  52. }
  53.  

 

動畫的邏輯是,我們宣告一個特別的 UIView ,專門顯示動畫用,並且指定翻轉 (View Flip ) 的動畫方式,並用 setAnimationDuration 設定動畫的顯示時間 ,context 指的是與 Core Animation 較有相關的應用,在這裡先不做說明。

 

後面的 viewWillAppear 及 viewWillDisappear 相信一看就懂了,不需要多做解釋,但是不要忘了最後要加 commitAnimations 才能確認動畫的輸入。

 

值得特別一題的是,其中 setAnimationCurve 指的是動畫的速率,共有四種方式:

 

(1) UIViewAnimationTransitionFlipFromLeft :即從左邊翻轉

image

 

(2) UIViewAnimationTransitionFlipFromRight :即從右邊翻轉

image

(3) UIViewAnimationTransitionCurlUp :即往上翻轉

image

(4) UIViewAnimationTransitionCurlDown :即往下翻轉

image

 

而如果是自己重新開一個專案的話,必須手動建立兩個 View ,這方面的教學可以參考 babyfish0226 大大的 View 切換特效示範 ,希望你也能學會此動畫 :P

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...