开发者社区> 老先生二号> 正文

iOS:quartz2D绘图 (动画)

简介:
+关注继续查看

quartz2D可以用来绘制自己需要的图形,它们绘制出来的是一个静态的图形,那么如何绘制一个动态的图形呢?动态的图形就是动画,所谓动画,其实就是很多张图片在短时间内不停的切换所产生的一种视觉效果。quartz2D可以绘制图形,想一想,那么如果我们设置一个定时器,在很短的时间内不停的绘制多张图片,这不就是动画效果吗?好了,思路已有,接下来就是实践了。

 

代码之前的一些准备:首先需要一份连续的图片素材,接着自定义一个视图类,并将控制器中的视图与它关联在一起。

  

 

我准备的素材是一个游戏的英雄人物,它有站着、攻击(招式有三种)、奔跑的几种状态,导入的素材文件为hero

       

 

下面开始代码的实现了:

1、在ViewController.m文件中初始化自定义的视图,即设置视图大小,并添加一个英雄图片

复制代码
- (void)viewDidLoad {
    [super viewDidLoad];
    
    //添加英雄视图    
    HeroView *heroView = [[HeroView alloc]initWithFrame:self.view.bounds];
    
    [self.view addSubview:heroView];
}
复制代码

 

2、现在余下所有的代码都是自定义类ViewDemo.m文件中进行的,即

//枚举所有的英雄状态

复制代码
typedef enum{
    Hero_Stand,
    Hero_Run,
    Hero_Attack,
    Hero_AttackJ,
    Hero_AttackT
}HeroState;
复制代码

//声明属性 

复制代码
@interface HeroView()
@property (strong,nonatomic)NSTimer *timer;
@property (assign,nonatomic)NSInteger index;
@property (assign,nonatomic)HeroState state;
@property (assign,nonatomic)CGPoint point;
@end
复制代码

//初始化视图

复制代码
-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        //初始化一个开始索引
        _index = 1;
        
        //初始化一个英雄状态
        _state = Hero_Stand;
        
        //定时器
        _timer = [NSTimer scheduledTimerWithTimeInterval:0.3f target:self selector:@selector(updateIndex) userInfo:nil repeats:YES];
        
        self.backgroundColor = [UIColor whiteColor];
    }
    return self;
}
复制代码

//不使用时停止定时器

复制代码
-(void)dealloc
{
    //停止定时器
    if (_timer)
    {
        [_timer invalidate];
    }
}
复制代码

//定时器刷新方法

复制代码
-(void)updateIndex
{
    //更新图片额索引
    NSInteger maxIndex = 1;
    switch (_state)
    {
        case Hero_Stand:
            maxIndex = 3;
            break;
            
        case Hero_Run:
            maxIndex = 11;
            break;
            
        case Hero_Attack:
            maxIndex = 5;
            break;
            
        case Hero_AttackJ:
            maxIndex = 8;
            break;
            
        case Hero_AttackT:
            maxIndex = 3;
            break;
    }
    
    //如果没有到最后一张图片,就累加
    if (_index < maxIndex)
    {
        _index++;
    }
    //换成首张图片
    else
    {
        _index = 1;
    }
    
    //让视图重绘
    [self setNeedsDisplay];
}
复制代码

//重写drawRect方法,根据英雄状态和索引绘制相应的图片

复制代码
- (void)drawRect:(CGRect)rect
{
    //画不同状态下的英雄
    UIImage *image;
    switch (_state)
    {
        case Hero_Stand:
            image = [UIImage imageNamed:[NSString stringWithFormat:@"Hero%ld.png",_index]];
            break;
            
        case Hero_Run:
            image = [UIImage imageNamed:[NSString stringWithFormat:@"HeroRun%ld.png",_index]];
            break;
            
        case Hero_Attack:
            image = [UIImage imageNamed:[NSString stringWithFormat:@"HeroAttack%ld.png",_index]];
            break;
            
        case Hero_AttackJ:
            image = [UIImage imageNamed:[NSString stringWithFormat:@"HeroAttackJ%ld.png",_index]];
            break;
            
        case Hero_AttackT:
            image = [UIImage imageNamed:[NSString stringWithFormat:@"HeroAttackT%ld.png",_index]];
            break;
    }
    
    //一张张绘制不同状态的所有图片
    [image drawAtPoint:self.point];
}
复制代码

//触摸开始时的事件,每次点击就会切换英雄的状态

复制代码
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //切换状态
    if (_state < Hero_AttackT)
    {
        _state ++;
    }
    else
    {
        _state = Hero_Stand;
    }
    _index = 1;
}
复制代码

//触摸移动事件,可以手动移动英雄的位置

复制代码
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    
    //计算移动的位置
    UITouch *touch = [touches anyObject];
    CGPoint location = [touch locationInView:self];
    CGPoint preLocation = [touch previousLocationInView:self];
    CGFloat xOffset = location.x - preLocation.x;
    CGFloat yOffset = location.y - preLocation.y;
    _point = CGPointMake(_point.x+xOffset, _point.y+yOffset);
    
    //让视图重绘
    [self setNeedsDisplay];
}
复制代码

好了所有的代码都已写完,下面就是演示了,由于无法插入视频,就给出截图了。

站着时绘制的英雄动画:    

攻击时绘制的英雄动画:三种攻击方式

 

 

奔跑时绘制的英雄动画:

 

移动英雄的位置到中间:

 

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
分类: iOS高级

本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/4875411.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
iOS:quartz2D绘图(给图形绘制阴影)
quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影。 绘制阴影时,需要的一些参数:上下文、阴影偏移量、阴影模糊系数 注意:在drawRect:方法中同时调用绘制同一个图形时,在对绘制的图形做绘制阴影处理前,需要先对上下文进行保存,绘制阴影成功后,还要对上下文进行复位,还原为最原始的上下文。
1045 0
+关注
老先生二号
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
Facebook iOS App技术演化十年之路
立即下载
From Java_Android to Swift iOS
立即下载
深入剖析 iOS 性能优化
立即下载