フェンリル

Developer's Blog

Core Animation で画像を回す

データのダウンロード中など待ち状態のときに、画像をくるくる回して読み込み中だということを表したいことってありますよね。アニメーション GIF や複数の画像の切り替えでも表現できますが、今回は1枚の画像を Core Animation の transform プロパティを使って回す方法を紹介したいと思います。

まず、アニメーションには CABasicAnimation を使います。作成するときに、animationWithKeyPath に transform をセットします。

つぎに、回転のはじめと終わりの角度を設定します。時計回りの場合は fromValue を 0、toValue を 2π にします。反時計回りと場合は fromValue と toValue の値を入れ替えてください。

そして、valueFunction で回転軸を決めます。今回は z 軸で回転させたいので、kCAValueFunctionRotateZ を使います。ちなみに、kCAValueFunctionRotateX や kCAValueFunctionRotateY にすると、x 軸や y 軸で回転できます。

あとは、duration で1回転あたりの時間を設定したり、repeatCount で回数を指定すれば思いどおりの回転アニメーションを実現できます。回転を途中でやめたいときは、removeAllAnimations メソッドを使います。

// アニメーションの初期化 アニメーションのキーパスを"transform"にする
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];

// 回転の開始と終わりの角度を設定 単位はラジアン
anim.fromValue = [NSNumber numberWithDouble:0];
anim.toValue = [NSNumber numberWithDouble:2 * M_PI];

// 回転軸の設定
anim.valueFunction = [CAValueFunction functionWithName:kCAValueFunctionRotateZ];

//1回転あたりのアニメーション時間 単位は秒
anim.duration = 2;

// アニメーションのリピート回数
anim.repeatCount = HUGE_VALF;

// アニメーションをレイヤーにセット
[hoge.layer addAnimation:anim forKey:nil];
// アニメーションを止める
[hoge.layer removeAllAnimations];

Facebook コメント

コメント

秒針を回転させる:iPhoneアプリでアナログ時計を作る | pc-memo2012年06月21日 4:27

[...] ググりながらやってみたものの、CALayerで秒針をどうアニメーションさせれば良いのか分かりません。。。なんとか辿り着いたコチラのページを参考に、以下のコードで試したのが、、、 [...]

秒針を回転させる:iPhoneアプリでアナログ時計を作る | pc-memo2012年08月21日 23:47

[...] で秒針をどうアニメーションさせれば良いのか分かりません。。。なんとか辿り着いたコチラのページを参考に、以下のコードで試したのが、、、 - (void)viewWillAppear:(BOOL)animated// { self.v [...]

秒針を回転させる:iPhoneアプリでアナログ時計を作る | pc-memo2014年09月12日 1:25

[…] 針をどうアニメーションさせれば良いのか分かりません。。。なんとか辿り着いたコチラのページ(「フェンリル|デベロッパーズブログ」)を参考に、以下のコードで試したのが、、、 […]

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。