アニメーションを行う

次はアニメーションだ。Core Animationならば、何を言うにもアニメーションを行わなくては始まらないだろう。

だが、実際のところ、ここまで準備を整えてしまえば、アニメーションは極めて単純だ。レイヤーにプロパティを設定すると、それがそのまま即アニメーションになってしまうのである。

たとえば、画像を動かしてみよう。Controller.mに、doAnimation:メソッドを、次のように実装する。

- (IBAction)doAnimation:(id)sender
{
    // レイヤーを取得する
    CALayer*    layer;
    layer = [[[_view layer] sublayers] objectAtIndex:0];

    // frameプロパティを設定する
    layer.frame = CGRectMake(256, 160, 256, 160);
}

レイヤーを取得して、frameプロパティを設定している。これだけだ。これだけで、アニメーションする(以下参照)。

もう1つやってみよう。今度は、移動ともにフェードアウトするようにしてみる。

- (IBAction)doAnimation:(id)sender
{
    // レイヤーを取得する
    CALayer*    layer;
    layer = [[[_view layer] sublayers] objectAtIndex:0];

    // frameプロパティを設定する
    layer.frame = CGRectMake(256, 160, 256, 160);

    // opacityプロパティを設定する
    layer.opacity = 0;
}

opacityプロパティの設定を付け加えた。これで、フェードアウトになる。

なお、ここまでのプロジェクトはこちらからダウンロードできる。

明示的なアニメーションを行う

これで、Core Animationの説明は完了だ――とは、さすがにいかない。アニメーションについて、もっと詳しく説明しよう。

先ほど紹介したように、レイヤーにプロパティの値を設定すると、自動的にアニメーションが発生する。これは、CALayerが提供する機能で、暗黙的なアニメーションと呼ばれる。これとは別に、プログラマがアニメーションを細かく指定する、明示的なアニメーションも存在する。

ちょっとしたエフェクトをつけたいだけの場合は、暗黙的なアニメーションが便利だ。アニメーションを正確にコントロールしたり、複数のアニメーションを細かく連動させたりしたい場合は、明示的なアニメーションが必要になる。

明示的なアニメーションの作り方を紹介しよう。クラスCAAnimationを使う。CAAnimationにもたくさんのサブクラスがあるが、画像をアニメーションさせるときはCABasicAnimationが便利だ。このクラスは、レイヤーのプロパティを変更するアニメーションを行うことが出来る。

では、CABasicAnimationを使ってみよう。まず、インスタンスを作成する。これには、animationWithKeyPath:メソッドを使う。引数として、変更するプロパティの名前をキーとして指定するのだ。

// アニメーションを作成する
CABasicAnimation*   animation;
animation = [CABasicAnimation animationWithKeyPath:@"opacity"];

これでopacityプロパティ、つまり透明度を変更するアニメーションになる。

続いて、アニメーションのプロパティを設定する。CABasicAnimationで重要なプロパティは、fromValueとtoValueの2つだ。これは、値がどこからどこまで変化するか、を表すことになる。ここでは、先ほどと同じくフェードアウトさせてみよう。この場合、fromValueが1.0、toValueが0ということになる。これらのプロパティはid型、つまりObjective-Cのオブジェクトで設定する必要がある。ラッパークラスであるNSNumberを使おう。

CAAnimationの他のプロパティである、durationも設定しておこう。これは、アニメーションの持続時間を表す。1.0を設定すれば、1秒間のアニメーションになる訳だ。

// アニメーションのプロパティを設定する
animation.duration = 1.0f;
animation.fromValue = [NSNumber numberWithFloat:1.0f];
animation.toValue = [NSNumber numberWithFloat:0];

これでアニメーションの設定が出来た。これをレイヤーに設定しよう。addAnimation:forKey:メソッドを使う。キーを指定して設定することになる。このキーは、後でレイヤーからアニメーションを取り出すときに使う。

// レイヤーにアニメーションを追加する
[layer addAnimation:animation forKey:@"opacityAnimation"];

これで、完了だ。このaddAnimation:forKey:を呼ぶのが、アニメーションを開始するトリガーになる。つまりこれを呼ぶと、アニメーションが開始されるのだ。