iOSアプリで部品を作る方法
今回は部品を作る方法について学んだのでまとめます。
部品ってなんだって思われる方もいるかもしれませんが、
人によってはUI部品だったりコンポーネントと呼んだりするやつです。
まずは青い四角形を描画してみようと思います。
前回、部品の配置はviewWillAppear上で行うと書きました。
それに倣って以下のようにします。
UIView *viewBlue = [[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 40)];
[viewBlue setBackgroundColor:[UIColor colorWithRed:0 green:0 blue:1 alpha:1]];
[self.view addSubview:viewBlue];
UIViewというのが部品に相当します。
イメージファイルを表示するにはUIImageViewとか
前回学んだボタンUIButtonとかも部品です。
その他にも沢山あるようです。おいおい学んでいこうと思います。
以前、オブジェクト指向について学びましたが、これら部品一つ一つもオブジェクトに相当します。
そのときはインスタンスについておいおい学ぶと言いましたが
この最初の行で「部品＝〜」とすることでインスタンスになります。
つまりインスタンスとはオブジェクトを実体化したものと言えます。
UIView *viewBlue = [[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 40)];
とすることで
左から10px、上から10pxの位置を左上として幅100px、高さ40pxのUIViewオブジェクトをインスタンス化して、今後viewBlueという名前を呼びなさいという意味になります。
setBackgroundColorというコードは色を付けます。
viewBlueインスタンスの色を三原色の赤、緑、青と、アルファ値という透明度で指定します。
最後に[self.view addSubview:viewBlue];とあるのは
自分(ViewController)のビュー(板)にviewBlueを貼付けなさいという意味です。
これを前回のviewWillAppearメソッドの最後に追加すると以下のように実行されます。
色のセンスまったくありませんが、そこらへんはお許し下さい。
次回はアニメーションについて書こうと思います。
iOSアプリケーションのアニメーションまとめ
続きです。
これまで
・iOS Developer登録(申請篇、アクティベート篇、完結篇)
について書いてきました。
今回はアニメーションについて学びましたのでそれを書こうと思います。
ゲームの基本動作として、爆発効果やアイテムを取得したときのキラキラしたものを見せられるとインパクトもあるし、クオリティも高くなりそうだからです。
iOSアプリでこのようなアニメーションを描画する方法は
いくつかあるようです。
まず上記のようなエフェクトを追加する方法は
アニメーションを明示的に描く方法と
パーティクルというシステムを生成する方法があります。
後者はやりかたによっては前者で代替できそうなので、
今回はまず前者のアニメーションの方法をまとめます。
次回以降、パーティクルについて学んでまとめようと思います。
最初に断っておくこととして、
アニメーションはハマるととても奥が深そうなので
先人達のお知恵を拝借した方がいいこともありそうです。
コチラのサイトには実際のエフェクトとソースコードをまとめています。
http://code4app.net/category/animation
その他多くの方々がgithubというサイトでソースコードを公開しています。
https://github.com/dominikhofmann/PRTween
https://github.com/r3econ/UIImage-Sprite-Additions
https://github.com/warrenm/AHEasing
https://github.com/nicklockwood/iCarousel
https://github.com/mpospese/MPFoldTransition
https://github.com/inamiy/YISplashScreen
これらを参考にしつつ、今回はゼロからコードを作っていきます。
アニメーションの方法は大きく３つあります。
①animateWithDuration
②CABasicAnimation
③CATransaction
それでは個々の方法について説明します。
前提として、前回学んだようなUIView *viewBlueがあるとします。
そしてそれを3秒かけて100pxだけ位置を下げるようなアニメーションを実行してみます。
①animateWithDuration
[UIView animateWithDuration:3.0f
animations:^{
viewBlue.center =
CGPointMake(
viewBlue.center.x,
viewBlue.center.y + 100);
}
completion:^(BOOL finished){
if(finished){
NSLog(@"finished animation");
}
}];
②CABasicAnimation
/* 移動 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
// アニメーションのオプションを設定
animation.duration = 3; // アニメーション速度
animation.repeatCount = 1; // 繰り返し回数
// 始点と終点を設定
animation.fromValue = [NSValue valueWithCGPoint:viewBlue.layer.position]; // 始点
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(viewBlue.layer.position.x,
viewBlue.layer.position.y + 100)]; // 終点
// アニメーションを追加
[viewBlue.layer addAnimation:animation forKey:@"move-layer"];
③CATransaction<
[CATransaction begin];//start animation!
[CATransaction setCompletionBlock:^{//終了処理
//終了判定するアニメーションを指定
CAAnimation *animationForKeyFrame = [viewBlue.layer animationForKey:@"position"];
[viewBlue.layer removeAnimationForKey:@"position"];
if(animationForKeyFrame){//終了判定
NSLog(@"finished animation");
}
}];
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
[animation setValue:@"animation1" forKey:@"id"];//アニメーションにanimation1というキーを指定
//アニメーションが終了しても(終了した位置で)残るよう：以下２行
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
animation.duration = 3.0f;//アニメーション時間
animation.fromValue = [NSValue valueWithCGPoint:viewBlue.center];//開始位置
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(viewBlue.center.x,
viewBlue.center.y + 100)];//終了位置
[viewBlue.layer addAnimation:animation forKey:@"position"];//アニメーションをビュー(レイヤー)にセット
}
[CATransaction commit];//アニメーションの実行
①、②、③ では①が最も簡単ですが、
③が最も柔軟にいろいろなことができそうです。
例えば、現在のアニメーションから別のアニメーションに移行させる時等です。
ゲーム中では様々なアクションにより、部品位置をアニメーションで変えるので
リアルタイムに変更するには③が最も多用しそうですね。
柔軟である一方で、③の特徴(デメリット？)として
・コードが長くなる
・ビュー自体ではなく、(ビューより更に根本的な)レイヤーに対してアニメーションを与える
メリットとしては
・任意の軌道を動かすアニメーション
・連続的にスムーズなアニメーション
などができるらしいです。
ちょww、レイヤーって何よっていう問題が出てきたので
次回レイヤーについて書こうと思います。
※ちらっとパーティクルについても調べていたんですが、
このレイヤーについて知らないとパーティクルも整理できなさそうだったので。。
続きます。
