すっかり冷え込んできた今日この頃、みなさまいかがお過ごしでしょうか。
私ですか？
私はTwitter DMスパムに悪さされたり。
Twitter DMスパムにやられました
Chigatterに絡まれたり。
これぞ踏んだり蹴ったりの週明けを迎えております。
（福田さん、、、私になにか恨みでも。。。）
こういう時は気分を変えて。
久々に開発基礎トレでもやろうかと思います。
現在進行中のツイピクアートも、
なんだかんだ言ってまだまだ自由に作れているとは言えず。
このまま綱渡り状態で進めるよりは、
整理してからやったほうが精神衛生上よろしいかと思いますので。
ではでは。
久々の開発基礎トレ、
今回は「オブジェクトの動かし方」をじっくり検証してみます。
以前の開発基礎トレでこんなことをやったのを覚えていますか？
開発基礎トレ４：アニメーションの基礎知識 その１
開発基礎トレ５：アニメーションの基礎知識 その２
この時はオブジェクトを直線的に動かしながらアニメーションについてお話ししました。
[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が完全なべた塗り）するだけです。
いかがでしたか？
意外と簡単！これなら覚えられそう！
って気になってきませんか？
次回この公式を実装したアプリを公開します。
自由自在のオブジェクト制御、ぜひトライしてみてください！