IOS开发实战-----Tom猫

zhaozy78

项目名称:Tom猫

项目知识:UIImageView控件动画播放

效果图:


开始项目



一、

（1）添加一个项目，在storyboard添加一个UIImageView

  布局将整个ViewControl布满。
（2）添加UIImagView 默认 image，这张图片为Tom平时状态。

（3）开始写后台代码，选择分页模式

（4）Tom触摸点分解

Tom猫点击头部，胸部，脚以及6个图标都会做出相应的动作。其实这9个的核心代码是一样。这里我仅仅写头部的代码，其他部分留给读者自己思考。
(5)在Tom头部添加一个Button，当触摸到这个按钮的时候，就触发头部动作。
设置Button的属性，使得Button的文本消失

(7)进行连线，编写处理代码

在TouchHead_Click函数添加一下函数

1. for(int i=0;i<80;i++)
   
2. 
   
3.     {
   
4. 
   
5.         //循环添加图片
   
6. 
   
7.         NSString *imgName=[NSString stringWithFormat:@"knockout_%02d.jpg",i];
   
8. 
   
9.         NSString *path=[[NSBundle mainBundle] pathForResource:imgName ofType:nil];
   
10. 
    
11.         UIImage *img=[UIImage imageWithContentsOfFile:path];
    
12. 
    
13.         [imgArray addObject:img];
    
14. 
    
15.         [self LoadImageWithClearImage];
    
16. 
    
17.     }

复制代码

另外需要自写两个函数，

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

2,-(void)LoadImageWithClearImage//加载图片跟清楚图片

具体如下

1. -(void)ClearImg
   
2. 
   
3. {
   
4. 
   
5.     self.ImageCat.image=nil;
   
6. 
   
7.     [imgArray removeAllObjects];
   
8. 
   
9. }
   
10. 
    
11. -(void)LoadImageWithClearImage
    
12. 
    
13. {
    
14. 
    
15.     //设置动画源
    
16. 
    
17.     [self.ImageCat setAnimationImages:imgArray];
    
18. 
    
19.     //设置动画重复次数
    
20. 
    
21.     [self.ImageCat setAnimationRepeatCount:1];
    
22. 
    
23.     //设置动画播放的速度
    
24. 
    
25.     [self.ImageCat setAnimationDuration:imgArray.count*0.1];
    
26. 
    
27.     //设置动画播放完的执行的函数
    
28. 
    
29.     [self.ImageCat performSelector:@selector(ClearImg) withObject:nil afterDelay:self.ImageCat.animationDuration];
    
30. 
    
31.     //开始动画
    
32. 
    
33.     [self.ImageCat startAnimating];
    
34. 
    
35. }

复制代码

到这里核心代码已经完全写完，后面8个动作代码基本一样。
二、思路总结

定义了一个全局的NSMutableArray，作为图片储存数组。当我点击按头部的时候，会触发加载动画+清除动画。

具体如下

1. //i为图片的张数
   
2. 
   
3.     for(int i=0;i<80;i++)
   
4. 
   
5.     {
   
6. 
   
7.         //循环添加图片
   
8. 
   
9.         NSString *imgName=[NSString stringWithFormat:@"knockout_%02d.jpg",i];
   
10. 
    
11.         NSString *path=[[NSBundle mainBundle] pathForResource:imgName ofType:nil];
    
12. 
    
13.         UIImage *img=[UIImage imageWithContentsOfFile:path];
    
14. 
    
15.         [imgArray addObject:img];
    
16. 
    
17.     }
    
18. 
    
19.     [self LoadImageWithClearImage]；

复制代码

当我加载完图片的时候就应该开始动画。但是在开始动画前需要动画进行设置。

设置动画的源-----设置动画的重复次数---设置动画的速度--设置动画结束是执行的函数--设置开始动画

具体代码如下：

1. //设置动画源
   
2. 
   
3.     [self.ImageCat setAnimationImages:imgArray];
   
4. 
   
5.     //设置动画重复次数
   
6. 
   
7.     [self.ImageCat setAnimationRepeatCount:1];
   
8. 
   
9.     //设置动画播放的速度
   
10. 
    
11.     [self.ImageCat setAnimationDuration:imgArray.count*0.1];
    
12. 
    
13.     //设置动画播放完的执行的函数
    
14. 
    
15.     [self.ImageCat performSelector:@selector(ClearImg) withObject:nil afterDelay:self.ImageCat.animationDuration];
    
16. 
    
17.     //开始动画
    
18. 
    
19.     [self.ImageCat startAnimating];

复制代码

chen_sixYear

哈哈哈 ，有意思，用swift实现一下呗