IOS 學習04 湯姆貓開發，ios04

IOS 學習04 湯姆貓開發，ios04

 IOS開發，一個簡單的湯姆貓開發，如下：

 1.1以前一直覺得這個小遊戲不錯，很好玩，現在學習IOS才發現其實這個程式真心很簡單，其實這個還不是個完整，還沒有聲音，以後再來完整。

 1.2 建立項目，匯入圖片，在項目images.xcassets中儲存PNG圖片，這裡只儲存6個按鍵圖片，圖片檔案直接拉進就可以，如：

 

1.3 相信大多數人都玩過這個小遊戲，其實這就是一個動畫，而動畫就是由多個圖片連在一起播放的，最後看起來就是動畫了。

1.4 知道了動畫的原理，那就好辦了，我們再來匯入按鍵相對應的動畫組圖片，這些都圖片我們現在不儲存在images.xcassets裡面了，

 我們現在都儲存在項目Supporting Files裡面，和上面一樣直接把圖片文化拉進來就可以，如：

  

這個Animations檔案夾裡面就是所以動畫要用的圖片了，Animations檔案夾裡面又對應很多子檔案夾，

這裡每個子檔案夾都對應該介面一個按鍵事件所要操作的動畫，如：

1.5 中在Angry檔案夾中有81張圖片，把這個檔案夾的圖片一起連著播放 ，就是湯姆貓倒地的一個動畫了，別的檔案夾同理。

2.1 項目建立和圖片載入完後，就開始設計介面了，介面放一個UIimage,把螢幕佔滿，設定image屬性，在項目中找一個湯姆貓開始的圖片。

 然後再在介面放11個Button按鍵用來做11個動畫事件，放一個透明的Button在頭上，和一個透明Button在肚子下面，兩個透明Button在兩個腳上，和一個透明有Button在尾巴上， 然後每個6個看得見動畫Button按鍵設定對應的image屬性，透明的按鍵這裡看不到，介面如。

 3.1 這裡的介面沒有做多的設定，介面設計完成以後，然後就對應頁面11個按鍵建立11個點擊事件，然後再建立一個介面UIimage屬性，如下。

#import "ViewController.h"@interface ViewController ()// 點頭事件- (IBAction)Kuockout;//點肚子事件- (IBAction)stomach;//點左腳事件- (IBAction)footLeft;//點右腳事件- (IBAction)footRight;//點尾巴事件- (IBAction)angry;//點拉巴事件- (IBAction)cambal;//喝奶事件- (IBAction)drink;//點小鳥事件- (IBAction)eat;//放屁事件- (IBAction)fart;//- (IBAction)pie;//抓子事件- (IBAction)csrotch;//介面圖片屬性@property (weak, nonatomic) IBOutlet UIImageView *tom;@endView Code

3.2 然後把對應的事件和介面對應的按鍵連起來，這些做完了，我們就要思考如何寫動畫事件代碼了？

3.3 因為前面提到每個動畫是由一組圖片連起來播放組成的，所以第一條就是要找到每個事件所相對應的圖片組。

3.4 然後就是把這個圖片組放到螢幕的UIimage裡，讓他播放，就OK，當然，思路好了，就可以來實現代碼了，這裡我們就可以封裝一個方法來做動畫播放，方法如下，這裡面有實現代碼和每一行代碼的講解，所以在這裡就不再說了。

1 //載入動畫方法，兩個參數，第一個會傳入圖片檔案名稱，第二個傳入動畫圖片的數量 2 -(void)animationWithImgName:(NSString *)imgName imgCount:(int)imgCount 3 { 4 //判斷這個動畫是否播放完沒有，沒有播放完，不讓下一個動畫播放。 5 if(self.tom.isAnimating) return; 6 7 //定義動態數組來儲存載入的動畫圖片 8 NSMutableArray *animationImages=[NSMutableArray array]; 9 10 //迴圈當前要播放的動畫的圖片數量，然後把所有圖片添加到動態數組中。11 for (int i=0; i<imgCount; i++) {12 13 //得到動畫的檔案名稱，%02d是站2個數字，如果只有一位元字，前面加0,14 NSString *name=[NSString stringWithFormat:@"%@_%02d",imgName,i];15 16 // 得到動畫圖片的全路徑17 NSString *path=[[NSBundle mainBundle] pathForResource:name ofType:@"jpg"];18 19 //載入圖片,把動態圖片的路徑的圖片傳入IMG變數中20 UIImage *image=[UIImage imageWithContentsOfFile:path];21 22 [animationImages addObject:image];23 }24 25 //把載入的所有圖片添加到UIimag中；26 self.tom.animationImages=animationImages;27 28 //設定動畫的時間，29 self.tom.animationDuration=animationImages.count *0.1;30 31 //讓動畫執行一次，如果這裡不設定就會一直重複動畫32 self.tom.animationRepeatCount=1;33 34 // 開始執行動畫35 [self.tom startAnimating];36 37 // 5.清空圖片，也就是清空緩衝，IOS會把你執行的每一個動畫都緩衝起來，38 39 [self.tom performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:self.tom.animationDuration];40 41 42 43 }View Code

3.5 這個方法傳入兩個參數，第一個會傳入圖片檔案名稱，第二個傳入動畫圖片的數量，這樣我們就可以把介面所有的動畫事的實現都封裝到一個方法了，對於按鍵事件就簡單了，如下。

1 - (IBAction)Kuockout { 2 3 [self animationWithImgName:@"knockout" imgCount:81]; 4 } 5 6 - (IBAction)stomach { 7 [self animationWithImgName:@"stomach" imgCount:34]; 8 } 9 10 - (IBAction)footLeft {11 12 [self animationWithImgName:@"footLeft" imgCount:30];13 14 }15 - (IBAction)footRight {16 [self animationWithImgName:@"footRight" imgCount:30];17 }18 19 - (IBAction)angry {20 [self animationWithImgName:@"angry" imgCount:26];21 22 }23 24 - (IBAction)cambal {25 26 [self animationWithImgName:@"cymbal" imgCount:13];27 }28 29 - (IBAction)drink {30 31 [self animationWithImgName:@"drink" imgCount:81];32 }33 34 - (IBAction)eat {35 36 [self animationWithImgName:@"eat" imgCount:40];37 }38 39 - (IBAction)fart {40 41 [self animationWithImgName:@"fart" imgCount:28];42 }43 44 - (IBAction)pie {45 46 [self animationWithImgName:@"pie" imgCount:24];47 }48 49 - (IBAction)csrotch {50 51 [self animationWithImgName:@"scratch" imgCount:56];52 }View Code

 

4.0 這些寫完以後，運行程式我們的湯姆貓就開發完成了，如：

最後上傳一下自己的代碼，雖然程式不是很好，但互連網精神分享！： http://pan.baidu.com/s/1i3L7INr