項目名稱:Tom貓

項目知識:UIImageView控件動畫播放

效果圖:

開始項目

一、

（1）添加一個項目，在storyboard添加一個UIImageView

如圖布局將真個ViewControl布滿。

（2）添加UIImagView 默認 image，這張圖片為Tom平時狀態。

如圖

（3）開始寫后臺代碼，選擇分頁模式 

 （4）Tom觸摸點分解

Tom貓點擊頭部，胸部，腳以及6個圖標都會做出相應的動作。其實這9個的核心代碼是一樣。這里我僅僅寫頭部的代碼，其他部分留給讀者自己思考。

(6)在Tom頭部添加一個Button，當觸摸到這個按鈕的時候，就觸發頭部動作。

設置Button的屬性，使得Button的文本消失。

（7)進行連線，編寫處理代碼

如圖

在TouchHead_Click函數添加一下函數

    for(int i=0;i<80;i++)

    {

        //循環添加圖片

        NSString *imgName=[NSString stringWithFormat:@"knockout_%02d.jpg",i];

        NSString *path=[[NSBundle mainBundle] pathForResource:imgName ofType:nil];

        UIImage *img=[UIImage imageWithContentsOfFile:path];

        [imgArray addObject:img];

        [self LoadImageWithClearImage];

    }

另外需要自寫兩個函數，

1，-（void）ClearImage;清除圖片

2,-(void)LoadImageWithClearImage//加載圖片跟清楚圖片

具體如下

-(void)ClearImg

{

    self.ImageCat.image=nil;

    [imgArray removeAllObjects];

}

-(void)LoadImageWithClearImage

{

    //設置動畫源

    [self.ImageCat setAnimationImages:imgArray];

    //設置動畫重復次數

    [self.ImageCat setAnimationRepeatCount:1];

    //設置動畫播放的速度

    [self.ImageCat setAnimationDuration:imgArray.count*0.1];

    //設置動畫播放完的執行的函數

    [self.ImageCat performSelector:@selector(ClearImg) withObject:nil afterDelay:self.ImageCat.animationDuration];

    //開始動畫

    [self.ImageCat startAnimating];

}

到這里核心代碼已經完全寫完，后面8個動作代碼基本一樣。

二、思路總結

定義了一個全局的NSMutableArray，作為圖片儲存數組。當我點擊按頭部的時候，會觸發加載動畫+清除動畫。

具體如下

    //i為圖片的張數

    for(int i=0;i<80;i++)

    {

        //循環添加圖片

        NSString *imgName=[NSString stringWithFormat:@"knockout_%02d.jpg",i];

        NSString *path=[[NSBundle mainBundle] pathForResource:imgName ofType:nil];

        UIImage *img=[UIImage imageWithContentsOfFile:path];

        [imgArray addObject:img];

    }

    [self LoadImageWithClearImage]；

當我加載完圖片的時候就應該開始動畫。但是在開始動畫前需要動畫進行設置。

設置動畫的源-----設置動畫的重復次數---設置動畫的速度--設置動畫結束是執行的函數--設置開始動畫

具體代碼如下：

    //設置動畫源

    [self.ImageCat setAnimationImages:imgArray];

    //設置動畫重復次數

    [self.ImageCat setAnimationRepeatCount:1];

    //設置動畫播放的速度

    [self.ImageCat setAnimationDuration:imgArray.count*0.1];

    //設置動畫播放完的執行的函數

    [self.ImageCat performSelector:@selector(ClearImg) withObject:nil afterDelay:self.ImageCat.animationDuration];

    //開始動畫

    [self.ImageCat startAnimating];