前回、最初のオリジナルなiPhoneアプリとして、アナログ時計を作ろうと決めました。そして、背景画像と秒針の画像をレイヤーで分けて設置するところまで作りました。今回は、
秒針を動かすことにチャレンジです。
ActionScriptなら、Dateオブジェクトで時刻を取得して、それをラジアンで角度へ計算して、秒針のムービークリップを回転させるという感じですぐに作れます。
しかし、ググりながらやってみたものの、CALayerで秒針をどうアニメーションさせれば良いのか分かりません。。。
なんとか辿り着いたコチラのページ(「フェンリル|デベロッパーズブログ」)を参考に、以下のコードで試したのが、、、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
- (void)viewWillAppear:(BOOL)animated// { self.view.layer.contents =(id)[UIImage imageNamed:@"oboeyo_clock_back.png"].CGImage; CALayer *baseLayer =[self.view layer]; CALayer *layer_clock_plate =[CALayer layer]; layer_clock_plate.bounds =CGRectMake(0, 0, 303, 303); layer_clock_plate.position =CGPointMake(160, 180); layer_clock_plate.contents =(id)[UIImage imageNamed:@"oboeyo_clock_plate.png"].CGImage; [baseLayer addSublayer:layer_clock_plate]; CALayer *sec_hand =[CALayer layer]; sec_hand.bounds =CGRectMake(0, 0, 10, 150); sec_hand.anchorPoint =CGPointMake(0.5, 0.87); sec_hand.position =CGPointMake(160, 180); sec_hand.contents =(id)[UIImage imageNamed:@"sec_hand.png"].CGImage; [baseLayer addSublayer:sec_hand]; CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"]; // 回転の開始と終わりの角度を設定 単位はラジアン anim.fromValue = [NSNumber numberWithDouble:0]; anim.toValue = [NSNumber numberWithDouble:360 * M_PI/180]; // 回転軸の設定 anim.valueFunction = [CAValueFunction functionWithName:kCAValueFunctionRotateZ]; //1回転あたりのアニメーション時間 単位は秒 anim.duration = 60; // アニメーションのリピート回数 anim.repeatCount = HUGE_VALF; // アニメーションをレイヤーにセット [sec_hand addAnimation:anim forKey:nil]; // [super viewWillAppear:animated]; } |
こちらの感じ。でも、これだと秒針は1分で1週するものの、時刻を正確に反映しているとは言い難い。。。
あと、イロイロと機能を増やした時に応用が利きません。
NSDateっていうクラスで日時を取得できるようなので、今度はそちらを試してみます。
★★★自作iPhoneアプリをAppStoreでリリースするまでの道のり★★★