開発基礎トレリターンズ1:基本アニメーション公式集

サルでき.jp > 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) > 開発基礎トレリターンズ1:基本アニメーション公式集

2009/11/24 09:00 投稿先 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) 投稿者 カワサキ タカシ

っかり冷え込んできた今日この頃、みなさまいかがお過ごしでしょうか。

私ですか?

私はTwitter DMスパムに悪さされたり。
Twitter DMスパムにやられました

Chigatterに絡まれたり。
開発基礎トレリターンズ1:基本アニメーション公式集

これぞ踏んだり蹴ったりの週明けを迎えております。
(福田さん、、、私になにか恨みでも。。。)

こういう時は気分を変えて。
久々に開発基礎トレでもやろうかと思います。

現在進行中のツイピクアートも、
なんだかんだ言ってまだまだ自由に作れているとは言えず。

このまま綱渡り状態で進めるよりは、
整理してからやったほうが精神衛生上よろしいかと思いますので。

ではでは。

久々の開発基礎トレ、
今回は「オブジェクトの動かし方」をじっくり検証してみます。


以前の開発基礎トレでこんなことをやったのを覚えていますか?

開発基礎トレ4:アニメーションの基礎知識 その1
開発基礎トレ5:アニメーションの基礎知識 その2

この時はオブジェクトを直線的に動かしながらアニメーションについてお話ししました。

[UIView beginAnimations:nil context:nil]; – アニメ始めますよ~
[UIView setAnimationDuration:1]; – 1秒間アニメ続けますよ~

int xPos = rand() % 320; – 0から320の中でランダムな数字を作ります~
int yPos = rand() % 480; – 0から480の中でランダムな数字を作ります~
moveButton.center = CGPointMake(xPos,yPos); – 上で作った2つの数字をボタンの座標にセット~

[UIView commitAnimations]; – アニメここまで~、それじゃ実行~

こんな感じでしたね。

私の独断と偏見で、よく使うアニメーション動作には以下の4つがあります。

・移動
・拡大/縮小
・回転
・透明化/不透明化

これを「なるべく簡単に」「なるべく少ない方法で」使えるようにすること。
それが今回の狙いです。

私もいろいろ探していて戸惑うことが多かったのですが、
iPhoneSDKでは、同じようなアニメーションでも、
実現のさせ方が1つではない
場合が結構たくさんあります。

おそらくシーンに合わせた使い分けができるようになっているのでしょうが、
そんなこと初心者にとってみれば百害あって一利無し。

いったいどれを使えば良いのよ?という泥沼にハマる原因になっています。

動きさえすれば先に進めますので、
ウンウン悩むより一気に覚えてしまいましょう。

これだけ覚えればなんとかなる!
「基本アニメーション公式集」です。


準備

アニメーションの準備は以前書いたものを使います。

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1];

// ★ココにアニメーションの内容を書く★

[UIView commitAnimations];

ここまではもうバッチリですね。

では、各々の公式を見て行きましょう。

※以降の各公式ではpictというUIButtonを用意しています。
ボタンを押したら、ボタン自体が動く、ドムドムと同じような形式です。

移動

CGAffineTransform translate = CGAffineTransformMakeTranslation(100.0, 100.0);
[pict setTransform:translate];

たった2行です。

読み込むと
・CGAffineTransform型のtranslateという変数を用意し
・CGAffineTransformMakeTranslationメソッドで移動先の座標をX,Yの順で指定
・translate変数を渡したsetTransformメソッドを実行し、pictを移動

こんな感じ。

CGAffineTransformという働き者を使います。
平面図形変形に良く出てくる、アフィン変換というものらしいのですが、

気にせずに覚えてください。
どうしても気になったらwikiあたりで見てみましょう。不眠症治療にぴったりです。

拡大/縮小

CGAffineTransform scale = CGAffineTransformMakeScale(2.0, 2.0);
[pict setTransform:scale];

こちらも2行。

読み込むと
・CGAffineTransform型のscaleという変数を用意し
・CGAffineTransformMakeScaleメソッドで拡大縮小率をX,Yの順で指定
・scale変数を渡したsetTransformメソッドを実行し、pictを拡大縮小

こんな感じ。

移動とほとんど同じパターンですね。
ここがポイントです。

回転

CGAffineTransform rotate = CGAffineTransformMakeRotation(90 * (M_PI / 180));
[pict setTransform:rotate];

これも2行。

読み込むと
・CGAffineTransform型のrotateという変数を用意し
・CGAffineTransformMakeRotationメソッドで回転量を指定
・rotate変数を渡したsetTransformメソッドを実行し、pictを回転

こんな感じ。

回転量についてが少しだけわかりにくいですね。
角度の指定はラジアン角なるものを使います。

みなさまよくお馴染みの
これとラジアン角の変換は以下の式で行います。

ラジアン角 = 度 * パイ / 180
※パイはあの3.141592….のアレです。

90度時計回りに回転させる場合は
90 * パイ / 180 = 1.570796…

120度半時計回りに回転させる場合は
-120 * パイ / 180 = -2.094394…

なのですが、M_PIという定数(マクロ?)が用意されていますので、
それを使えば細かい値を意識する必要はありません。

ここまで3つはほとんど同じパターンで行けました。
このパターンさえ覚えておけば上記3つの動きが実装できます。

ドムドムで使っていたCGPointMakeも敢えて外しました。
これだけ見ればとっても簡単なのですが、このパターンでは他の動きができないので×。

透明化/不透明化

[pict setAlpha:0.0];

さて、最後の透明化だけちょっと違う公式になります。
CGAffineTransformはあくまで変形させるためのものなので、透明化は対応していないのです。

でもご安心を、こっちのほうが簡単です。

読み込むまでもないですね。
setAlphaで透明度を指示(0が完全な透明、1が完全なべた塗り)するだけです。


いかがでしたか?

意外と簡単!これなら覚えられそう!
って気になってきませんか?

次回この公式を実装したアプリを公開します。

自由自在のオブジェクト制御、ぜひトライしてみてください!

関連する記事:


Advertisement