make.appアプリ開発Tips

CALayerを使う機会があったので、まとめておきます。

CALayerとは？
CALayerは、画像を表示させるのに使うものです。
画像を表示させるだけならUIImageとUIImageViewだけでできるのですが、
CALayerはアニメーション向けに特化されているのでこれを使った方がいい場合もあります。
CALayerは画像の変形・移動や、大量に描画することが得意です。
また、パズルや3つ並べたら消える系のゲームなど、一枚の絵を何枚にも区切って使ったり、絵を入れ替えたりするのにもこれを使います。

以下のページの上の方にCALayerのメリットが分かりやすくまとまってます
CALayer を使って UIImage を描画する

使い方
まず普通に表示させるところまで

下準備
QuartzCore.frameworkをプロジェクトに追加
<QuartzCore/QuartzCore.h>をインポートする

以下の3つを.hで宣言

IBOutlet UIImageView *imageView;　//インターフェースビルダーで適当にUIImageViewとむすびつけておく
UIImage *image; //元画像読み込み用
CALayer *anim;  

以下を.mで宣言
1.設定(ViewDidLoadなどで)

//表示させたい画像をUIImageに読み込む
image = [UIImage imageNamed:@"image.png"];
//CALayerを初期化
anim = [CALayer layer];

2.設定2(ViewDidLoadなどで)

//元画像からCALayerを切り出す
//画像指定。UIImageでなく、UIImageの持っているCGImageRefを渡す。UIImage名.CGImageで取り出せる。(id)はエラー防止のためつける
anim.contents = (id)image.CGImage;
//レイヤーの大きさを指定　第一、第二引数は0でOK。第三引数、第四引数で横幅と高さの設定をする。
anim.bounds = CGRectMake(0,0,64,64);
//元画像から切り取ってレイヤーにするため、切りとる部分を指定。
//第一、第二匹数は切り取りを開始するところの比、第三、第四引数は切り取る横幅と高さの比。どれも0.0~1.0の比率で指定することに注意
anim.contentsRect = CGRectMake(0, 0, 1.0, 1.0);
//レイヤーを表示する位置を指定する。指定した座標に、レイヤーの左上でなく、中央がくるよう表示されることに注意。
anim.position = CGPointMake(100,100);
//レイヤーを表示する。
[imageView.layer addSublayer:anim];

以下のページを参考に作成しました。
iPhoneアプリ開発、その(220)　CALayerマニアックス

以上でCALayerを使って画像を表示するところは完了です。まだなんの効果もつけていないので、このあと自分のつけたいもの(アニメーションなど)をつけていきます。
画像を、一点を中心として、拡大、縮小する鼓動のようなアニメーションのやり方だけ紹介します

1.設定(ViewDidLoadなどで)
以下をアニメーションの設定に付け加えます

//アニメーションの中心点を設定　0.5,0.5なら中心を起点として膨張・縮小する。
anim.anchorPoint = CGPointMake(0.5,0.5);

2.アニメーションする
以下をア二メーションしたい場所にかきます

//座標でなく、形をアニメーションすることを示す　transformのかわりにpositionで移動系のアニメーション
CABasicAnimation* prompt = [CABasicAnimation animationWithKeyPath:@"transform"];
//アニメーションにかかる時間(秒)
prompt.duration = 0.3
//膨張させる割合　前からx,y,z軸　普通に使う場合はzは1.0としておき、 1.1,1.1,1.0のように使う
prompt.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1.0)];
//繰り返し回数　HUGE_VALFで永久に繰り返すこともできる
prompt.repeatCount = 1;
//アニメーションの設定　YESだと鼓動　NOだと1.0から1.1になるところのみ描画(1.1から1.0に縮むところは描画しない)
prompt.autoreverses = YES;
//アニメーションさせる　キーはよくわからないです
[anim.layer addAnimation:prompt forKey:@"blink"];    

以下のページを参考に作成しました。
iPhoneアプリ開発、その(221)　ミックミックしてやんよ

その他参考になりそうなサイト
CAAnimationでCALayerを動かす
レイヤーを使ったアニメーション