iOS学习之路-简单汤姆猫

相信大家对汤姆猫这个游戏，都不陌生。汤姆猫确实是一款很经典的app。但我第一次接触汤姆猫的时候，觉得很神奇，它能根据我触摸的部位，然后做出相对应的动作，并且能重复人的声音。当用代码实现的时候，才发现原来是帧动画的播放。对于汤姆猫这个小项目，只是完成了触摸相应部位以及功能时，做出相对应的动作，至于声音还没有学到，所以暂时没有实现。此外，触摸事件也没有学，所以触摸头部、脚以及尾巴，我是用一个按钮(button)来实现的。

一、知识点

（1）文档注释：/** 文字 */

（2）要加载多张图片：一般用数组。定义：[ NSMutableArray *images = NSMutableArray array ].

（3）添加图片到数组中：[ images addObject : image ].

（4）isAnimating 方法：判断当前是否有动画正在执行。

（5）imageName：有缓存（传入文件名）。一般在图片较小或者图片较少的情况下使用。

imageWithContentsOfFile：没有缓存（传入文件的全路径）在图片比较大以及比较多的情况下使用。下面会具体介绍。

（6）动画播放次数：animationRepeatCount = 1代表动画只执行一次。

（7）动画播放时间：animationDuration.

（8）开始动画：startAnimation.

二、NSArray和NSMutableArray的区别

（1）NSArray-不可变数组

[ array count ]：数组的长度。

[ array objectAtIndex 0 ]：传入数组脚标的id得到数组对象。

[ arrayWithObjects;... ]：向数组对象初始化赋值。这里可以写任意对对象的指针。结尾必须使用nil。

（2）NSMutableArray 可变对象数组

[ NSMutableArray arrayWithCapacity：6 ]：初始化可变数组对象的长度，如果后面代码继续添加数组超过6以后，NSMutableArray的长度会自动扩充，6是自己可以设置的数组长度。

[ array addObject：... ]：向可变数组尾部添加数据对象。

[ array addObjectsFromArray： ]：向可变数组尾部添加一个数组对象。

三、在iOS开发中，有三种简单的动画设置。

（1）首尾式动画

代码实例：

// beginAnimations表示此后的代码要“参与到”动画中
[UIView beginAnimations:nil context:nil];
//设置动画时长[UIView setAnimationDuration:2.0];self.headImageView.bounds = rect;// commitAnimations,将beginAnimation之后的所有动画提交并生成动画[UIView commitAnimations];

说明：如果只是修改控件的属性，使用首尾式动画还是比较方便的，但是如果需要在动画完成后做后续处理，就不是那么方便了。

（2）block代码块动画

代码实例：

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; word-wrap: break-word; background-color: rgb(245, 245, 245); font-family: 'Courier New' !important;"><span style="color: rgb(0, 128, 0); line-height: 1.5 !important;">//</span><span style="color: rgb(0, 128, 0); line-height: 1.5 !important;">简单的动画效果</span>[UIView animateWithDuration:<span style="color: rgb(128, 0, 128); line-height: 1.5 !important;">2.0</span> animations:^<span style="line-height: 1.5 !important;">{showlab.alpha</span>=<span style="color: rgb(128, 0, 128); line-height: 1.5 !important;">0</span><span style="line-height: 1.5 !important;">;} completion:</span>^<span style="line-height: 1.5 !important;">(BOOL finished) {[showlab removeFromSuperview];}];</span>

说明：（1）在实际的开发中更常用的是block代码块来处理动画操作。

（2）块动画相对来说比较灵活，尤为重要的是能够将动画相关的代码编写在一起，便于代码的阅读和理解。

（3）序列侦动画（本次汤姆猫的动画应用）

代码实例：

NSMutableArray *images = [NSMutableArray array];            // 定义一个图片数组for(int i = 0;i < count;i++){// 计算文件名，即加载对应的图片。图片命名方式为name_00.NSString *fileName = [NSString stringWithFormat:@"%@_%02d.jpg",name,i];// 从plist文件中加载图片NSBundle *bundle = [NSBundle mainBundle];NSString *path = [bundle pathForResource:fileName ofType:nil];UIImage *image = [UIImage imageWithContentsOfFile:path];// 将图片添加到图片数组中[images addObject:image];}self.tom.animationImages = images;// 2.设置图片的播放次数self.tom.animationRepeatCount = 1;// 3.设置图片的播放时间self.tom.animationDuration = images.count*0.05;         // 图片的总数乘于0.05[self.tom startAnimating];                              // 开始播放动画// 4.设置动画放完1秒后清除内存CGFloat delay = self.tom.animationDuration + 1.0;[self.tom performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:delay];

四、imageName和imageWithContentsOfFile的区别和使用（引用）

imageName：这个方法用一个指定的名字在系统缓存中查找并返回一个图片对象如果它存在的话。如果缓存中没有找到相应的图片，这个方法从指定的文档中加载然后缓存并返回这个对象。因此imageName的优点是当加载时会缓存图片。所以当图片会频繁的使用时，那么用imageName的方法会比较好。例如：你需要在一个TableView里的TableViewCell里都加载同样一个图标，那么用imageNamed加载图像效率很高。系统会把那个图标Cache到内存，在TableViewCell里每次利用那个图像的时候，只会把图片指针指向同一块内存。正是因此使用imageName会缓存图片，即将图片的数据放在内存中，iOS的内存非常珍贵并且在内存消耗过大时，会强制释放内存，即会遇到memory warnings。而在iOS系统里面释放图像的内存是一件比较麻烦的事情，有可能会造成内存泄漏。例如：当一个UIView对象的animationImages是一个装有UIImage对象动态数组NSMutableArray，并进行逐帧动画。当使用imageNamed的方式加载图像到一个动态数组NSMutableArray，这将会很有可能造成内存泄露。原因很显然的。

imageWithContentsOfFile：仅加载图片，图像数据不会缓存。因此对于较大的图片以及使用情况较少时，那就可以用该方法，降低内存消耗。

所以在汤姆猫这个小项目中，用到的图片比较多，因此应该使用imageWithContentsOfFile，不然很容易导致运行时内存越用越多，导致应用崩溃的情况。

更多详细的解释，可以参考http://blog.csdn.net/dqjyong/article/details/26969355

五、UIImageView的帧动画相关（引用）

UIIimageView可以让一系列的图片在特定的时间内按顺序显示

（1）相关属性解析：

① animationImages：要显示的图片（一个装着UIImage的NSArray）。

② animationDuration：完整地显示一次animationImages中的所有图片所需的时间。

③ animationRepeatCount：动画的执行次数（默认为0，代表无限循环）。

（2）相关方法解析：

① - (void)startAnimation：开始动画。

② - (void)stopAnimation：停止动画

③ - (Bool)isAnimating：判断是否正在运行动画

更多关于UIIMageView的动画解析，可以访问http://www.cnblogs.com/wendingding/p/3802830.html

六、添加图片的注意事项

（1）对于png格式的图片。直接拖进Assets.xcassets文件中即可。

（2）对于jpg格式的图片，不能直接拖进Assets.xcassets中，因为xcode不能直接读取jpg格式的图片。我们需要把这些图片拖进Supporting Files这个文件文件里面，并且在设置的时候，应该选择第二个选项，Create groups。若选择第一个和第三个，均会报错。我第一次添加的时候，选择的是第三个，结果报了下图所示的错误。所以，大家以后在添加jpg格式图片的时候，切记要选择Create groups选项。

此外，在设置storyboard Image View时，图片要加后缀名.jpg。不然将无法加载图片。

七、图片内存的自动释放

在汤姆猫的项目中，加载图片用的时imageWithContentsOfFile。所以图片并不会产生缓存，但在播放动画的时候，要设置一个延迟，当动画播放完毕后，自动释放内存。

CGFloat delay = self.tom.animationDuration + 1.0;
[self.tom performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:delay];

之所以要把延迟的时间设置为播放时间 + 1，是因为想在动画播放完1秒后，释放内存。若设置的时间少于图片的播放时间，则会导致播放提前结束，图片播放不完整；若设置的时间远多于图片的播放时间，则用户需要等待较长的时间才能进行下一个动画的播放，影响用户体验。

八、计算文件名的思想

在我们汤姆猫的文件名中，其命名方式时name_00的方式，所以我们要加载对应的图片，应要有对应的方式。

<span style="white-space:pre">  </span>NSString *fileName = [NSString stringWithFormat:@"%@_%02d.jpg",name,i];

% 02d的意思为，当位数不足两位数时，十位自动补0，从而实现01～09的文件命名方式。

九、运行结果

十、源代码

<span style="font-size:14px;">#import "ViewController.h"@interface ViewController ()
- (IBAction)drink;              // 喝牛奶
- (IBAction)cymbal;             // 敲鼓
- (IBAction)eat;                // 吃小鸟
- (IBAction)fart;               // 放屁
- (IBAction)pie;                // 扔派
- (IBAction)scratch;            // 抓屏幕
- (IBAction)leftFoot;           // 左脚动作
- (IBAction)rightFoot;          // 右脚动作
- (IBAction)knock;              // 敲击头动作
- (IBAction)angry;              // 触摸尾巴生气/** 这是一张显示猫的图片 */
@property(nonatomic,weak)IBOutlet UIImageView *tom;@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.
}- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.
}/** 播放动画 */
-(void)runAnimationWithCount:(int)count name:(NSString *)name{if(self.tom.isAnimating)            // 判断是否已经开始动画return;// 1.加载所有的动画图片NSMutableArray *images = [NSMutableArray array];            // 定义一个图片数组for(int i = 0;i < count;i++){// 计算文件名，即加载对应的图片。图片命名方式为name_00.NSString *fileName = [NSString stringWithFormat:@"%@_%02d.jpg",name,i];// 从plist文件中加载图片NSBundle *bundle = [NSBundle mainBundle];NSString *path = [bundle pathForResource:fileName ofType:nil];UIImage *image = [UIImage imageWithContentsOfFile:path];// 将图片添加到图片数组中[images addObject:image];}self.tom.animationImages = images;// 2.设置图片的播放次数self.tom.animationRepeatCount = 1;// 3.设置图片的播放时间self.tom.animationDuration = images.count*0.05;         // 图片的总数乘于0.05[self.tom startAnimating];                              // 开始播放动画// 4.设置动画放完1秒后清除内存CGFloat delay = self.tom.animationDuration + 1.0;[self.tom performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:delay];
}- (IBAction)drink {// 调用播放动画方法，并传入图片张数和图片所在文件夹名称[self runAnimationWithCount:81 name:@"drink"];
}- (IBAction)cymbal {[self runAnimationWithCount:13 name:@"cymbal"];
}- (IBAction)eat {[self runAnimationWithCount:40 name:@"eat"];
}- (IBAction)fart {[self runAnimationWithCount:28 name:@"fart"];
}- (IBAction)pie {[self runAnimationWithCount:24 name:@"pie"];
}- (IBAction)scratch {[self runAnimationWithCount: 56 name:@"scratch"];
}- (IBAction)leftFoot {[self runAnimationWithCount:30 name:@"footLeft"];
}- (IBAction)rightFoot {[self runAnimationWithCount:30 name:@"footRight"];
}
- (IBAction)knock {[self runAnimationWithCount:81 name:@"knockout"];
}
- (IBAction)angry {[self runAnimationWithCount:26 name:@"angry"];
}
@end</span><strong style="font-size: 14px;">
</strong>

十一、总结

当做完汤姆猫时，内心还是有些许成就感的，毕竟基本实现了功能，遗憾的是，缺少声音的处理以及触摸事件，不过这两项，随着继续深入的学习，将不再是问题。在途中遇到了不少问题，包括上述所提到的问题，但通过问老师以及上百度查找答案，都得到了很好的解答。因此从中学到了不少，特别是关于动画的播放。

———爱分享，一起学，共成长！

iOS学习之路-简单汤姆猫相关推荐

教教你如何配置汤姆猫和 Java 环境变量的设置
我们先学习下如何设置汤姆猫的环境变量吧! JDK环境变量配置: 如果你的JDK安装在C盘里,如:C:\Program Files\Java\jdk1.6.0_05,那么就在系统变量里(当然 ...
java程序填空题输出汤姆猫_教教你如何配置汤姆猫和 Java 环境变量的设置
我们先学习下如何设置汤姆猫的环境变量吧! JDK环境变量配置: 如果你的JDK安装在C盘里,如:C:\Program Files\Java\jdk1.6.0_05,那么就在系统变量里(当然也 ...
【成长记录】iOS小程序-不会说话的汤姆猫
做一个不会说话的汤姆猫,原理其实很简单,只是把连续的帧动画连续起来播放,但是在Xcode中实现起来很简单,不像是安卓那么复杂,只是Xcode中的方法封装的很实用很简单. 先看看,慢慢说起来~~~ 其实 ...
java程序填空题输出汤姆猫_Java学习之手写Tomcat“迷你汤姆猫”
之前学习Java EE的时候,做的项目都是部署在Tomcat上面,配置web.xml(小毛驴),然后启动Tomcat,通过浏览器输入URL去访问,当时其实真的不懂好多东西,尤其是不懂request.和 ...
汤姆猫信使: 折翼的信使
相信不少用户的手机中都养了不少汤姆猫吧,从会说话的汤姆猫到汤姆的情书再到近日发布的汤姆猫信使,你的手机中恐怕又得新养一只了,不过这只猫的动作太单调,只会说个话什么的,说实话有点坑爹: 应用名称:汤姆的 ...
会说话的好朋友：汤姆猫开发商Outfit7旗下应用盘点
还记得那只会说话的汤姆猫吗?它就像一个口袋里的好朋友和开心果,给大家带来了很多快乐.在汤姆猫大获成功后,其开发公司Outfit7又陆续推出了"会说话的好朋友"系列,这些趣味盎然的游 ...
java程序填空题输出汤姆猫_《Java语言程序设计(新)》地大模拟
<Java语言程序设计(新)>地大模拟 2020-08-29 08:08:08 635 有学员问关于<Java语言程序设计(新)>地大模拟的题目的参考答案和解析,具体如下: & ...
如何成功运行tomcat并进入汤姆猫
刚刚学习Java EE的时候,配环境可以说是相当痛苦的,下面我来教大家一些配置的经验. 配置tomcat是需要先配置JDK,我这里奉上百度云连接,JAVA EE工具,这是版本稍微兼容一点的. 百度云链 ...
汤姆猫java下载手机版_汤姆猫编程星球app下载-汤姆猫编程星球下载v1.0.8-西西软件下载...
汤姆猫编程星球是一款少儿编程教育软件,帮助想学习编程少年快速学习,多彩多样的玩法,锻炼孩子的思维性,逻辑性,从小时候就加强大脑的锻炼,喜欢的朋友可以在西西下载使用. 软件介绍汤姆猫编程星球介绍和汤姆 ...
java输出动物,求大神帮助输出为什么只有动物名，几条腿，怎么叫，没有汤姆猫叫等...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 package test; abstract class Animal{ String name; public Animal(String n){nam ...

iOS学习之路-简单汤姆猫

———爱分享，一起学，共成长！

iOS学习之路-简单汤姆猫相关推荐

最新文章

热门文章