ブロックチェーン・AI・システム開発の株式会社INDETAIL

iOSでアニメーションを行う方法”回転”

2014.04.14
なめ橋

こんにちは。
なめ橋です。

気温的に衣替えしてもいい時期なのですが、帰宅する時間になるとめっきり気温が下がるので、まだまだ厚着のコートで出勤しております。
ゴールデンウィークくらいには気温もそれなりに上がっている(と思う)ので掛布団の厚さを変えようかなと思ってます。

回転を行うアニメーションについて

回転
第三回目となる今回は回転を行うアニメーションです。
前回まではオブジェクトの位置を移動するのみというアニメーションでした。
なので、少し発展して回転を行うアニメーションを行っていきたいと思います。
今回の主なキーワードは、

  • CABasicAnimation
  • CATransform3D

この2つです。

前回同様、使用するプロジェクトファイルは、第一回で作成したものを引き続き使用します。
それでは詳しく見て行きましょう。

CABasicAnimationの使い方

CABasicAnimationクラスはCAAnimationクラスを継承したクラスです。
CAAnimationクラスはレイヤーにアニメーションを設定するためのクラスです。
ただし、通常アニメーションを実行するときはCABasicAnimationクラスを使用します。

このCABasicAnimationクラスで作成されたオブジェクトを対象となるレイヤーに適用することで様々なアニメーションが実現可能となります。
今回は少しだけ設定する内容が複雑なので、細かく見ていきます。
前回同様、アニメーションの作成は、ボタンのイベントハンドラであるanimationStartメソッド内で行います。

まずは、CABasicAnimationクラスの変数宣言を行います。(animationという変数名にします。)
この時使用するanimationWithKeyPathメソッドに指定するKeyは、レイヤーのプロパティ名を指定します。
Keyに指定したプロパティで発生するはずの暗黙的アニメーションを、作成したアニメーションオブジェクトで上書きする形となります。

次にアニメーションに関する設定を行います。

1行目と2行目で、それぞれアニメーションを行う時間、アニメーションの繰り返し回数を指定します。
上記コードでは、アニメーションの実行時間を0.5秒、繰り返し回数を1回としています。
3行目ではこの後に指定する、toValueプロパティまでアニメーションが行われた後、再び元の位置にアニメーションをして戻るかどうかを設定します。

CATransform3Dの使い方

それではいよいよ回転に関してです。
回転の設定を行うにはCATransform3Dを使用します。
このCATransform3Dクラスはレイヤーのtransformプロパティの設定値として使用できます。
※そのため、animation宣言時のKeyに"transform"を指定しました。
まずは、CATransform3Dの変数を宣言し、回転軸と角度を指定します。
その後、先ほど作成したanimationのtoValueプロパティに設定します。

ポイントとなるのは、回転角度を指定している「CATransform3DMakeRotation」部分です。
ここでの引数は以下の用になります。

  • 第一引数:回転する角度を指定
  • 第二引数:X軸での回転成分を指定
  • 第三引数:Y軸での回転成分を指定
  • 第四引数:Z軸での回転成分を指定

第一引数に指定している"M_PI"はiOSに標準で用意されている角度(ラジアン)定数を使用しています。
余談にはなりますが、定数には以下のような値が用意されています。

  • M_PI :円周率を表す定数(=π)
  • M_PI_2:円周率の1/2を表す定数(=π/2)
  • M_PI_4:円周率の1/4を表す定数(=π/4)

また、作成したCATransform3DオブジェクトをanimationのtoVlaueプロパティに適用するためにはvalueWithCATransform3Dメソッドを使用しています。
最後に作成したanimationを適用したいオブジェクトのレイヤー(rotationLabel.layer)に追加します。

最終的出来上がるコードと実際の動きは以下のようになります。

 

いかがでしたか?

個人的には、Keyにプロパティ名を指定するのが少々不思議でした。
ふと、「複数のアニメーション行いたいときにはなんというKeyを指定すればいいの?」という疑問が湧いたのですが、それらはまた、次回以降記事にしていきたいと思います。

なめ橋

2013年4月に入社。 最近ようやくiOSの開発に慣れてきた新人のエンジニアです。 髪が長くなるとなめこに似ているといわれます。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。