IOS04湯姆貓開發

2019-11-14 18:53:04

字體：大中小

來源：轉載

供稿：網友

湯姆貓，截圖如下：

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;@end

View 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 }