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

iOSでアニメーションを行う方法"Core Animation編"

2014.04.08
なめ橋

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

札幌ではようやく雪が溶けてきました。
今年は去年より雪解けが早いような気がします。

Core CATransactionを使ったアニメーションの方法

前回に引き続き、第二回目もiOSのアニメーションに関してです。
今回はCore Animation、中でもCATransactionを使ってアニメーションを実現したいと思います。
プロジェクトファイルは前回使用したものを引き続き使用致します。

CALayerについて

Core Animationを使うにはCALayerを用います。
CALayerについては私自身まだよく理解していない為、今のところはViewの元になっているものと考えてください。
CALayerに関しては、しっかり勉強してから記事にしようと思います。

まずは、AnimationViewController.mファイルにCALayerクラスの変数を宣言いたします。

その後、viewDidLoadメソッドにてLayreの描画を行います。
今回は、100×100ピクセルの青色のLayerを作成し自身のLayerに追加しています。

ここで注意していただきたいポイントが2点あります。
1点目はanchorPointプロパティについてです。
anchorPointプロパティとは、アニメーションの中心点を設定するプロパティとなります。
回転するアニメーションであれば、回転軸の設定となります。
anchorPointは下図のような設定となっており、デフォルトではLayerの中心である「0.5,0.5」が設定されています

duch6

今回のように、移動するアニメーションの場合、anchorPointに設定したポイントが指定したpositionに移動する形となります。
anchorPointに設定する値を試しに変えてみた結果が以下となります。

anchorPoint(0.0,0.0)

anchorPoint(0.0,0.0)
anchorPoint(1.0,1.0)

anchorPoint(1.0,1.0)

2点目に、Layerを追加するときに使用するメソッドです。
自身のViewに新たなViewを追加する際は、addSubViewメソッドを使用します。
同じように、Layerの場合はaddSubLayerメソッドを使用します。
使用方法はaddSubViewと同じで、ここでは自身のLayerに作成したLayerを追加します。

ひとまず、これで実行すると画面には青い正方形が表示されたかと思います。

暗黙的アニメーション

それでは、アニメーションの作成に移っていこうと思います。
前回同様ボタンのイベントハンドラー(animationStartメソッド)にアニメーションを実装していきます。
まずは「暗黙的アニメーション」と呼ばれる方法です。
CALayerはアニメーションに対応するプロパティの値を変更すると自動的にアニメーション付きで変更を行うことが可能です。
上記のCALayerの特性を活かしたアニメーションの方法を「暗黙的アニメーション」といいます。
animationStartメソッドに以下を記述してください。

実行してみると正方形の位置がアニメーション付きで変更されたかと思います。
この方法は確かに簡単で便利です。しかし、時間や速度などを任意に変更出来ないという欠点があります。
それらを変更するためには明示的にアニメーションの設定を行う必要があります。

CATransactionを使った明示的アニメーション

Core Animationを使ってアニメーションを行う方法はすべて明示的アニメーションに分類されます。
今回はCore Animationを継承したCATransactionクラスを用いてのアニメーションを行います。
CATransactionクラスはクラスメソッドだけで構成されたクラスです。
CATransactionを用いてアニメーションを行うにはbeginメソッドとcommitメソッドを使用します。
このメソッドで挟まれた部分に記述されたコードがアニメーションとして実行されます。
以下がCATransactionを使ったアニメーションの方法になります。
animationStartメソッドに記述してみてください。
※アニメーション自体は暗黙的アニメーションで行った方法と変わりません。

これで5秒間かけてアニメーションを行うことが出来ます。
このようにアニメーションに対しての細かな設定を行えるのが明示的アニメーションの強みです。
また、アニメーションの速度を変更したいときはsetValue: forKey:メソッドを使用します。
このメソッドを使用した場合、第一引数にアニメーションを行う時間。第二引数に速度を指定するCAMediaTimingFunction型のキー。これらを指定します。
また、時間と速度を同時に定義できるのでコードの可読性が向上します。

以上でCore Animation(CATransaction)を使ってのアニメーション方法を終わります。
今の段階では、「UIKitを使ったアニメーションとたいして変化無いじゃん」と思われるかもしれません。
ですが、Core Animationを使ったアニメーションは、もっと複雑なアニメーションの実現が可能です。
より複雑なアニメーションに関しては次回以降記事にしていこうと思います。
ありがとうございました。

なめ橋

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

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