< 前ページ次ページ >

プロパティベースのアニメーション

プロパティベースのアニメーションは、たとえば位置、背景色、境界矩形など、1つのレイヤの1つの属性値を補間するアニメーションです。

この章では、Core Animationがどのようにプロパティアニメーションを抽象化しているかと、レイヤプロパティの基本的かつ複数のキーフレームアニメーションをサポートするためにCore Animationが提供しているクラスについて説明します。

プロパティベースの抽象化

CAPropertyAnimationクラスは、レイヤの特定のプロパティをアニメーション化するための基本機能を提供するCAAnimationの抽象サブクラスです。プロパティベースのアニメーションは、以下を含め、数学的に補間できるすべての値の型に対してサポートされます。

整数およびdouble値
CGRect、CGPoint、CGSize、およびCGAffineTransform構造体
CATransform3Dデータ構造体
CGColorおよびCGImageリファレンス

あらゆるアニメーションと同様に、プロパティアニメーションはレイヤに関連付けられている必要があります。アニメーション化されるプロパティは、レイヤに関連付けられたキー値コーディングのキーパスを使用して指定します。たとえば、「layerA」のpositionプロパティのX成分をアニメーション化するには、キーパス「position.x」を使用してアニメーションを作成し、「layerA」にそのアニメーションを追加します。

CAPropertyAnimationのインスタンスは、直接インスタンス化する必要はありません。代わりに、そのサブクラス、CABasicAnimationまたはCAKeyframeAnimationのインスタンスを1つ作成します。さらに、機能の追加や追加プロパティの格納には、CAPropertyAnimationをサブクラス化するのではなく、CABasicAnimationまたはCAKeyframeAnimationをサブクラス化します。

基本アニメーション

CABasicAnimationクラスは、レイヤプロパティに対して基本的な単一キーフレームのアニメーションの機能を提供します。継承したanimationWithKeyPath:メソッドを使用して、アニメーション化するレイヤプロパティのキーパスを指定することによってCABasicAnimationのインスタンスを作成します。『Core Animationプログラミングガイド』の「アニメーション化可能プロパティ」で、CALayerのアニメーション化できるプロパティとフィルタプロパティを概説しています。

図 1に、レイヤのpositionプロパティに(74.0,74.0)から(566.0,406.0)の最終位置までを指定した3秒間のアニメーションを示します。親レイヤの矩形領域は(0.0,0.0,640.0,480.0)であるものとします。

図 1 レイヤのpositionプロパティの3秒間基本アニメーション

3 second basic animation of a layer’s position property

基本アニメーションの補間値の構成

CABasicAnimationクラスのfromValue、byValue、およびtoValueプロパティは、その間の補間される値を定義します。すべて省略可能で、nil以外の値になるのは2つまでです。プロパティが設定されるオブジェクトタイプは、アニメーション化するプロパティタイプと一致している必要があります。

補間値は、次のように使用されます。

fromValueとtoValueがnil以外の場合、fromValueとtoValueの間を補間します。
fromValueとbyValueがnil以外の場合、fromValueと(fromValue+byValue)の間を補間します。
byValueとtoValueがnil以外の場合、toValueと(byValue-toValue)の間を補間します。
fromValueがnil以外の場合、fromValueとプロパティの現在のプレゼンテーション値の間を補間します。
toValueがnil以外の場合、対象レイヤのプレゼンテーションレイヤのkeyPathの現在値とtoValueの間を補間します。
byValueがnil以外の場合、対象レイヤのプレゼンテーションレイヤのkeyPathの現在値と、その値とbyValueの合計値の間を補間します。
すべてのプロパティがnilの場合、対象レイヤのプレゼンテーションレイヤの、keyPathの以前の値と、対象レイヤのプレゼンテーションレイヤのkeyPathの現在の値の間を補間します。

基本アニメーションの例

リスト 1に、図 1で示したアニメーションと同じ明示的なアニメーションを実装するコードを示します。

リスト 1 CABasicAnimationコード

CABasicAnimation *theAnimation;

// positionプロパティをキーパスとして指定して、アニメーションオブジェクトを作成する

// キーパスは対象とするアニメーションオブジェクト（この場合はCALayer）を基準にする

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

// fromValueおよびtoValueを適切な点に設定する

theAnimation.fromValue=[NSValue valueWithPoint:NSMakePoint(74.0,74.0)];

theAnimation.toValue=[NSValue valueWithPoint:NSMakePoint(566.0,406.0)];

// 再生時間を3.0秒に設定する

theAnimation.duration=3.0;

// カスタムタイミング関数を設定する

theAnimation.timingFunction=[CAMediaTimingFunction functionWithControlPoints:0.25f :0.1f :0.25f :1.0f];

キーフレームアニメーション

Core AnimationのCAKeyframeAnimationクラスでサポートされるキーフレームアニメーションは、基本アニメーションに似ていますが、対象値の配列を指定することができます。これらの対象値は、アニメーションの実行中にそれぞれ順番に補間されます。

図 2に、キーフレーム値にCGPathRefを使ったレイヤのpositionプロパティの5秒間のアニメーションを示します。

図 2 レイヤのpositionプロパティの5秒間キーフレームアニメーション

5 second keyframe animation of a layer’s position property

キーフレーム値の指定

キーフレーム値は、Core Graphicsパス（pathプロパティ）、またはオブジェクトの配列（valuesプロパティ）のどちらかを使って指定します。

Core Graphicsパスは、レイヤのanchorPointまたはpositionプロパティ、つまりCGPointsのプロパティをアニメーション化するのに適しています。MoveTo点を除くパスの各点は、タイミングと補間のための単一のキーフレームセグメントを定義します。pathが指定されている場合、valuesプロパティは無視されます。

デフォルトでは、レイヤはCGPathに沿ってアニメーション化されるときに、設定された回転を維持します。rotationModeプロパティをkCAAnimationRotateAuto、またはkCAAnimationRotateAutoReverseに設定すると、レイヤはパスの接線と一致するように回転します。

オブジェクトの配列をvaluesプロパティに指定することで、任意のタイプのレイヤプロパティをアニメーション化できます。たとえば、

CGImageオブジェクトの配列を指定し、アニメーションのキーパスをレイヤのcontentプロパティに設定します。これにより、提供されたイメージ群を通じてレイヤのコンテンツをアニメーション化できます。
CGRectsの配列（オブジェクトとしてラップされる）を指定し、アニメーションのキーパスをレイヤのframeプロパティに設定します。これにより、渡されたイメージ群を通じてレイヤのフレームを反復させることができます。
CATransform3D行列の配列（同じく、オブジェクトとしてラップ）を指定、アニメーションのキーパスをtransformプロパティに設定します。

キーフレームのタイミングとペーシングの拡張

キーフレームアニメーションには、基本的なアニメーションよりも複雑なタイミングとペーシングのモデルが必要です。

継承したtimingFunctionプロパティは無視されます。代わりに、CAMediaTimingFunctionインスタンスの任意指定の配列をtimingFunctionsプロパティに渡すことができます。各タイミング関数は、キーフレームセグメントに対する1つのキーフレームのペーシングを記述します。

継承したdurationプロパティはCAKeyframeAnimationに対して有効ですが、keyTimesプロパティを使うことによってタイミングをより細かく調節できます。

keyTimesプロパティは、各キーフレームセグメントの再生時間を定義するNSNumberオブジェクトの配列を指定します。配列内の各値は0.0から1.0までの浮動小数点数であり、values配列内の1つの要素に対応します。keyTimes配列内の各要素は、対応するキーフレーム値の再生時間を、そのアニメーションの合計再生時間に対する割合として定義します。各要素の値は、直前の値よりも大きいか同じでなければなりません。

keyTimes配列の適切な値はcalculationModeプロパティに依存します。

calculationModeがkCAAnimationLinearに設定されている場合、配列の先頭の値は0.0で、最後の値は1.0となります。値は指定されたkeytimesの間で補間されます。
calculationModeがkCAAnimationDiscreteに設定されている場合、配列の最初の値は0.0でなければなりません。
calculationModeがkCAAnimationPacedに設定されるている場合、keyTimes配列は無視されます。

キーフレームアニメーションの例

リスト 2に、図 2で示したアニメーションと同じ明示的なアニメーションを実装するコードを示します。

リスト 2 CAKeyframeAnimationコード

// 2つの弧（バウンス）を実装するCGPathを作成する

CGMutablePathRef thePath = CGPathCreateMutable();

CGPathMoveToPoint(thePath,NULL,74.0,74.0);

CGPathAddCurveToPoint(thePath,NULL,74.0,500.0,

                                   320.0,500.0,

                                   320.0,74.0);

CGPathAddCurveToPoint(thePath,NULL,320.0,500.0,

                                   566.0,500.0,

                                   566.0,74.0);

CAKeyframeAnimation * theAnimation;

// positionプロパティをキーパスに指定して、アニメーションオブジェクトを作成する

// キーパスは対象とするアニメーションオブジェクト（この場合はCALayer）を基準にする

theAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

theAnimation.path=thePath;

// 再生時間を5.0秒に設定する

theAnimation.duration=5.0;

// カスタムタイミング関数を設定する

theAnimation.timingFunction=[CAMediaTimingFunction functionWithControlPoints:0.25f :0.1f :0.25f :1.0f];

// パスを解放する

CFRelease(thePath);