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];

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

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

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

// アニメーションを止める
[hoge.layer removeAllAnimations];