IOS 開發筆記-基礎 UI（7）湯姆貓(UIImageView 的序列幀動畫、圖片載入，方法重構、Bundle 圖片素材），

IOS 開發筆記-基礎 UI（7）湯姆貓(UIImageView 的序列幀動畫、圖片載入，方法重構、Bundle 圖片素材），

使用UIImageView、UIButton實現一個綜合小案例---湯姆貓

回憶：UIImageView 來自UIView，UIView 來自UIResponder，UIButton 來自UIControl，UIControl 來自UIView

單獨看實現，代碼實現其實比較簡單，但是創意很難得，美工要求很高！ 是一個了不起的遊戲！

功能分析

(1)點擊對應的按鈕後，讓湯姆貓展現對應的動畫

步驟分析

(1)搭建UI介面，同時也是準備素材(2)監聽按鈕點擊(3)根據點擊的按鈕執行對應的動畫
說明：只適配了3.5寸螢幕 

Images.xcassets中的素材

1>  蘋果極力推薦（images。xcassets 只支援 png 格式）png格式的圖片，因為 png 格式圖片保真，不要用 jpg 圖片，jpg不保真，壓縮比太高，有噪點。

2>  圖片只支援[UIImage imageNamed]的方式執行個體化，但是不能從Bundle中載入

3>  在編譯時間，Images.xcassets中的所有檔案會被打包為Assets.car的檔案

 

如果一定要使用 jpg 格式圖片，那麼要放到 supporting files 檔案夾內

 

UIImageView的序列幀動畫

類別關係

NS_CLASS_AVAILABLE_IOS(2_0) @interface UIImageView : UIView 

找到一個屬性；動畫映像（複數，數組）

@property(nonatomic,copy) NSArray *animationImages;            // The array must contain UIImages. Setting hides the single image. default is nil

還有一個時間間隔

@property(nonatomic) NSTimeInterval animationDuration;         // for one cycle of images. default is number of images * 1/30th of a second (i.e. 30 fps)

double類型，是一組圖片，播放一個周期的時間，預設是每秒30個圖

typedef double NSTimeInterval;

還有一個重複屬性，0代表無線重複，預設是0

@property(nonatomic) NSInteger      animationRepeatCount;      // 0 means infinite (default is 0)

還有三個對象方法

- (void)startAnimating;- (void)stopAnimating;- (BOOL)isAnimating;

注意：不可以並行的進行動畫，比如和水的時候，不能同時被打頭！需要判斷方法，上面提到了isAnimating 方法

代碼如下：

#import "ViewController.h"@interface ViewController ()@property (weak, nonatomic) IBOutlet UIImageView *tom;@end@implementation ViewController- (void)tomAnimationOfName:(NSString *) img andCount:(int)count{    //序列幀動畫：讓一組圖片，和放電影一樣，一張張的播放，動起來的效果        //判斷是否動畫中，不可以同步    if ([self.tom isAnimating]) {        //直接結束動畫操作方法,這裡就是沒有傳回值，nil 不行        return;    }        //開始肯定是儲存圖片，81個，用可變數組    NSMutableArray *arrayImage = [NSMutableArray array];    //遍曆圖片    for (int i = 0; i < count; i++) {        //類似 c，格式控制，不足兩位0補齊        NSString *name = [NSString stringWithFormat:@"%@_%02d.jpg", img, i];        UIImage *image = [UIImage imageNamed:name];        //添加到數組裡        [arrayImage addObject:image];    }    //然後開始動畫    //把圖片放到animationImages,接受數組參數    self.tom.animationImages = arrayImage;    //設定時間間隔,81張圖，圖多就播的時間稍微長，否則短    self.tom.animationDuration = arrayImage.count * 0.074;    //設定重複次數    self.tom.animationRepeatCount = 1;    //開始動畫    [self.tom startAnimating];    //結束動畫}- (IBAction)head{    [self tomAnimationOfName:@"knockout" andCount:81];}- (IBAction)drink{    [self tomAnimationOfName:@"drink" andCount:81];}

不過，發現程式啟動並執行時候非洲消耗記憶體！

 

考慮UIImage imageNamed問題（詳解：UIImage 的imageWithContentsOfFile:path和imageNamed的區別）

在圖片使用完成後，不會直接被釋放掉，具體釋放時間由系統決定，這是不好的，不合理的。需要我們手動改變。比如如果同一圖片，一個程式裡總是反覆使用每次都要重新從磁碟載入，會降低效能。（程式員追求的是平衡，相對效能好，執行時間好。不能搞極端。）這些是模擬器測不出來的，因為使用的是電腦的記憶體，不會輕易用完。一般來說：imageNmaed  適用於圖片小的，常用的影像處理。來進行載入。還可以使用[UIImage imageWithContentsOfFile:path]執行個體化映像（全路徑）。

因為前者有緩衝（圖片所佔用的記憶體會一直停留在程式中）

+ (UIImage *)imageNamed:(NSString *)name;後者，無緩衝（圖片所佔用的記憶體會在一些特定操作後被清除）+ (UIImage *)imageWithContentsOfFile:(NSString *)path- (id)initWithContentsOfFile:(NSString *)path;path是圖片的全路徑

        NSString *name = [NSString stringWithFormat:@"%@_%02d.jpg", img, i];        // UIImage *image = [UIImage imageNamed:name];        //添加到數組裡        NSString *file = [[NSBundle mainBundle] pathForResource:name ofType:nil];        UIImage *image = [UIImage imageWithContentsOfFile:file];        [arrayImage addObject:image];

這樣發現，還是沒什麼大的改變，那麼應該在動畫調用的時候，做手動的把動畫數組的內容清空！這裡還要注意，要節哀延遲，否則動畫剛開始，就清空了！注意！

    //結束動畫，應該等等再清空    [self.tom performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:self.tom.animationDuration];

 

代碼中的方法重構的策略

1> 將具有共性的代碼複製到一個新的方法

2> 根據不同的調用情況，增加方法的參數

提示：在寫程式時不要著急重構，有時候把代碼先寫出來，更容易看清楚如何重構才會更好！當一份代碼重複出現在程式的多處地方，就會造成程式又臭又長，當這份代碼的結構要修改時，每一處出現這份代碼的地方都得修改，導致程式的擴充性很差，因此，要將重複出現的代碼抽取到某個方法中，在需要這份代碼的地方調用方法即可

抽取代碼的思路：將相同的代碼放到一個方法中，將不同的值當做方法參數傳進來 

Bundle中的圖片素材

往項目中拖拽素材時，通常選擇

1> Destination: 勾選

2> Folders:

選擇第一項：黃色檔案夾

Xcode中分檔案夾，Bundle中所有素材所在，都在同一個檔案夾下，開發效率很高，因此，不能出現檔案重名的情況，但是美工不舒服。

       

特點：

可以直接使用[NSBundle mainBundle]作為資源路徑，效率高！

可以使用[UIImage imageNamed:]載入映像

 

選擇第二項：藍色檔案夾

Xcode中分檔案夾，Bundle中同樣分檔案夾，因此，可以出現檔案重名的情況

特點：

需要在[NSBundle mainBundle]的基礎上拼接實際的路徑，效率較差！

不能使用[UIImage imageNamed:]載入映像

 

檔案管理

[NSFileManager defaultManager]

常用方法

1> 判斷檔案是否存在

- (BOOL)fileExistsAtPath:(NSString *)path;

2> 將檔案從源路徑複製到目標路徑

- (BOOL)copyItemAtPath:(NSString *)srcPath toPath:(NSString *)dstPath error:(NSError **)error;

3> 刪除檔案

- (BOOL)removeItemAtPath:(N

 

序列幀動畫開發大概步驟：

// 1. 設定圖片的數組[self.tom setAnimationImages:xxx];// 2. 設定動畫時間長度，預設每秒播放30張圖片[self.tom setAnimationDuration:xxx];// 3. 設定動畫重複次數，預設為0，無限迴圈[self.tom setAnimationRepeatCount:xxx];// 4. 開始動畫[self.tom startAnimating];// 5. 動畫播放完成後，清空動畫數組[self.tom performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:self.tom.animationDuration];