Core Animation

Mac OS Xは、メディア関係のフレームワークが充実している。2D系描画のQuartz、動画再生のQuickTimeは言うに及ばず、画像フィルタのCore Image、動画へのフィルタ適応のCore Video、音声再生のCore Audio、統合アニメーション作成環境のQuartz Composerなど、枚挙にいとまがない。Leopardでは、さらにメディアフレームワークが追加される。アニメーションのためのフレームワークCore Animationだ。

一口にアニメーションといってもその分野は広いが、Core Animationがターゲットとするのはアプリケーションのユーザインタフェースのアニメーションだ。ユーザがアプリケーションで操作するボタンなどをアニメーションさせて、よりドラマチックな体験を得ることを目的としている。その実例として、Time Machineや、FinderのCover Flow表示を挙げることが出来る。どのような効果が得られるのかは、一目瞭然だろう。

レイヤー

Core Animationでの基礎となるものは、レイヤーの概念だ。レイヤーは、画像やムービーなどを表示できるもので、これを積み重ねて最終的なユーザインタフェースを作る。アニメーションは、レイヤー毎に設定する。これにより、背景や前景のレイヤーを残したまま、目的のレイヤーを動かすことができる。ちょうど、セル画のアニメを作ることを想像してもらえばいいだろう。

レイヤーには、様々なプロパティがある。例えば、位置、大きさ、透明度、背景色などだ。レイヤーのアニメーションを行うということは、これらのプロパティの値を時間軸に沿って変更させることになる。例えば、パンを行うならばレイヤーの位置座標のx軸の値を増やせばいいし、フェードアウトならば透明度を減少させることになる。これが、Core Animationでのアニメーションの基本だ。

レイヤーに表示できるものは画像だけでなく、プログラムによる描画、QuickTimeムービー、さらにはQuartz Composerのコンポジションも可能である。さらに、アニメーションのエフェクトとして、Core Imageフィルタや、Core Videoを適用することもできる。このように、過去の技術の積み重ねの上に、新しい技術を構築するのが、Mac OS X以降のAppleの技術の潮流だろう。

実例

Core Animationは、実際にどのように使うか見てもらった方が理解が速いだろう。実例のソースコードを紹介する。このソースコードは、Objective-C 2.0を使うものとする。

まず、レイヤーを作成してみる。CALayerというクラスが、レイヤーを表す。

    // 画像をCGImageRefの形で取得する。
    CGImageRef imageRef;
    ...

    // CALayerを作成する
    CALayer* layer;
    layer = [CALayer layer];

    // 画像を設定する
    layer.contents = (id)imageRef;

    // ビューにレイヤーを設定する
    [view setLayer:layer];
    [view setWantsLayer:YES];

ここでは、画像をレイヤーに描くものとしよう。まず、画像を取得する。これは、CGImageRefの形で取得しておく必要がある。

次に、CALayerのインスタンスを作成する。これには、CALayerクラスのlayerメソッドを使えばいい。そして、レイヤーに画像を設定してやる。CALayerにはcontentsというプロパティがあるので、これに先ほどの画像を設定するのだ。

レイヤーは、それ自体には画面に描画する機構がない。そこで、NSViewにレイヤーを設定するのだ。NSViewにsetLayer:とsetWantsLayer:というメソッドが追加されたので、これらを使ってレイヤーを設定する。

これでレイヤーの準備は出来た。次は、アニメーションの設定だ。

    // アニメーションを設定する
    CABasicAnimation* animation;
    animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.duration = 1.0;
    animation.autoreverses = YES;
    animation.fromValue = [NSNumber numberWithFloat:1.0];
    animation.toValue = [NSNumber numberWithFloat:0.0];

    // アニメーションを開始する
    [layer addAnimation:animation forKey:@"animateOpacity"];

アニメーションの設定は、CAAnimationというクラスが基本となる。いくつかのサブクラスが用意されており、CABasicAnimationはその1つだ。基本的なアニメーションを行うクラスになる。

アニメーションは、まず何に対して行うか、を指定する。これは、先ほど作成したレイヤーのプロパティに対するキーパスの形で指定出来るのだ。ここでは例として、opacity、つまり透明度に対してアニメーションを行ってみよう。

さらに細かくアニメーションを指定していく。durationではアニメーションの持続時間、autoreversesでは繰り返しを行うかどうかを指定する。そして、重要なのがfromValueとtoValueだ。アニメーションを開始すると、キーパスとして指定されたプロパティ、ここではopacityが、fromValueからtoValueへと変化するのだ。ここで、fromValueに1.0f、toValueに0.0fが指定されているので、徐々に透明度が増して消えていく、フェードアウトを行うことになる。

最後に、CALayerのaddAnimation:forKey:を呼ぶことで、アニメーションがスタートする。

これが、Core Animationの基本的な使い方だ。あとは、複数のアニメーションを組み合わせ、レイヤーを重ねることで、複雑なアニメーションを実現できる。