読者です 読者をやめる 読者になる 読者になる

なかじまの開発ブログ

アプリ開発における備忘録などなど。

MENU

transformを使って色々アニメーションまとめ【Objective-C】

CGAffineTransformを使ってアニメーション(移動・回転・拡大縮小)しよう!

移動

// 現在の位置からX軸に100, Y軸に200移動
view.transform = CGAffineTransformMakeTranslation(100, 200);

// Affine変換された後の位置からX軸に100, Y軸に200移動
view.transform = CGAffineTransformTranslate(view.transform, 100, 200);

回転

// 現在の角度から90度回転
float ang = 90 * M_PI / 180;
view.transform = CGAffineTransformMakeRotation(ang);

// Affine変換された後の角度から180度回転
float ang = 180 * M_PI / 180;
view.transform = CGAffineTransformRotate(view.transform, ang);

拡大縮小

// 現在の大きさから2倍に拡大
view.transform = CGAffineTransformMakeScale(2, 2);

// Affine変換された後の大きさから半分に縮小
view.transform = CGAffineTransformScale(view.transform, 0.5, 0.5);

反転

// 上下に反転
view.transform = CGAffineTransformMakeScale(1, -1);

// 左右に反転
view.transform = CGAffineTransformMakeScale(-1, 1);

Affineの結合

// 移動と回転
CGAffineTransform t1 = CGAffineTransformMakeTranslation(100, 200);
float ang = 90 * M_PI / 180;
CGAffineTransform t2 = CGAffineTransformMakeRotation(ang);
// 結合
view.transform = CGAffineTransformConcat(t1, t2);

Affine変換を初期に戻す

view.transform = CGAffineTransformIdentity;

アニメーションさせるのに animateWithDuration を使う

[UIView animateWithDuration:アニメーションの時間(秒)
    delay:アニメーション開始までの時間(秒)
    options:●UIViewAnimationOptionCurveEaseIn 徐々に加速
        ●UIViewAnimationOptionCurveEaseOut 徐々に減速
        ●UIViewAnimationOptionCurveEaseInOut 最初に加速して、最後に減速
        ●UIViewAnimationOptionCurveLiner 一定速度
    animations:アニメーション処理
completion:アニメーションが終了したときの処理(ないときはnilで)]


サンプル

// 1秒間で反転アニメーション
[UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLiner animations:^{
  view.transform = CGAffineTransformMakeScale(1, -1);
} completion:nil];