2014年11月24日

UIKit Dynamics ステップアップチュートリアル in Swift (1)

このシリーズでは、UIKit Dynamics のチュートリアルを実践的に解説します。
言語はSwiftを使います。

今回シンプルに、自然な重力にしたがってボールが跳ねるアプリ。

プロジェクトの準備


Xcode 6.1 で、いつものように、新規プロジェクトを [Single View Application]で作成します。

Step 1> [File]メニュー > [New] > [Project...]
Step 2> [Single View Application] を選択。[Next]ボタンクリック
Step 3> Product Name (ここでは「MyDinamics」とします)を入力します。Language は「Swift」を選択して、[Next]ボタンをクリック
Step 4> フォルダーを指定して[Create] ボタン

重力(Gravity) エフェクトの追加


重力の効果を加えます。
Step 1> "ViewController.swift" のViewControllerクラス定義の下に、以下の2つのプロパティを定義します。
var animator: UIDynamicAnimator!
var ball: UIView!

Step 2> 「viewDidLoad」を以下のように変更し、プロパティを初期化します。
override func viewDidLoad() {
super.viewDidLoad()

ball = UIView(frame: CGRect(x: 100, y: 100, width: 50, height: 50))
ball.backgroundColor = UIColor.blueColor()
ball.layer.cornerRadius = 25.0
ball.layer.borderColor = UIColor.blackColor().CGColor
ball.layer.borderWidth = 0.0
view.addSubview(ball)

animator = UIDynamicAnimator(referenceView: view)
}


Step 3> この時点で実行してみる。(図1)
uidyn_no_gravity.png
図1 実行結果 - 重力なし

ボールは止まったまま。そうです、重力を追加してませんね。それでは、重力を加えてみましょう。

Step 4> "generalGravity" という名前でメソッドを実装

func generalGravity() {
let gravityBehavior = UIGravityBehavior(items: [ball])
animator.addBehavior(gravityBehavior)
}


Step 5> "viewDidLoad" メソッドの最後で、"generalGravity" メソッドを呼び出し
override func viewDidLoad() {
  ...
self.generalGravity()
}


Step 5> 実行して確認(図2)
uidyn_ball_fall.gif
図2 実行結果 - 重力を追加

障害物を置く


このままでは、ボールは底なしの地中に加速しながら落ちていくイメージです。

現実には地表も含め、いろいろな障害物にぶつかって反応します。ボールの場合は最終的に止まります。

この障害物ぶつかったときの振る舞いを「Collision(衝突) Behavior」と言います。

それでは「Collision Behavior」を定義してみましょう。

Step 1> Collision Behavior の追加

以下のように generalGravity メソッドにコードを追加します。

func generalGravity() {
  ...
var collisionBehavior = UICollisionBehavior(items: [ball])
collisionBehavior.translatesReferenceBoundsIntoBoundary = true;
self.animator.addBehavior(collisionBehavior)
}


オブジェクト(ボール)に対して障害物を定義するというイメージです。

Step 2> 実行して確認
シミュレーターで実行すると図3のように、設定した境界で停止します。

uidyn_ball_fall2.gif
図3 実行画面 - 障害物の設定

弾んで止まりはしますが、ボールにしては弾みが足りないですね。まるで鉄球を落としたような振る舞いです。

もっと弾むボールにするには、"UIDynamicItemBehavior" クラスを利用します。
UIKit Dynamics を利用する時、オブジェクト(UIView) には様々な属性が、あらかじめ、規定値(デフォルト)として定義されています。
そんな属性であるプロパティの中から、「弾性(elasticity)」に関するプロパティを変更します。
Step 3> "elasticity" プロパティの変更
以下のように generalGravity メソッドにコードを追加します。

func generalGravity() {
  ...
var ballBehavior = UIDynamicItemBehavior(items: [ball])
ballBehavior.elasticity = 0.65
animator.addBehavior(ballBehavior)
}


"elasticity"は0〜1.0の間の数値を設定します。1.0では、重力がない状態で、100%跳ね返る動きになります。

Step 2> 実行して確認
シミュレーターで実行すると図4のようになります。ボールらしくなりましたね。

uidyn_ball_fall3.gif
図4 実行結果 - 弾性プロパティの変更

"elasticity"プロパティを変更してボールの振る舞いを確認してみてください。

今回以上です。簡単なボールの動きを実装するチュートリアルでした。
posted by ayagu at 08:08| Comment(0) | iOS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。