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の基本的な使い方だ。あとは、複数のアニメーションを組み合わせ、レイヤーを重ねることで、複雑なアニメーションを実現できる。