< 前ページ次ページ >

アニメーション

アニメーションは、今日のユーザインターフェイスの重要な要素です。Core Animationを使うと、アニメーションは完全に自動化されます。アニメーションループやタイマはありません。アプリケーション側では、フレームごとの描画や、アニメーションの現在の状況の追跡を行う必要がありません。アニメーションは別々のスレッドで自動的に実行され、アプリケーションとのそれ以上のやり取りは発生しません。

この章では、アニメーションクラスの概要、および暗黙的なアニメーションと明示的なアニメーションの両方を作成する方法を説明します。

アニメーションクラスおよびタイミング

Core Animationでは、アプリケーションで使用できる数々のアニメーションクラスが用意されています。

CABasicAnimationは、レイヤプロパティの値の間で単純補間を行います。
CAKeyframeAnimationは、キーフレームアニメーションをサポートします。アニメーション化するレイヤプロパティのキーパスと、アニメーションの各ステージの値を表す値の配列、およびキーフレームの時間とタイミング関数の配列を指定します。アニメーションが実行するたびに、指定された補間を使って各値が設定されます。
CATransitionは、レイヤのコンテンツ全体に作用するトランジションエフェクトを提供します。これは、アニメーション化の際にレイヤコンテンツのフェード、プッシュ、リビールを行います。独自のカスタムCore Imageフィルタを指定することによって、手持ちのトランジションエフェクトを拡張できます。
CAAnimationGroupを使うと、アニメーションオブジェクトの配列をグループ化して、同時に実行できます。

実行するアニメーションのタイプの指定のほかに、アニメーションの再生時間、ペース（補間された値を再生時間に対してどのように配分するか）、アニメーションを繰り返すかどうかとその回数、1回のサイクルが完了するたびに自動的に反転させるかどうか、アニメーションが完了したときの視覚的な状態も指定する必要があります。アニメーションクラスとCAMediaTimingプロトコルは、このすべての機能と、さらに多数の機能を提供しています。

CAAnimationとそのサブクラス、およびタイミングプロトコルは、Core AnimationとCocoa Animation Proxy機能の両方によって共有されます。これらのクラスについては、『Animation Types and Timing Programming Guide』で詳しく説明されています。

暗黙的なアニメーション

Core Animationの暗黙的なアニメーションモデルは、アニメーション可能なレイヤプロパティへの変更はすべて、段階的で非同期に行う必要があるものと想定しています。動的にアニメーション化される画面は、明示的にアニメーション化されたレイヤがなくても可能です。アニメーション化可能なレイヤプロパティの値を変更すると、レイヤは暗黙的に古い値から新しい値への変更をアニメーション化できます。アニメーションの実行中に新しいターゲット値を設定すると、アニメーションは現在の状態から新しいターゲット値へ移行します。

リスト 1に、現在の位置から新しい位置へレイヤをアニメーション化する暗黙的なアニメーション化のトリガがいかにシンプルかを示しています。

リスト 1 レイヤの位置プロパティの暗黙的なアニメーション化

// レイヤの現在の位置は(100.0,100.0)にあるものとする

theLayer.position=CGPointMake(500.0,500.0);

一度に、あるいは何度も、単一のレイヤプロパティを暗黙的にアニメーション化できます。また、複数のレイヤを同時に明示的にアニメーション化することもできます。リスト 2に示すコードでは、4つの明示的なアニメーションが同時に実行されます。

リスト 2 複数のレイヤの複数のプロパティの暗黙的なアニメーション化

// レイヤ内で離れる方向に移動している間は、theLayerの不透明度を

// 0にアニメーション化する

theLayer.opacity=0.0;

theLayer.zPosition=-100;

// レイヤ内で近づく方向に移動している間は、theLayerの不透明度を

// 1にアニメーション化する

anotherLayer.opacity=1.0;

anotherLayer.zPosition=100.0;

暗黙的なアニメーションは、暗黙的または明示的なトランザクションにおいてオーバーライドされていない限り、そのプロパティのデフォルトのアニメーションに指定されている再生時間を使います。詳細については、暗黙的なアニメーションの再生時間のオーバーライドを参照してください。

明示的なアニメーション

Core Animationは明示的なアニメーションモデルもサポートしています。明示的なアニメーションモデルの場合は、アニメーションオブジェクトの作成と、開始と終了値の設定が必要です。明示的なアニメーションは、アニメーションをレイヤに適用するまで開始されません。リスト 3に示すコードは、レイヤの不透明度を完全に不透過な状態から完全に透明な状態に移行し、3秒間の再生で元に戻る、明示的なアニメーションを作成します。アニメーションは、レイヤに追加されるまでは開始しません。

リスト 3 明示的なアニメーション

CABasicAnimation *theAnimation;

theAnimation=[CABasicAnimation animationWithKeyPath:@"opacity"];

theAnimation.duration=3.0;

theAnimation.repeatCount=2;

theAnimation.autoreverses=YES;

theAnimation.fromValue=[NSNumber numberWithFloat:1.0];

theAnimation.toValue=[NSNumber numberWithFloat:0.0];

[theLayer addAnimation:theAnimation forKey:@"animateOpacity"];

明示的なアニメーションは、連続的に実行するアニメーションを作成する場合に特に役立ちます。Listing 4に、CoreImageブルームフィルタをレイヤに適用し、その輝度をアニメーション化する明示的なアニメーションを作成する方法を示します。これにより「選択レイヤ」を振動させ、ユーザの注目を引くことができます。

リスト 4 連続的に実行する明示的なアニメーションの例

// この選択レイヤは連続的に振動する。

// レイヤにブルームフィルタを設定することでこれを達成する。

// フィルタを作成し、デフォルト値を設定する

CIFilter *filter = [CIFilter filterWithName:@"CIBloom"];

[filter setDefaults];

[filter setValue:[NSNumber numberWithFloat:5.0] forKey:@"inputRadius"];

// keypathを使ってフィルタのinputIntensity属性をアニメーション化できるように

// フィルタに名前を付ける

[filter setName:@"pulseFilter"];

// フィルタを選択レイヤのフィルタに設定する

[selectionLayer setFilters:[NSArray arrayWithObject:filter]];

// 振動を処理するアニメーションを作成する。

CABasicAnimation* pulseAnimation = [CABasicAnimation animation];

// アニメーション化する属性は

// pulseFilterのinputIntensity

pulseAnimation.keyPath = @"filters.pulseFilter.inputIntensity";

// これを値0から1までアニメーション化する

pulseAnimation.fromValue = [NSNumber numberWithFloat: 0.0];

pulseAnimation.toValue = [NSNumber numberWithFloat:1.5];

// 1回の再生時間は1秒間で、実行回数は

// 無制限

pulseAnimation.duration = 1.0;

pulseAnimation.repeatCount = 1e100f;

// フェードオンとフェードオフを実行したいため、

// 自動的にオートリバースする必要がある。これにより輝度の入力は

// 0、1、0の順番になる

pulseAnimation.autoreverses = YES;

// イージーイン、イージーアウトのタイミング曲線を使用..

pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

// 選択レイヤにアニメーションを追加する。これにより

// アニメーションが開始する。アニメーションキー名として

// animationPulseを使用する

[selectionLayer addAnimation:pulseAnimation forKey:@"pulseAnimation"];

明示的な開始と停止

明示的なアニメーションを開始するには、addAnimation:forKey:メッセージをターゲットレイヤに送り、パラメータとしてアニメーションと識別子を渡します。明示的なアニメーションは、一度ターゲットレイヤに追加されると、アニメーションが完了するかレイヤから削除されるまで実行します。アニメーションをレイヤに追加するために使われた識別子は、removeAnimationForKey:を呼び出してアニメーションを停止するときにも使われます。レイヤにremoveAllAnimationsメッセージを送ることによって、レイヤのすべてのアニメーションを停止できます。