Life-LOG OtherSide

  

UIDynamicBehaviorで定義されているのは、物理学で定義された世界。次はその世界から少しだけ飛び出す方法を考えていく。昨日までよく分からなかったデリゲーションを使うんです。DynamicBehaviorの機能を拡張するためにデリゲートするんですよね。まず、衝突(collision)を「検出」するためにどうしたらいいのかみていく。

まず、VierControllerは物理世界に支配されている(ノーマルのDynamicBehavior(GravityとCollision)で支配されているので、まずCollisionを拡張するために、ViewContorollerにプロトコールを埋め込むとしよう。

class ViewController: UIViewController, UICollisionBehaviorDelegate {

ViewControllerにUICollisionBehaviorDelegateプロトコールを拡張させるという考え方が少し理解しがたい。デリゲーションをするのなら、UICollisionBehaviorクラスをデリゲートしてやればいいような気がするんだが...　それを内包するクラスにプロトコールを拡張？　今は色々考えても答えが出ないので次に進もう。

UICollisionBehaviorクラスのインスタンスcollisionのプロパティにcollisionDelegateがある。実は、これがデリゲートするオブジェクトのことで、UICollisionBehaviorDelegateプロトコールから生成されたインスタンスオブジェクトってことになる。

collision.collisionDelegate = self

頭が混乱しそうになるけど、自分自身をデリゲートすることで自分を拡張させるんですよね。しかし、ViewContorollerでUIcollisionBehaviorDelegateのプロパティを実装しないといけませんよね。UIcollisionBehaviorDelegateで宣言されているプロパティには以下のものがある。

1. collisionBehabior:beganContactForItem:withBoundaryIdentifier:atPoint:
2. collisionBehavior:beganContactForItem:withItem:atPoint:
3. collisionBehavior:endCOntactForItem:withBoundaryIdentifier:
4. collisionBehavior:endContactForItem:withItem:

そしてこの4つのメソッドはすべてオプショナル扱いなので実装していなくてもエラーにはならない。使うものだけ実装すればいいんです。このチュートリアルは最初の「 collisionBehabior:beganContactForItem:withBoundaryIdentifier:atPoint:」だけ実装して使っている。ちょっとリファレンスで調べてみよう。

collisionBehavior:beganContactForItem:withBoundaryIdentifier:atPoint:
ダイナミックアイテム(dynamic item)と衝突の境界線(collision boundary)の間で衝突が生じた時に呼ばれる関数(勝手に呼ばれる)

宣言
optional func collisionBehavior(_ behavior: UICollisionBehavior,
beganContactForItem item: UIDynamicItem,
withBoundaryIdentifier identifier: NSCopying,
atPoint p: CGPoint)

パラメーター
behavior 境界線と接触を始めるダイナミックアイテム(dynamic item)を保持する衝突の振る舞い(collision behavior)
item 　境界線と接触を始めるダイナミックアイテム(dynamic item)
identifier ダイナミックアイテム(dynamic item)が接触をはじめる境界線の識別子(アイデンティファイア)
p 衝突する境界線上のポイント

インポート形式
import UIKit

利用可能
Available in iOS 7.0 and later.

まだ途中だけど今日はこれでおしまし。  

UICollisionBehaviorクラスの理解を深めるためにちゃんとリファレンスを読んでみよう。

UICollisionBehavior: UIDynamicBehavior: NSObject
NSObjectに適合させてやる

collision behavior(衝突の作法)を加えるというのは、複数のアレー型ダイナミックアイテムに対して互いに衝突(collision)する能力を与える事で、特定の境界線を持つということもある。またcollision behaviorは、アイテムの衝突に特定の性質を加えることができる。UIDynamicItemBehaviorオブジェクトによってオプショナルな性質変化を加えることもできる。

ここでいうダイナミックアイテムというのは、UIDynamicItemプロトコールを実装していればいい。ここで既に説明しているけど、iOS7以降にこのプロトコールはUIViewとUICollectionViewLayoutAttributesクラスに組み込まれている。ダイナミックアニメーター、そうUIDynamicANimatorクラスのインスタンスによって回転したり一を変えたりすることをするためにカスタムオブジェクトにダイナミックアイテムを使うことができる。

ダイナミックアイテムを使って衝突の特性を与えるために次の2つのステップを取らなければんらない。

1. addItem：メソッドを使って、アイテムとビヘイビアを関連付けるあ、もしくは、initiWithItems：メソッドを使ったアレー型アイテムで新しいcollision behaviorを初期化する。

2. addBehavior：メソッドを使ってアニメーターにビヘイビアを加えることでビヘイビアを使用可能にする。

まだまだ説明は続くけど、このぐらいでいいでしょう。

今日はここまで。  

UICollisionBehaviorクラスにも数多くのプロパティやメソッドが用意されている。iOSフレームワークを勉強するのが大変なのは覚えることが多すぎるからだ。

UIDynamicBehaviorの1つ、UICollisionBehaviorクラスにも知らないプロパティやメソッドが色々ある。

また昨日紹介したコードの話をしよう(毎日ちょっとずつしか勉強していないんで、同じ内容を数日続けてるので)。青い正方形が重力に従って落下する途中に黄色い長方形にぶつかる(Collision!)と、その落下速度に影響して2つのオブジェクトが一緒に落下していく。

これじゃ、黄色い長方形にbarrier(バリア)と名付けた意味がないですよね。黄色い長方形は青い正方形と衝突しても影響をうけないようにするにはどうすればいいか？

答えは、黄色い長方形の輪郭に合わせて透明の境界線を引いてやるんですよ。

collision.translatesReferenceBoundsIntoBoundary = true

このコードを覚えているかな。このプロパティを「true」にしてやると、リファレンスビュー(referennce view)、これは画面の輪郭になるけど、これが境界線になる。ここに黄色い長方形の輪郭を境界線として加えてやるメソッドを使うんです。

collision.addBoundaryWithIdentifier("barrier", forPath: UIBezierPath(rect: barrier.frame))

これも覚えなければならないメソッドの作法だ。こういうメソッドが多数あるんで、どういう時にどういうメソッドを使ったらいいのか勉強するために、他人のコードを読むことが重要になりますね。覚えるより慣れろってところか。

じゃあViewController.swiftのコードを紹介しよう。

import UIKit

class ViewController: UIViewController {

var animator: UIDynamicAnimator!
var gravity: UIGravityBehavior!
var collision: UICollisionBehavior!

override func viewDidLoad() {
super.viewDidLoad()
let square = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
square.backgroundColor = UIColor.blueColor()
view.addSubview(square)
let barrier = UIView(frame: CGRect(x: 0, y: 300, width: 130, height: 20))
barrier.backgroundColor = UIColor.yellowColor()
view.addSubview(barrier)

animator = UIDynamicAnimator(referenceView: view)
gravity = UIGravityBehavior(items: [square])
animator.addBehavior(gravity)

collision = UICollisionBehavior(items: [square])
collision.addBoundaryWithIdentifier("barrier", forPath: UIBezierPath(rect: barrier.frame))
collision.translatesReferenceBoundsIntoBoundary = true
animator.addBehavior(collision)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

このコードないで記述しているオブジェクトの腱錬成をダイアグラムで説明すると下のようになる。



これをiOSシュミレーターで実行すると黄色い長方形は動かず、青し正方形は落下中に黄色い長方形に当たって落下の軌跡が変わる。


今日はここまで。  

先駆者の努力を垣間見れるのが、今日のコードだろう。こういうAPIの使用法は非常に単純だ。

昨日書いたコードは青い正方形が重力に従って下方に落ちて画面の底面で止まるけど、途中にある黄色い長方形を素通りしてしまった。青い正方形と黄色い長方形との間にインタラクション(相互作用)が及んでいない。

UICollisionBehaviorクラスはオブジェクト間の相互関係を介在するクラスになる。昨日のコードの関連は以下のようになり、オブジェクトの赤いBarrierは孤立した状態である。



たった1行のコードを変更するだけでインタラクティブな動きに様変わり。

変更前：collision = UICollisionBehavior(items: [square])
変更後：collision = UICollisionBehavior(items: [square, barrier])



今日はここまで。  

オブジェクトに重力を加え、境界線で止まるとこまで勉強しました。じゃあ次は、2つのオブジェクトの接触に関してみていこう。青い正方形と黄色い長方形の初期値の位置関係をみてみよう。以下のコードで書くと...
import UIKit

class ViewController: UIViewController {

var animator: UIDynamicAnimator!
var gravity: UIGravityBehavior!
var collision: UICollisionBehavior!

override func viewDidLoad() {
super.viewDidLoad()
// これは青い正方形のオブジェクト
let square = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
square.backgroundColor = UIColor.blueColor()
view.addSubview(square)
// そして付け加えられた黄色い長方形のオブジェクト
let barrier = UIView(frame: CGRect(x: 0, y: 300, width: 130, height: 20))
barrier.backgroundColor = UIColor.yellowColor()
view.addSubview(barrier)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

}


上のコードは図形を表示させるだけ。位置関係はこんな位置にあるのが、以下のコードを付け加えて重力を加える。
import UIKit

class ViewController: UIViewController {

var animator: UIDynamicAnimator!
var gravity: UIGravityBehavior!
var collision: UICollisionBehavior!

override func viewDidLoad() {
super.viewDidLoad()
let square = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
square.backgroundColor = UIColor.blueColor()
view.addSubview(square)
let barrier = UIView(frame: CGRect(x: 0, y: 300, width: 130, height: 20))
barrier.backgroundColor = UIColor.yellowColor()
view.addSubview(barrier)
// 青い正方形に重力を加える。
animator = UIDynamicAnimator(referenceView: view)
gravity = UIGravityBehavior(items: [square])
animator.addBehavior(gravity)
// 青い正方形にはまだ画面の境界しか理解できていないので黄色い長方形とのインタラクションは無い。
collision = UICollisionBehavior(items: [square])
collision.translatesReferenceBoundsIntoBoundary = true
animator.addBehavior(collision)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}


上のように青い正方形にだけ重力がかかっても黄色い長方形との相互作用はないので、青い正方形は黄色い長方形を素通りして下に落ちていく。

今日はここまで。  

昨日まで書いたコードの場合、青い正方形はアプリが起動したとたんに重力のかかっている方向に流れて画面から消えてなくなってしまう。

次は境界線を作って青い正方形を止めるために利用するのが、UICollisionBehaviorクラスだ。すべてのUIDynamicBehaviorに言えることは、アイテムの位置情報をアレー型として保持する。UICollisionBehaviorも同じだ。

新しくインスタンスを宣言する。当然アンラップオプショナルで。

var collision: UICollisionBehavior!

そしてこのcollisionを初期化する時に画面上のオブジェクトsquareをアレー型で与える。

collision = UICollisionBehavior(items: [square])

次が重要なんですが、collisionに長ったらしい名前がついたプロパティがある。

translatesReferenceBoundsIntoBoundary

これはUIDynamicAnimatorをreferenceViewで初期化した時に初期値として設定されている境界線を使うかどうかのBoolean型プロパティってことで、初期値で設定されているのは画面の境界線でしょう。

ということで、これらを昨日のコードに付け加えると(太字が追加コード)。

import UIKit

class ViewController: UIViewController {

var animator: UIDynamicAnimator!
var gravity: UIGravityBehavior!
var collision: UICollisionBehavior!

override func viewDidLoad() {
super.viewDidLoad()
let square = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
square.backgroundColor = UIColor.blueColor()
view.addSubview(square)

animator = UIDynamicAnimator(referenceView: view)
gravity = UIGravityBehavior(items: [square])
gravity.angle = 0.0
gravity.magnitude = 2.0
animator.addBehavior(gravity)

collision = UICollisionBehavior(items: [square])
collision.translatesReferenceBoundsIntoBoundary = true
animator.addBehavior(collision)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

}

これをiOSエミュレーターで動かすと次のように動いて止まる。angleを0.0にしているとちょうど右方向に向かって画面に当たると止まる。


しかし、これを下のように変更すると

import UIKit

class ViewController: UIViewController {

var animator: UIDynamicAnimator!
var gravity: UIGravityBehavior!
var collision: UICollisionBehavior!

override func viewDidLoad() {
super.viewDidLoad()
let square = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
square.backgroundColor = UIColor.blueColor()
view.addSubview(square)

animator = UIDynamicAnimator(referenceView: view)
gravity = UIGravityBehavior(items: [square])
gravity.angle = 0.5
gravity.magnitude = 1.0
animator.addBehavior(gravity)

collision = UICollisionBehavior(items: [square])
collision.translatesReferenceBoundsIntoBoundary = true
animator.addBehavior(collision)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

}

面白いことに青い正方形は斜め右下に動いて画面の端に当たるとずるずると下に落ちていく。重力は下にかかっている。ちょうど真右だと静止するのにちょっｔ下向きだったら下に落ちていくのはどうしてでしょうね。


まあどちらにしろこういう動きが数行のコードで実現できるって凄いですね。まだまだこれから

今日はここまで。  

UIDynamicAnimatorクラスは、UIKitの物理学エンジンという説明があるが、正確に言うと、物理学エンジン、これは一連のBehaviorクラスのことだろう。ということは以下のクラスじゃないかな。

UIAttachmentBehavior
UICollisionBehavior
UIDynamicItemBehavior
UIGravityBehavior
UIPushBehavior
UISnapBehavior

まず物理学エンジンというのをクラスでどのように表現するのか理解しておく必要がある。UIViewアイテムの(物理学的)動きの軌跡は、位置情報としてアレー型で保持することになる。そしてこれは、あくまでも位置情報なので、このインスタンスを前述のUIDynamicAnimatorのリファレンスviewに提供することで、動きがアニメーションされて画面に描出されるってとこですね。

当然のように、物理学エンジンのBehaviorクラスには、数々のプロパティが用意されていて、角度(angle)とか強さ(magnitude)を変化させられる。

昨日の内容を以下のようにしてやると、squareオブジェクトが右方向に超高速に飛んでいきます(笑)

import UIKit

class ViewController: UIViewController {

var animator: UIDynamicAnimator!
var gravity: UIGravityBehavior!

override func viewDidLoad() {
super.viewDidLoad()
let square = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
square.backgroundColor = UIColor.blueColor()
view.addSubview(square)

animator = UIDynamicAnimator(referenceView: view)
gravity = UIGravityBehavior(items: [square])
gravity.angle = 0.0
gravity.magnitude = 12.0
animator.addBehavior(gravity)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

}

このangleプロパティだけど、何も考えずに「0.0」を入れると右方向に飛んでいく。しかし、「90.0」を入れると左下に飛んでいく？　角度の単位は何だろう？　まだ調べていないので良くわかっていない....(^_^;)

今日はここまで。  

iOSフレームワークの説明になると、Swiftの知識が必要ないと思うかもしれない。いえいえ、APIもSwiftの文法を使ってコードして利用するので、最初にSwiftの勉強をするのが望ましいでしょう。

さて、前回からの続きで、画面にsquareというUIViewオブジェクトのインスタンスを表示させた。これに重力を与えて落下させるけど、UIViewのオブジェクトには既にUIDynamicItemプロトコールが実装されているんで、そのままUIDynamicAnimatorの動きを加えることができますね。

animatorというUIDynamicAnimatorのインスタンスを宣言する。
これは、ViewController.swiftのviewDidLoadの前に次のコードを加える。

var animator: UIDynamicAnimator!

この宣言のミソは「!」をつけるってこと。これはSwift的な記述で、「明示的アンラップオプショナル」なので、animatorはオプショナルなプロパティということになる。オプショナルな扱いというのは、nilも取り得るってことで、このプロパティの値を使用するためにオプショナルから強制的に脱する必要があり、それが明示的アンラップオプショナルで「！」をつけてやると、そのインスタンスは強制的に具体的な型になる。ということは、裏を返せば、nilが代入されているオプショナルなプロパティなら実行時にエラーになってしまう。

上のように宣言をしているということは、animatorは必ずUIDynamicANimatorクラスの値を持っていることがはっきり分かっているということになる。

var gravity: UIGravityBehavior!

このgravityというプロパティも必ずUIGravityBehaviorクラスの値を持っていることになる。こうしておくと、クラスで記述されている初期化ステップ init{}内で初期化をしなくていいというメリットがある(？)　必ずUIDynamicAnimatorクラスとUIGravityBehaviorクラスは初期化ステップで必ずanimatorとgravityに値を持たせているってことになるのだろう。最初にアンラップさせておくと、毎回アンラップする必要がないからだ(*1)

そして、次のコードをviewDidLoad内の最後に加える。

animator = UIDynamicAnimator(referenceView: view)
gravity = UIGravityBehavior(items: [square])
animator.addBehavior(gravity)

animatorインスタンスにviewクラスのreferenceViewをパラメーターとして与えているが、このviewというのが画面に見えているsquareの表示のことで、重力によるオブジェクトの動きの表示は、animatorが引き継いでいくことになる。そして、重力というフォース(?)はgravityということだろう。パラメーターにsquareタイプのアレー型のitemsを加えるのがミソだろう。ここで私の理解だけど、animatorは動きを表示するクラスインスタンス。gravityはsquareの動きを重力の法則に従って動く位置情報をアレー型で保持するクラスインスタンス。

animator.addBehaviore(gravity)

最後の呪文を書くことで、重力によって動く位置情報をアニメーションとして画面に表示するってことだろう。

ViewController.swiftの全文を書くと以下のようになる(これは、とあるチュートリアルを改変している)。

import UIKit

class ViewController: UIViewController {

var animator: UIDynamicAnimator!
var gravity: UIGravityBehavior!

override func viewDidLoad() {
super.viewDidLoad()
let square = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
square.backgroundColor = UIColor.blueColor()
view.addSubview(square)

animator = UIDynamicAnimator(referenceView: view)
gravity = UIGravityBehavior(items: [square])
animator.addBehavior(gravity)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

}

しかし、私が疑問に思ったのが、オプショナルな値の扱いだ。Swift本とか読んでいると、以下のように書く方が正しいような正しくないような...

import UIKit

class ViewController: UIViewController {

var animator: UIDynamicAnimator?
var gravity: UIGravityBehavior?

override func viewDidLoad() {
super.viewDidLoad()
let square = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
square.backgroundColor = UIColor.blueColor()
view.addSubview(square)

animator = UIDynamicAnimator(referenceView: view)
gravity = UIGravityBehavior(items: [square])
animator!.addBehavior(gravity)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

}

(*1) こうい場合、オプショナルな値を使う時に必ず「!」を使わないといけないので、最初っから明示的アンラップをさせて置く方がいいのでしょうか?　アドバイスお願い。

今日はここまで。  

UIDynamicAnimatorクラスは、オブジェクトに物理学的な動きを与えるクラス。ちゃんと理解できないからちょっとドキュメントを読んでみる。

親クラスはNSObjectになっている。結構上位のクラスなんですね。フレームワークがUIKitになっている。そもそもUIKitというのはクラスではなくユーザーインターフェイスを構成する部品の集まりの事で、互いに異なるクラス群の集まりになり、プロトコールで統一されていると考えていいのだろう。本当かな？

なんにせよ。UIDynamicAnimatorというクラスは、物理学的な動きを画面上にアニメーションとして表現することができる。画面上のオブジェクト(dynamic Item)に対して、ビヘイビア/振る舞い(behavior)というクラスを介在して動き(アニメーション)を加えていることになる。

このダイナミックアイテムは、 UIDynamicItemプロトコールを実装していれば、どんなオブジェクトにもUIDynamicAnimatorの動きを加えることができる。iOS7以降になって、このプロトコールは、UIViewクラスとUICollectionViewLayoutAttributesクラスには埋め込まれているので、ユーザーは何もしなくてもいい。こういう事を知っていないとコードが理解できませんね。

そして特定の振る舞い(behavior)をダイナミックアイテムに働きかけるのだが、そのbehaviorには、UIAttachmentBehavior、UICollisionBehavior、UIDynamicItemBehavior、UIGravityBehavior、UIPushBehavior、UISnapBehaviorがあると言うわけです。

流れとして、
1)　UIViewベースのオブジェクトインスタンスに、behaviorを加える前に、インスタンスに動き始めのポジション、ローテーション、境界(UIViewベースのインスタンスならcenter、transform、そしてboundsプロパティ)を設定する必要がある。
2)　behaviorを加えたら、後の処理はanimatorにまかせる。どうもここの説明でanimatorとは何だ？という疑問が生まれるが、チュートリアルを読んでいると、どうもanimatorというのは、UIDynamicAnimatorクラスのインスタンスのようである。animatorのUIDynamicItemプロトコールを使ってアニメーションを実現していることになるんでしょう。
3)　そして、この動いているアイテムは、プログラムのプロセスやユーザーからの働きかけで変化が加わる(updare) それは、updateItemUsingCurrentStateメソッドを使う。

とまあ、なんとなく流れが分かりました。これをコードで書いてみるけど明日にします。では。  

Swiftの文法をすべて理解していると言えないけど、曲がりなりにもチュートリアルで書かれている単純なアプリ(シュミレータ上)を動かせたので、次のステップに進む。iOSに横たわるAPIの理解だ。

じゅあ何から取りかかればいいのか自分なりに考えると、playgroundでも新しいファイルを作ると最初に呪文のように書かれる「import UIKit」は最初に理解すべき内容じゃないかと思う。

「UIKit」とは何だ?　画面上のピクセルの塊を現実のオブジェクトのように扱ってユーザーのタッチ、ジェスチャーに反応するデジタルインターフェイスを作りあげるツールと言っていいだろう。

今回は、UIKit Dynamicsを勉強してみる。UIKitに組み込まれている物理学エンジン。オブジェクトに重力、バネ力、力価を再現することができる。

じゃあ試しにデモプロジェクトを作っていく。playgroundで新しいプロジェクトを作る。名前はDynamicsDemoにして立ち上げる。ViewController.swiftに移ると、viewDidLoad()と、 didReceiveMemoryWarning() というオーバーライドされた関数が作られている。viewDidLoad()関数は、アプリが最初に立ち上がった時にオブジェクトを表示させるので、この関数内に次のコードを入れる。

let square = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
square.backgroundColor = UIColor.blueColor()
view.addSubview(square)


魔法ですね。UIViewクラスのインスタンス、squareを作る作業ですが、初期化パラメーターとしてCGRectクラスのframeインスタンスを使用する。このframeインスタンスも、(x: 100, y: 100, width: 100, height: 100)という初期化パラメーターを加えなければならない。まあ、何となく分かります。しかし、UIViewとCGRectを理解していないので、もう少し勉強は必要です。でもこれでsquareという100ピクセルの正方形が生成されたのは分かりますよね。次はこのsquareのプロパティのbackgroundColorを関数UIColor.blueColor()を使って青色にしました。

ここで私がまだ理解していないけど、絶対に理解しなければならない事があります。ここで出てきたクラス、UIView、CGRect、UIColorの関係性です。どういう継承関係にあるのかまだ理解していない(^_^;)

そして最後の呪文、view.addSubview(square)だ。そして、ここでまたまた疑問点。view.addSubview()関数だけど、viewはどこでインスタンス化されているんでしょう?どちらにしろ、viewインスタンスはプロジェクト作成時にできるんでしょうね。

そして、この最後の呪文を使うことで、画面に100ピクセルの青い正方形が出現するんです。今日はここまで。