Core Animationの基礎的なところ

Core Animationを色々と弄っていたのでその個人的なメモ。

Core Animationとは

Core Animationはアニメーション処理をサポートするフレームワークです。もう少し細かい説明をApple Developerの資料から抜粋します。

CoreAnimationは、グラフィック描画、投影、アニメーション化のためのObjective-Cクラスのコレクションです。Core Animationは、Application KitとCocoa Touchのビューアーキテクチャを使用するデベロッパにとっては親しみのある階層レイヤの抽象化を維持しながら、高度な合成効果を用いた流体アニメーションを可能にします。

引用 : Core Animationプログラミング言語 - Apple Developer

基本的なCore AnimationはQuartzCoreフレームワークに含まれる

基本的なCore AnimationクラスはQuartzCoreフレームワークに含まれており、以下の画像でそれを確認できます。


引用 : Core Animationプログラミング言語 - Apple Developer

「基本的な」と書いているのは、QuartzCoreフレームワークに含まれていない例外もあり、その他はQuartz ComposerフレームワークとQTKitフレームワークがおそらくそれです。

もちろん各フレームワークの中のクラスを扱う際はヘッダーファイルまたは実装ファイルにそのフレームワークをインポートする必要があります。

Core Animationの概要

Core Animationはレイヤーを動かすものと覚えていいと思います。そのアニメーション処理の対象となるのはQuartzCoreフレームワークのCALayerクラスです。

CALayerの話なのですが、調べるとよくCALayerとUIViewが比較されています。それらを少しまとめてみます。

UIViewはCALayerをひとつだけ持っています。UIViewをアニメーションさせる場合は、その持っているCALayerクラスの「layer」というプロパティに対してアニメーションをさせる形になります。逆にCALayerは自分自身にいくつもCALayerを持つことができます。よく言われている「コンテナ」と「入れ子」の関係ですね。
また、UIViewはタッチイベントを受け取ることができますが、CALayerはタッチイベントを受け取ることができないようです。

上の記述と参考記事から簡単にまとめます。

UIView

• CALayerを一つだけ持っている
• UIViewをいくつも持てる（コンテナ。UIViewをいくつも自分自身に吊るせる）
• タッチイベントを受け取ることができる

CALayer

• CALayerはUIViewのプロパティに入っている
• CALayerをいくつも持てる（コンテナ。CALayerをいくつも自分自身に吊るせる）
• タッチイベントを受け取ることができない
• 描画処理だけを行うため、描画がUIViewに比べて速い

と、こんな感じです。

基本的にはどちらでもアニメーション自体は可能です。ですが複雑なアニメーションをする場合などは、CALayerを上手く入れ子して使った方が処理も早くなるということになります。

またCALayerには、プロパティ値を設定するだけでアニメーションが発生する「暗黙的アニメーション」と開発者がアニメーションを細かく指定する「明示的アニメーション」があります。ちょっとしたアニメーションなら暗黙的アニメーションでいいかと思います。

なんとなくのアニメーション

とりあえず動くアニメーションをUIViewとCALayerの2パターン。

/*UIViewをアニメーション*/
UIView *uiView = [[UIView alloc]init];
uiView.frame = CGRectMake(0, 0, 100, 100);
uiView.backgroundColor = [UIColor redColor];
[self.view addSubview:uiView];

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    
CGPoint finishPoint = CGPointMake(250, 250);
uiView.layer.position = finishPoint;  //終了位置をあらかじめセット

animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];  //開始地点
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(250, 250)];  //終着地点
animation.duration = 1.5;
animation.repeatCount = 1;
    
[uiView.layer addAnimation:animation forKey:@"move"];


/*CALayerをアニメーション*/
CALayer *caLayer = [CALayer layer];
caLayer.frame = CGRectMake(0, 0, 100, 100);
caLayer.backgroundColor = [UIColor blueColor].CGColor;
[self.view.layer addSublayer:caLayer];
    
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"position"];
    
CGPoint finishPoint2 = CGPointMake(100, 100);
caLayer.position = finishPoint2;  //終了位置をあらかじめセット
    
animation2.fromValue = [NSValue valueWithCGPoint:CGPointMake(250, 300)];  //開始地点
animation2.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];  //終着地点
animation2.duration = 1.5;
animation2.repeatCount = 1;
    
[caLayer addAnimation:animation2 forKey:@"move"];

デモ

おわり

Core Animationの基本的な部分はこれで終わりです。間違いなどありましたらコメントしていただけると幸いです。

参考記事

Core Animationプログラミング言語 - Apple Developer
[iOS] グラフィックス関係のおおざっぱな説明 Quarz 2D, Core Graphics, Core Animation - きんくまデザイン
Leopardのアニメーションを簡単実装! Core Animationを使いこなす (4) アニメーションの使用法 - 開発・SE | マイナビニュース
第3回 ゲームの実装を行う - Think IT