Animation ーズームしながらキャラを動かす

CADisplayLinkを使って、キャラクターの移動に合わせて背景をズームする方法のメモ

（※Xcodeでプログラミングして、シミュレータ (iOS6)で確認。）

画像

ポイント

・CADisplayLink

・画面座標とモデル座標の変換

背景画像の座標をそのままモデル座標として、

タッチした部分に車がズームしながら移動するサンプル

#import “ViewController.h”

#import

@interface ViewController () {

CADisplayLink *timer;

CGRect car;

CGRect map;

CGPoint target;

float rate;

}

@property (nonatomic, strong) UIImageView *carView;

@property (nonatomic, strong) UIImageView *mapView;

@end

@implementation ViewController

@synthesize mapView, carView;

– (void)viewDidLoad

{

[super viewDidLoad];

}

– (void)viewDidAppear:(BOOL)animated

{

// 位置、大きさの初期化

map = CGRectMake(0, 0, 480, 300);

car = CGRectMake(50, 200, 50, 36);

target = CGPointMake(50, 200);

rate = 1.0;

// 道路の画像

mapView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@”map.png”]];

mapView.layer.borderColor = [[UIColor redColor] CGColor];

mapView.layer.borderWidth = 2.0;

// 車の画像

carView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@”car.png”]];

carView.center = CGPointMake(car.origin.x, car.origin.y);

// 道路 -> 車

[mapView addSubview:carView];

// parent.view -> 道路 -> 車

[self.view addSubview:mapView];

// init game timer

timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateDisplay:)];

[timer addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];

}

– (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{

UITouch *touch = [touches anyObject];

CGPoint point = [touch locationInView:mapView];

// convert

// touch point -> map point

float x = (point.x – map.origin.x) / rate;

float y = (point.y – map.origin.y) / rate;

target = CGPointMake(x, y);

}

– (void)updateDisplay:(CADisplayLink*)sender

{

float a = target.x – car.origin.x;

float b = target.y – car.origin.y;

float r = hypotf(a, b);

float dx = a * (1.0 / r);

float dy = b * (1.0 / r);

if (r > 1) {

car.origin.x = car.origin.x + dx;

car.origin.y = car.origin.y + dy;

// car point near station

if (car.origin.x > 300) {

if(rate < 1.5) {

rate += 0.01;

}

// zoom map

float width = map.size.width * rate;

float height = map.size.height * rate;

float x = – map.size.width * (rate – 1.0);

float y = – map.size.height * (rate – 1.0);

mapView.frame = CGRectMake(x, y, width, height);

// update car

// zoom and adjust position

carView.bounds = CGRectMake(0,0, car.size.width * rate, car.size.height * rate);

float carX = car.origin.x * rate;

float carY = car.origin.y * rate;

carView.center = CGPointMake(carX, carY);

} else {

if(rate > 1.0) {

rate -= 0.01;

}