UIViewの回転、拡大、縮小
iPhoneアプリといえばアニメーションが綺麗です。
どこぞのアンドロイドと違って変にカクカクしないですし、滑らかです。
そしてアニメーションといえば移動、回転、拡大、縮小の組み合わせが多いでしょう。
そんなわけで今回は
UIViewをCGAffineTransformとか言うよく分からない奴で移動、回転、拡大、縮小をする方法の基本を学びましょう。
とりあえず対象のViewを用意します。
ほおおおおお…
そいやっ
– (void)viewDidLoad {
[super viewDidLoad];
UIView *view = [UIView new];
view.frame = CGRectMake(0, 0, 200, 200);
view.backgroundColor = [UIColor blueColor];
view.center = CGPoinMake(self.view.frame.size.width/2, self.view.frame.size.height/2);
[self.view addSubview:view];
UIImageView *imageView = [UIImageView new];
imageView.image = [UIImage imageNamed:@”apple”];
[view addSubview:imageView];
…
}
いい感じですね。
そして相変わらずこのブログのコードのカラーリングはとっても見やすいです。
1.移動
右に40px、上に50px移動させます。
view.transform = CGAffineTransformMakeTranslation(40, -50);
2.回転
30°右に回転させます。
view.transform = CGAffineTransformMakeRotation(M_PI * 30.0 / 180.0);
こんなDefineを用意すればスッキリします。
#define RADIAN(x) (M_PI * (x) / 180.0)
…
view.transform = CGAffineTransformMakeRotation(RADIAN(30));
3.拡大と縮小
拡大と縮小です。比率を大きくすれば拡大、小さくすれば縮小出来ます。
view.transform = CGAffineTransformMakeScale(1.5, 1.5);
第1引数がx方向の拡大率、
第2引数がy方向の拡大率なので、別の値を入れれば歪ませることも出来ます。
view.transform = CGAffineTransformMakeScale(0.5, 1.2);
4.初期化
真っさらな状態に戻します。つまりデフォルト値です。
view.transform = CGAffineTransformIdentity;
5.組み合わせる
「拡大して回転」みたいにアフィン変換を組み合わせます。
5.1.対象となるCGAffineTransformを指定するパターン
アフィン変換をかける対象となるCGAffineTransformを指定するパターンです。
こんな感じ。
view.transform = CGAffineTransformMakeScale(1.2, 1.2);
view.transform = CGAffineTransformRotate(view.transform, RADIAN(50));
view.transform = CGAffineTransformTranslate(view.transform, -30, 30);
注意する点として、こちらは一見
「1.2倍に拡大」⇒「右に50°傾ける」⇒「左に30px、下に30px移動」ってな変換をしてるイメージですが、Makeが付かないCGAffineTransformXXXの関数は第2引数の処理の後、第1引数のCGAffineTransformを掛けるので、
①「1.2倍に拡大」
②「右に50°傾ける」⇒①
③「左に30px、下に30px移動」⇒②
となり、
実際は「左に30px、下に30px移動」⇒「右に50°傾ける」⇒「1.2倍に拡大」という処理になります。
5.2.CGAffineTransformを合成するパターン
複数のCGAffineTransformを合成したものを最後に適用させるパターンです。
CGAffineTransform t1 = CGAffineTransformMakeTranslation(-30, 30);
CGAffineTransform t2 = CGAffineTransformMakeRotation(RADIAN(50));
CGAffineTransform t3 = CGAffineTransformMakeScale(1.2, 1.2);
CGAffineTransform t = CGAffineTransformConcat(t1, t2);
t = CGAffineTransformConcat(t, t3);
view.transform = t;
CGAffineTransformConcatは第1引数×第2引数で計算するので、見た通り
「左に30px、下に30px移動」⇒「右に50°傾ける」⇒「1.2倍に拡大」という処理になります。
こっちの方がパッと想像がつきますね。
これで基本は完璧だっ
（あっきぃは基本しか知らない。）