UI基础--手写代码实现汤姆猫动画

//
//  ViewController.m
//  TomCat
//
//  Created by xiaomoge on 14/12/10.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
{
    UIButton *_btnDrink;// 喝动作按钮
    UIButton *_btnEat;// 吃动作按钮
    UIButton *_btnFart;// 放屁动作按钮
    UIButton *_btnPie;// 馅饼动作按钮
    UIButton *_btnScratch;// 抓动作按钮
    UIButton *_btnCymbal;// 钹动作按钮
    UIButton *_btnKnockOut;// 敲头动作按钮
    UIButton *_btnFootLeft;// 左脚动作按钮
    UIButton *_btnFootRight;// 右脚动作按钮
    UIButton *_btnStomach;// 腹部动作按钮
    UIImageView *_imageView;// 图片
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImage *image = [UIImage imageNamed:@"drink_00.jpg"];
    _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
    _imageView.image = image;
    [self.view addSubview:_imageView];
    _btnKnockOut = [self creatBtn:CGRectMake(70, 75, 190, 160) andImage:nil andSEL:@selector(knockout)];
    _btnStomach = [self creatBtn:CGRectMake(100, 310, 120, 90) andImage:nil andSEL:@selector(stomach)];
    _btnFootLeft = [self creatBtn:CGRectMake(110, 440, 40, 30) andImage:nil andSEL:@selector(footLeft)];
    _btnFootRight = [self creatBtn:CGRectMake(170, 420, 50, 30) andImage:nil andSEL:@selector(footRight)];
    _btnDrink = [self creatBtn:CGRectMake(20, 400, 60, 60) andImage:[UIImage imageNamed:@"drink"] andSEL:@selector(drink)];
    _btnEat = [self creatBtn:CGRectMake(20, 330, 60, 60) andImage:[UIImage imageNamed:@"eat"] andSEL:@selector(eat)];
    _btnFart = [self creatBtn:CGRectMake(20, 260, 60, 60) andImage:[UIImage imageNamed:@"fart"] andSEL:@selector(fart)];
    _btnPie = [self creatBtn:CGRectMake(250, 260, 60, 60) andImage:[UIImage imageNamed:@"pie"] andSEL:@selector(pie)];
    _btnCymbal = [self creatBtn:CGRectMake(250, 330, 60, 60) andImage:[UIImage imageNamed:@"cymbal"] andSEL:@selector(cymbal)];
    _btnScratch = [self creatBtn:CGRectMake(250, 400, 60, 60) andImage:[UIImage imageNamed:@"scratch"] andSEL:@selector(scratch)];
}
#pragma mark - 创建一个button按钮
- (UIButton *)creatBtn:(CGRect)fram andImage:(UIImage *)image andSEL:(SEL)sel{
    UIButton *btn = [[UIButton alloc] init];
    btn.frame = fram;
    [btn setBackgroundImage:image forState:UIControlStateNormal];
    [btn addTarget:self action:sel forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
    return btn;
}
#pragma  mark - 执行动画的事件
- (void)animationOfAction:(NSString *)name andCount:(NSInteger)count{

    if (_imageView.isAnimating) return;// 判断是否正在执行动画,如果是就直接退出,否就执行下一句
    NSMutableArray *images = [NSMutableArray arrayWithCapacity:count];// 创建一个接收需要执行帧动画的图片数组
    for (int index = 0; index < count; index++) {
        NSString *imagesName = [NSString stringWithFormat:@"%@_%02d",name,index];// 根据索引生成图片名字
        NSString *path = [[NSBundle mainBundle] pathForResource:imagesName ofType:@"jpg"];// 获取图片的所在路径
//       创建图片
//      imageNamed 带有缓存,通过imageNamed创建的图片会放到缓存中,执行动画时内存会过高,所以为了内存优化着想,不推荐使用imageNamed创建的图片
//        当你把图片放在 Images.xcassets 就只能通过imageNamed加载
//        UIImage  *image = [UIImage imageNamed:imagesName];
        UIImage *image = [UIImage imageWithContentsOfFile:path];// 从图片的路径获得图片,这里图片的路径放在Supporting Files下
        [images addObject:image];//把图片加入到帧动画数组中
    }
    [_imageView setAnimationImages:images];// 设置执行帧动画的图片数组
    _imageView.animationDuration = count * 0.05;//帧动画执行的时间
    _imageView.animationRepeatCount = 1;// 帧动画执行的次数
    [_imageView startAnimating];// 开始动画
    [_imageView performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:_imageView.animationDuration + 1];// 在帧动画执行完1秒后清除缓存的图片
}
#pragma mark - 腹部
- (void)stomach{
    [self animationOfAction:@"stomach" andCount:34];
}
#pragma mark - 左脚
- (void)footLeft{
    [self animationOfAction:@"footLeft" andCount:30];
}
#pragma mark - 右脚
- (void)footRight{
    [self animationOfAction:@"footRight" andCount:30];
}
#pragma mark - 敲头
- (void)knockout{
    [self animationOfAction:@"knockout" andCount:81];
}
#pragma mark - 喝水
- (void)drink{
    [self animationOfAction:@"drink" andCount:81];
}
#pragma mark - 吃
- (void)eat{
    [self animationOfAction:@"eat" andCount:39];
}
#pragma mark - 放屁
- (void)fart{
    [self animationOfAction:@"fart" andCount:28];
}
#pragma mark - 馅饼
- (void)pie{
    [self animationOfAction:@"pie" andCount:24];
}
#pragma mark - 抓
- (void)scratch{
    [self animationOfAction:@"scratch" andCount:56];
}
#pragma mark - 钹
- (void)cymbal{
    [self animationOfAction:@"cymbal" andCount:13];
}
@end
时间: 2024-10-11 00:33:58

UI基础--手写代码实现汤姆猫动画的相关文章

[UI基础][不会说话的汤姆猫]

会说话的汤姆猫这个APP层级风靡一时,其UI部分就是利用了序列动画的技术, 接下来 我们用汤姆猫来演示怎么制作序列动画. [要求]: 1.学会使用序列动画的方法 2.学会分析动画播放中内存占用高的问题,并解决 [实现] 1.搭建UI界面 1.1.设置模拟器的屏幕尺寸3.7,添加素材 我们的素材文件是是按照3.7Inch的大小,设置屏幕大小为3.7Inch,添 加动画的素材到工程. 2.2.添加控件 2.2.1.添加背景图片 我们用ImageView控件来实现动画,首先添加一个UIViewImag

OS开发UI基础—手写控件,frame,center和bounds属性

OS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View Contollor和view的关系 2.注意点 在OC开发中,Storyboard中的所有操作都可以通过代码实现,程序员一定要熟练掌握代码布局界面的能力! 设置控件监听方法的示例代码如下: [btn addTarget:sel

iOS开发:纯代码实现汤姆猫小游戏

演示效果如下: 代码如下: 1 // 2 // CKViewController.m 3 // 纯代码实现汤姆猫 4 // 5 // Created by FrankChen on 14-12-10. 6 // Copyright (c) 2014年 diaozhatian. All rights reserved. 7 // 8 9 #import "CKViewController.h" 10 11 @interface CKViewController () 12 { 13 //

[iOS基础控件 - 3.4] 汤姆猫

需求: 1.点击按钮播放相应动画 2.点击汤姆猫身体部分(头.脚.尾巴)显示动画 3.当前正在播放动画不可触发其他动画 4.优化缓存.内存管理 A.序列帧动画 #1. png格式的文件可以不带扩展名访问,而且可以放到”Images.scassets”的组中预览,jpg只能放到support file中了,而且访问的时候要写上扩展名 #2. 在ViewController中的属性栏可以设置storyboard模型的大小 #3. 拖入文件夹的时候要选择“Create Groups"才能正确引用,不要

iOS开发UI基础—手写控件,frame,center和bounds属性

一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View Contollor和view的关系 2.注意点 在OC开发中,Storyboard中的所有操作都可以通过代码实现,程序员一定要熟练掌握代码布局界面的能力! 设置控件监听方法的示例代码如下: [btn addTarget:self action:@selector(click:) forContro

156 UIImageView 和 CADisplayLink 实现 Tom 汤姆猫动画效果的区别(扩展知识:分组(黄色文件夹)和文件夹引用(蓝色文件夹)区别)

关键操作: 效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @property (strong, nonatomic) UIImageView *imgVAnimation; 5 @property (strong, nonatomic) CADisplayLink *displayLink; 6 7 @end ViewController.m

iOS开发UI篇—手写控件,frame,center和bounds属性

iOS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View Contollor和view的关系 2.注意点 在OC开发中,Storyboard中的所有操作都可以通过代码实现,程序员一定要熟练掌握代码布局界面的能力! 设置控件监听方法的示例代码如下: [btn addTarget:se

IOS 开发笔记-基础 UI(7)汤姆猫(UIImageView 的序列帧动画、图片加载,方法重构、Bundle 图片素材)

使用UIImageView.UIButton实现一个综合小案例---汤姆猫 回忆:UIImageView 来自UIView,UIView 来自UIResponder,UIButton 来自UIControl,UIControl 来自UIView 单独看实现,代码实现其实比较简单,但是创意很难得,美工要求很高! 是一个了不起的游戏! 功能分析 (1)点击对应的按钮后,让汤姆猫展现对应的动画 步骤分析 (1)搭建UI界面,同时也是准备素材 (2)监听按钮点击 (3)根据点击的按钮执行对应的动画 说明

UI到底应该用xib/storyboard完成,还是用手写代码来完成?

UI到底应该用xib/storyboard完成,还是用手写代码来完成? 文章来源:http://blog.csdn.net/libaineu2004/article/details/45488665 参考文章: <关于代码手写UI,xib和StoryBoard> http://blog.csdn.net/likendsl/article/details/38731333 <代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧> ht