CABasicAnimationの基本的な使い方（移動・回転・拡大・縮小）

CABasicAnimationクラスを使用することで基本的なキーフレームアニメーションを行うことができます．
キーフレームアニメーションとはレイヤーの属性をキーパスとして登録し，アニメーションの開始と終了を指定することで自動的に中間のアニメーションを計算させて作るアニメーションです．

CABasicAnimationの基本的な使用手順

1．QuartzCore.frameworkの追加

「QuartzCore.framework」が入っていない場合はプロジェクトに追加します．また，CABasicAnimationを使用するクラスで「QuartzCore/QuartzCore.h」をインポートします．

1	#import <QuartzCore/QuartzCore.h>

2．CABasicAnimationのインスタンス化とキーパスの登録

「animationWithKeyPath:」メソッドを使用し，CABasicAnimationをインスタンス化します．その際にアニメーションに使用するレイヤーの属性をキーパスとして指定します．（キーパスは「keyPath」プロパティを使用することで後から指定することもできます）

1 2 3

// positionプロパティを指定 CABasicAnimation *animation =     [CABasicAnimation animationWithKeyPath:@"position"];

3．アニメーションの設定

アニメーションのオプションを設定します．指定できるプロパティには以下のようなものがあります．

プロパティ	説明
duration	アニメーションの速度を指定
repeatCount	繰り返し回数を指定．永久に繰り返すにはHUGE_VALFを指定します．
beginTime	アニメーションの開始時刻を指定．開始を指定秒数遅らせるには 「CACurrentMediaTime() + 秒数」の形式で指定します．
timingFunction	アニメーション速度の変化を指定
autoreverses	アニメーション終了時に逆アニメーションを実行するかを指定

例えば以下のように記述します．

1 2 3 4 5 6 7 8

animation.duration = 2.5; // アニメーション速度 animation.repeatCount = 1; // 繰り返さない animation.beginTime = CACurrentMediaTime() + 2; // 2秒後に実行 animation.autoreverses = YES; // 逆アニメーションを実行する   // アニメーションは加速して始まり減速して終わる animation.timingFunction =     [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

4．アニメーションの開始と終了の指定

アニメーションの開始時の値と終了時の値を指定します．指定する値はキーパスに指定した属性によって変わります．

プロパティ	説明
fromValue	開始時の値
toValue	終了時の値（絶対的な値）
byValue	終了時の値（相対的な値）

例えば以下のように記述します．

1 2 3 4 5 6 7 8 9

// positionプロパティを指定（移動） CABasicAnimation *animation =     [CABasicAnimation animationWithKeyPath:@"position"];   ・・・   // アニメーションの始点と終点をセット animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; // 始点 animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 終点

5．アニメーションの追加

作成したアニメーションをレイヤーに追加します．その際に任意のアニメーションのキーパス名を指定します．

1	[myView.layer addAnimation:animation forKey:@"move-layer"];

その他．アニメーション終了時に開始前の状態に戻ってしまう現象の解決

CABasicAnimationを使用してアニメーションを実行すると，アニメーション終了時に元の状態に戻ってしまいます．これを解決するには「removedOnCompletion」プロパティと「fillMode」プロパティを設定します．

1 2 3

// アニメーション終了時に状態を元に戻さないようにする animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards;

CABasicAnimationの使用例

実際にCABasicAnimationを使用していろいろなアニメーションを行う例を示します．

移動アニメーション

移動アニメーションを作成するには以下のように記述します．

1 2 3 4 5 6 7 8 9 10 11 12 13

/* 移動 */ CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];   // アニメーションのオプションを設定 animation.duration = 2.5; // アニメーション速度 animation.repeatCount = 1; // 繰り返し回数   // 始点と終点を設定 animation.fromValue = [NSValue valueWithCGPoint:myView.layer.position]; // 始点 animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 終点   // アニメーションを追加 [myView.layer addAnimation:animation forKey:@"move-layer"];

回転アニメーション

回転アニメーションを作成するには以下のように記述します．

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/* 回転 */   // y軸に対して回転．（z軸を指定するとUIViewのアニメーションのように回転） CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];   // アニメーションのオプションを設定 animation.duration = 2.5; // アニメーション速度 animation.repeatCount = 1; // 繰り返し回数   // 回転角度を設定 animation.fromValue = [NSNumber numberWithFloat:0.0]; // 開始時の角度 animation.toValue = [NSNumber numberWithFloat:2 * M_PI]; // 終了時の角度   // アニメーションを追加 [myView.layer addAnimation:animation forKey:@"rotate-layer"];

拡大・縮小アニメーション

拡大・縮小アニメーションを作成するには以下のように記述します．

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* 拡大・縮小 */   // 拡大縮小を設定 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];   // アニメーションのオプションを設定 animation.duration = 2.5; // アニメーション速度 animation.repeatCount = 1; // 繰り返し回数 animation.autoreverses = YES; // アニメーション終了時に逆アニメーション   // 拡大・縮小倍率を設定 animation.fromValue = [NSNumber numberWithFloat:1.0]; // 開始時の倍率 animation.toValue = [NSNumber numberWithFloat:2.0]; // 終了時の倍率   // アニメーションを追加 [myView.layer addAnimation:animation forKey:@"scale-layer"];

複数のアニメーションの組み合わせ

「CAAnimationGroup」クラスを使用することで複数のアニメーションを組み合わせることができます．具体的には以下のように記述します．

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/* アニメーション1（x軸方向への移動） */ CABasicAnimation *animation1 =     [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];   // 終点を設定 animation1.toValue = [NSNumber numberWithFloat:80];; // 終点     /* アニメーション2（z軸を中心として回転） */ CABasicAnimation *animation2 =     [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];   // 回転角度を設定 animation2.fromValue = [NSNumber numberWithFloat:0.0]; // 開始時の角度 animation2.toValue = [NSNumber numberWithFloat:4 * M_PI]; // 終了時の角度     /* グループ */ CAAnimationGroup *group = [CAAnimationGroup animation];   // アニメーションのオプションを設定 group.duration = 3.0; group.repeatCount = 1;   // アニメーションを追加 group.animations = [NSArray arrayWithObjects:animation1, animation2, nil]; [myView.layer addAnimation:group forKey:@"move-rotate-layer"];

アニメーション開始時と終了時のイベントを取得

アニメーションが開始した時および終了した時のイベントを取得することができます．具体的には以下のように記述します．

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

/* 移動 */ CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"]; animation.delegate = self; // デリゲートを指定   // アニメーションのオプションを設定 animation.duration = 2.5; // アニメーション速度 animation.repeatCount = 1; // 繰り返し回数   // 終点を設定 animation.toValue = [NSNumber numberWithFloat:100];; // 終点   // アニメーションを追加 [myView.layer addAnimation:animation forKey:@"move-layer"];   ・・・   /**  * アニメーション開始時  */ - (void)animationDidStart:(CAAnimation *)theAnimation {     NSLog(@"開始"); }   /**  * アニメーション終了時  */ - (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {     NSLog(@"終了"); }

CABasicAnimationを使用する際の注意点

例えばCABasicAnimationを用いたアニメーション中に，ホームボタンを押してアプリを終了し再度再開した場合など，アプリの切り替わりや画面の切り替わりが行われるとアニメーションがクリアされます．

Objective-Cサンプルプログラム

CABasicAnimationを使用してキーフレームアニメーションを表示するサンプルプログラムを以下に示します．

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

- (void)viewDidLoad {     [super viewDidLoad];       // 画像を表示する     UIImage *image = [UIImage imageNamed:@"image01.png"];     UIImageView *imageView = [[UIImageView alloc]initWithImage:image];     imageView.center = CGPointMake(160, 240);     [self.view addSubview:imageView];         /* 移動 */     CABasicAnimation *animation1 =         [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];       // 始点と終点を設定     animation1.toValue = [NSNumber numberWithFloat:100];; // 終点         /* 回転 */     CABasicAnimation *animation2 =         [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];       // x軸を中心に3回転させる     animation2.toValue = [NSNumber numberWithFloat:6 * M_PI]; // 終了時の角度         /* グループ */     CAAnimationGroup *group = [CAAnimationGroup animation];     group.delegate = self;     group.duration = 5.0;     group.repeatCount = 1;       // アニメーション終了時に元に戻さないようにする     group.removedOnCompletion = NO;     group.fillMode = kCAFillModeForwards;       // アニメーションを追加     group.animations = [NSArray arrayWithObjects:animation1, animation2, nil];     [imageView.layer addAnimation:group forKey:@"move-rotate-layer"]; }     /**  * アニメーション開始時  */ - (void)animationDidStart:(CAAnimation *)theAnimation {     NSLog(@"開始"); }   /**  * アニメーション終了時  */ - (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {     NSLog(@"終了"); }

サンプルプログラム実行結果

Objective-Cサンプルプログラムの実行結果は以下のようになります．

開始
終了