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绘图 (动画)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。