iOS开发-UI基础-汤姆猫Tom(序列帧动画)

　　使用UIImageView和UIButton实现Tom小案例.

　　功能分析:点击对应按钮后,tom实现相应的动作和声音

　　步骤分析:

• • 搭建UI界面:(头部,肚子,尾巴,左脚和右脚使用的是button)
  • 监听按钮点击
  • 根据点击的按钮实现相应的序列帧动画

　　tom的动作就是一张一张的图片连续显示在屏幕上,实现动画有几种方式:

　　1.首尾式:

//动画的开始
[UIView beginAnimations:nil context:nil];

//动画的内容

//提交动画(动画结束)
[UIView commitAnimations];

　　2.block代码块实现:

　　

//简单的动画效果
[UIView animateWithDuration:2.0 animations:^{
       //动画体
    } completion:^(BOOL finished) ];

　　3.序列帧动画:

//设置动画图片的资源
self.tom.animationImages = images;
//设置动画的持续时间
self.tom.animationDuration = images.count * 0.08;
//设置动画的执行次数
self.tom.animationRepeatCount = 1;
//开始动画
[self.tom startAnimating];

 

　　Tom实例截图:

　　

UIImageView帧动画相关属性和方法

　　

@property(nonatomic,copy) NSArray *animationImages;
//需要播放的序列帧图片数组（里面都是UIImage对象，会按顺序显示里面的图片）

@property(nonatomic) NSTimeInterval animationDuration;
//帧动画的持续时间

@property(nonatomic) NSInteger animationRepeatCount;
//帧动画的执行次数（默认是无限循环）

- (void)startAnimating;
//开始执行帧动画

- (void)stopAnimating;
//停止执行帧动画

- (BOOL)isAnimating;
//是否正在执行帧动画

UIImage的2种加载方式

//方式一：有缓存（图片所占用的内存会一直停留在程序中）
+ (UIImage *)imageNamed:(NSString *)name;
//name是图片的文件名

//方式二：无缓存（图片所占用的内存会在一些特定操作后被清除）
+ (UIImage *)imageWithContentsOfFile:(NSString *)path;
- (id)initWithContentsOfFile:(NSString *)path;
//path是图片的全路径

注意: imageNamed:这个方法加载完图片后,图片会驻留内存,坏处:占用内处,好处:调用速度很快
　　　　  imageWithContentsOfFile:这个方法当图片用完后回释放内粗,好处:不占用内存,性能比较好,坏处:速度慢.

 

 

storyboard拖线方式

 

附上源代码:

ViewController.m

//
//  ViewController.m
//  04-Tom1
//
//  Created by hukezhu on 15/5/10.
//
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *tom;
@property (nonatomic,strong)AVAudioPlayer *player;

- (IBAction)scratch;
- (IBAction)rightFoot;
- (IBAction)rightFootAvdio;
- (IBAction)drinkOnClick;
- (IBAction)cymbalOnClick;
- (IBAction)eatOnClick;
- (IBAction)fartOnClick;
- (IBAction)pieOnClick;
- (IBAction)knockHeadOnClick;
- (IBAction)tripeOnClick;
- (IBAction)leftFoot;
- (IBAction)tailOnClick;

-(void)animation:(int)no andName:(NSString *)name;
@end

@implementation ViewController
-(void)animation:(int)no andName:(NSString *)name{

    if (self.tom.isAnimating) {
        return;
    }
    //1.加载图片
    NSMutableArray *images = [NSMutableArray array];
    for (int i = 0; i < no; i++) {
        //计算文件名
        NSString *filename = [NSString stringWithFormat:@"%@_%02d.jpg",name,i];
        //加载图片
        //UIImage *image = [UIImage imageNamed:filename];//这种方式加载的图片不会释放
        NSString *path = [[NSBundle mainBundle] pathForResource:filename ofType:nil];
        UIImage *image = [UIImage imageWithContentsOfFile:path];
//        NSString *path = [[NSBundle mainBundle]pathForResource:@"tom" ofType:@"plist"];
//        NSDictionary *dict = [NSDictionary dictionaryWithContentsOfFile:path];
        //添加图片到数组中
        [images addObject:image];
    }
    self.tom.animationImages = images;
    self.tom.animationDuration = images.count * 0.08;
    self.tom.animationRepeatCount = 1;
    [self.tom startAnimating];
    
}
-(IBAction)scratch{

    [self animation:56 andName:@"scratch"];
}
-(IBAction)rightFoot{

    [self animation:30 andName:@"footRight"];
    [self playSound:@"p_foot3.wav"];
}
-(IBAction)rightFootAvdio{

//    NSString *path = [[NSBundle mainBundle]pathForResource:@"p_foot3.wav" ofType:nil];
//    player = [[AVAudioPlayer alloc]initWithContentsOfURL:[NSURL URLWithString:path] error:nil];
//    [player play];
//    [self playSound:@"p_foot3.wav"];
}
- (IBAction)drinkOnClick{

    [self animation:81 andName:@"drink"];
//    [self playSound:@"p_drink_milk.wav"];
    [self performSelector:@selector(playSound:) withObject:@"p_drink_milk.wav" afterDelay:2.5 ];
}
- (IBAction)cymbalOnClick{

    [self animation:12 andName:@"cymbal"];
    [self playSound:@"cymbal.wav"];
}
- (IBAction)eatOnClick{

    [self animation:40 andName:@"eat"];
    [self playSound:@"p_eat.wav"];
}
- (IBAction)fartOnClick{

    [self animation:28 andName:@"fart"];
    [self playSound:@"fart003_11025.wav"];
}
- (IBAction)pieOnClick{

    [self animation:24 andName:@"pie"];
}
- (IBAction)knockHeadOnClick{

    [self animation:81 andName:@"knockout"];
}
- (IBAction)tripeOnClick{

    [self animation:34 andName:@"stomach"];
    
    [self playSound:@"p_belly2.wav"];
}
- (IBAction)leftFoot{

    [self animation:30 andName:@"footLeft"];
    [self playSound:@"p_foot4.wav"];
}
- (IBAction)tailOnClick{

    [self animation:26 andName:@"angry"];

    //[self playSound:@"angry.wav"];
    [self performSelector:@selector(playSound:) withObject:@"angry.wav" afterDelay:0.3];
}
- (void)playSound:(NSString *)name{

    NSString *path = [[NSBundle mainBundle]pathForResource:name ofType:nil];
    _player = [[AVAudioPlayer alloc]initWithContentsOfURL:[NSURL URLWithString:path] error:nil];
    [_player play];
}
@end

注意:

　　当一个动画没有执行完毕的时候,不能执行下一个动画
　　所以进行判断:如果动画正在执行,停止本次代码执行
　　if (self.Tom.isAnimating) {
    　　　　return;
　　}

 

　　抽取公共代码:

　　　　提供出一个方法出来，把抽取的代码放在这个方法中，把相同的部分放在一起，不同的地方作为参数

　　图片的内存优化:

　　　　imageNamed:这个方法加载完图片后,图片会驻留内存,坏处:占用内处,好处:调用速度很快
　　　　imageWithContentsOfFile:这个方法当图片用完后回释放内粗,好处:不占用内存,性能比较好,坏处:速度慢.

　　UIImageView和UIButton的区别:

　　　　 UIImageView: 如果仅仅是显示图片,不需要监听图片的点击
　　　　 UIButton: 既要显示图片,又要监听图片的点击

　　　　UIButton默认能处理点击事件, UIImageView默认不能处理点击事件
　　　   UIButton既能显示图片, 又能显示文字
　　　　UIButton能同时显示两张图片(能够显示背景图片和小图片)
　　　　UIButton继承自UIControl, 因此默认就能处理事件
　　　　继承关系:UIButton:UIControl:UIView;
　　　　因为UIControl有这个方法: (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;

　　　　因为UIControl有添加监听事件的方法,而UIButton继承自UIControl,所以UIButton也有这个方法,但是UIView没有

 

 

　　这里使用到了音频处理,但是只是简单的添加了音频,处理不完善,跟动作效果不协调,之后深入学习之后再过来完善这个小应用.

　　如果需要图片或者音频资源,私信我或者邮箱595632239@163.com即可,共同学习交流.