iOS界面--Tom猫的实现

曾经，风靡安卓和iPhone的一款游戏叫做“汤姆猫”，那么看似很复杂汤姆猫是如何实现的呢？本文为您揭晓答案。

本文着重从以下几点开始讲述，其中内存优化会介绍两个方法：imageNamed和imageWithContentOfFile，并通过连个方法的不同来加深对内存优化的理解。

tom猫实现思路
逻辑代码
内存优化
代码封装

文章末尾，会有少部分的代码配合文章的思路讲解。项目源代码，欢迎关注微信公众账号“一路上有你”，发送“tom猫+邮箱”，笔者会在第一时间将源代码发送至您的邮箱。好了，我们进入正题。

一、tom猫实现思路

讲解思路之前，我们一起来看一下这个游戏是什么样子的，如下图，打击猫的头部和点击“鸟”等按钮，猫都会做一些响应的动作。

现在，我们将这个游戏进行分解。从上图我们能够看出，猫总共有四个动作，分别是：“吃鸟”、“喝牛奶”、“刮玻璃”以及“晕倒”。我们仔细看一下，除了“晕倒“之外，我们能够很明显看到另外三个动作都是点击按钮后触发的。也就是说，屏幕上至少有三个UIButton控件。其实，我们再仔细思考一下，”晕倒“是鼠标点击头部后触发的动作，那么我们是不是可以认为，我们在猫头部所在位置也添加了一个UIButton呢？是的，正是因为在头部添加一个按钮，所以导致有”晕倒的效果”。那么，我们思考一下“猫”是如何响应这些动作的呢？我们可以这样理解：整个屏幕有一张背景图，触发按钮后，整个背景按照一定的图片序列更换，所以构成了动画。所以，屏幕上除了按钮空间外，还有UIImageView控件用来显示UIImage。

到这里，游戏基本分解完毕，我们总结一下。通过点击屏幕上的按钮，背景图按照一定的图片序列进行更换，从而构成了整个动画。有个细节我们需要注意一下，当“猫”在喝牛奶的时候，连续点击“吃鸟”的按钮，猫并没有响应吃鸟的事件，避免了动画被中断的情况。

接下来，就到了实现的步骤了。本例中，我们为了简单，使用storyboard文件来进行布局。如下图：

往视图控制器上拖拽一个和屏幕大小一样的UIImageView控件，用来显示一个图像。另外，往视图控制器上继续拖拽4个UIButton，分别用来表示“头部”、“吃鸟”、“牛奶”、“玻璃”。此时，我们需要将UIImageView对象作为IBOutlet属性，四个按钮作为IBAction属性。于是，需要在ViewController.m文件中，我们需要添加属性

@interface ViewController ()

@property(nonatomic,strong) IBOutlet UIImageView *tom;

@end

在Xcode里面，将_tom属性与UIImageView控件用线连起来。另外，我们要添加一下按钮属性和方法，并用线将其链接起来。

到这里，游戏的思路已经非常明显了。我们接下来就需要将各个按钮的背景图片和主页的背景图片进行设置了，storyboard文件给我们了一个非常好理解的图形界面，我们只需要在其属性页面中设置就好了。

二、逻辑代码

分析完游戏的过程，我们看一下实现的情况，实现无非分为以下几步：

①获取图片

②加载图片到数组中

③设置UIImageView的动画数组及其动画特性

在上述步骤中，我们将前两步概括如下：

NSMutableArray *_array = [NSMutableArray array];

for (int i=0; i<81 + 1; i++) {

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

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

UIImage *image = [UIImage imageWithContentsOfFile:path];

[_array addObject:image];

NSLog(@"path=%@",path);

}

在iOS中，UIImageView提供了动画方法，相关参数如下：

self.tom.animationImages = _array; //设置动画数组

self.tom.animationDuration = _array.count * 0.075; //设置动画时长

self.tom.animationRepeatCount = 1; //设置只执行一次

[self.tom startAnimating]; //开始动画

到这一步，我们基本已经实现了tom猫的框架。点击相应按钮，能够产生相应动作。

有一个细节我们需要注意，当动画正在执行的过程中，如果点击其他按钮，之前的动画就会被打断。所以防止出现了此类情况，我们需要利用isAnimating来判断当前是否有动画正在执行。

三、内存优化

在讲内存优化之前，我们来看两种加载图片的方式，如下：

①UIImage *image = [UIImage imageNamed:@“knockout”]

②UIImage *image = [UIImage imageWithContentsOfFile:path]

第一种方式，只需要给出文件名称就可以；第二种方式，需要给出文件的全路径。另外，如果采取第一种方式，图片一旦加载进入内存后，由系统决定何时释放存储空间。第二种方式，程序员可以决定何时释放内存。

在上述逻辑代码实现中，如果采取第一种图片加载方法，我们可以看到模拟器运行时内存使用了200兆，并且每运行一次，内存累加一次。如果采取第二种图片加载方法，并且手动将内存释放掉，最终运行时会维持在20多兆。

手动释放内存，主要是延迟将self.tom.animationImages = nil指控，将内存空间释放掉。

四、代码封装

到此时，基本原型已经完全实现。但是，我们可以发现每个按钮都有一段对应的执行代码。且这些代码基本相同。我们就需要考虑一下代码的封装。

分析代码，可以发现，逻辑代码仅存在两处不同点：①循环的次数—图片的张数 ②图片的名称。我们可以使用UIButton的两个属性来精简代码。一个是tag，一个是title。于是精简代码如下：

每点击一次按钮，就将其属性值带入代码中，精简了大部分代码。

---------------------------------------------------

长按二维码，关注“一路上有你”

iOS界面--Tom猫的实现相关推荐

iOS开发脚踏实地学习day02-图片查看器和TOM猫
1.在.m文件中使用self.XX和_XX有什么区别? 在用懒加载,使用getter,让对象在最需要的时候创建时,用_XX实现不了,一定要用self.XX才可以. 前者调用该类的setter或gett ...
猫学习IOS（四）UI半小时就搞定Tom猫
阿土首先对影响下载项目的源材料: Tom猫游戏代码iOS 素材http://blog.csdn.net/u013357243/article/details/44457357 效果图以前风靡一时 ...
猫猫学IOS（四）UI之半小时搞定Tom猫
话不多说先上效果项目源码素材下载地址: Tom猫游戏代码iOS 素材http://blog.csdn.net/u013357243/article/details/44457357 效果图曾经风 ...
IOS开发学习之路--第一篇--TOM猫
当初刚出ipad的时候,tom猫是非常流行的,而如今比这个应用绚丽的软件比比皆是,但是这个是ios编程的基础,所以通过自身的学习来完成一个TOM也是挺有意义的. 项目目的: 1)更好的理解UIButt ...
（素材源代码）猫猫学IOS（四）UI之半小时搞定Tom猫
下载地址:http://download.csdn.net/detail/u013357243/8514915 以下是执行图片展示制作思路以及代码解析猫猫学IOS(四)UI之半小时搞定Tom猫这里 ...
【iOS开发-45】Tom猫案例：动画、imageNamed与imageWithContentOfFile对内存影响、图片文件夹放哪儿以及文档注释
今天tom猫案例效果: (1)最傻最笨的办法: --所有的点击都是按钮,只不过有6个有图标的按钮,有些头部.左右脚.肚子.尾巴那块也是一个按钮,只不过没背景没文字没边框的按钮用户按不到而已. --这里 ...
iOS界面设计之基础控件的学习 --- UITextField
学习iOS界面设计也有段时间了,每次写到一些基础控件(如:UILable . UITextField)的时候就深觉应该总结一个函数来实现这些基础控件的属性设置,所以下面就是我对UITextField的 ...
如何解决iOS界面操作导致导致NSTimer暂停计时的问题？
如何解决iOS界面操作导致导致NSTimer暂停计时的问题? 在NSTimer代码后面加上以下代码,这样滚动scroll的时候就不会暂停了. NSRunLoop *t = [NSRunLoop cur ...
tom猫变声原理解析
很多网友对会说话的TOM猫的原理比较感兴趣,这里Android123就实现做一个简单的分析: 1. 音频采集这点主要是通过Android设备的麦克风实时采集音频,由于Android平台的MediaR ...
会说话的TOM猫的原理是什么
很多网友对会说话的TOM猫的原理比较感兴趣,这里Android123就实现做一个简单的分析: 1. 音频采集这点主要是通过Android设备的麦克风实时采集音频,由于Android平台的MediaR ...

iOS界面--Tom猫的实现

iOS界面--Tom猫的实现相关推荐

最新文章

热门文章