UIViewの回転、拡大、縮小

公開: 2015-04-26 14:30
更新: 2016-04-29 06:03

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];
        ...
}
UIViewの回転、拡大、縮小

いい感じですね。

そして相変わらずこのブログのコードのカラーリングはとっても見やすいです。




1.移動

右に40px、上に50px移動させます。

view.transform = CGAffineTransformMakeTranslation(40, -50);
UIViewの回転、拡大、縮小



2.回転

30°右に回転させます。

view.transform = CGAffineTransformMakeRotation(M_PI * 30.0 / 180.0);
UIViewの回転、拡大、縮小

こんなDefineを用意すればスッキリします。

#define RADIAN(x) (M_PI * (x) / 180.0)
...
view.transform = CGAffineTransformMakeRotation(RADIAN(30));



3.拡大と縮小

拡大と縮小です。比率を大きくすれば拡大、小さくすれば縮小出来ます。

view.transform = CGAffineTransformMakeScale(1.5, 1.5);
UIViewの回転、拡大、縮小

第1引数がx方向の拡大率、
第2引数がy方向の拡大率なので、別の値を入れれば歪ませることも出来ます。

view.transform = CGAffineTransformMakeScale(0.5, 1.2);
UIViewの回転、拡大、縮小



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);
UIViewの回転、拡大、縮小

注意する点として、こちらは一見
「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;
UIViewの回転、拡大、縮小

CGAffineTransformConcatは第1引数×第2引数で計算するので、見た通り
「左に30px、下に30px移動」⇒「右に50°傾ける」⇒「1.2倍に拡大」という処理になります。


こっちの方がパッと想像がつきますね。



これで基本は完璧だっ

(あっきぃは基本しか知らない。)



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。