UIKitDynamicsの活用法

Shinji KobayashiGentleSoft

yidev 第２２回勉強会

Name：Shinji Kobayashi

Twitter：@gentlejkov

GentleSoft

Who are you?

http://gentlesoft.net

2Dの物理演算を使ったアニメーションが簡単に作成できるライブラリ

UIKitDynamicsとは

通常のアプリケーション中に物理演算のアニメーションを簡単に導入できる

2Dの物理演算を使ったアニメーションが簡単に作成できるライブラリ

UIKitDynamicsとは

通常のアプリケーション中に物理演算のアニメーションを簡単に導入できる？

UIKitDynamicsの特徴•標準で用意されている内容なら低負荷で物理演算を実装できる

•実装自体は割と簡単

•iOS8までは標準の機能が物足りなかったが、iOS9での機能追加により必要な物理演算が出揃ってきた

UIKitDynamicsの問題点

•物理演算に沿わない動きはできない

•思った通りに動かすのは難しい

•何に使えばいいのか分からない

UIKitDynamicsの使い道

•UIViewを物理演算に沿ったアニメーションさせて、リッチな表現をする

•画面遷移に物理演算のアニメーションを取り入れて遊ぶ

UIDynamicItemプロトコルを実装したクラス

UIKitDynamicsの対象

•UIView

•UICollectionViewLayoutAttributes

UICollectionViewのCustumLayoutを使う

• UIAttachmentBehavior　-　バネ

• UICollisionBehavior　-　衝突

• UIGravityBehavior　-　重力

• UIDynamicItemBehavior　-　物体の特性

• UIPushBehavior　-　エネルギー

• UISnapBehavior　-　移動

UIKitDynamics(～iOS8)

Demo

UIKitDynamics(～iOS8)

• UIDynamicItemCollisionBoundsType

• UIFieldBehavior

• linearGravityFieldWithVector　-　重力空間

• radialGravityFieldWithPosition -引力／電磁力

• noiseFieldWithSmoothness:animationSpeed

• UIAttachmentBehavior

1. limitAttachmentWithItem　-　ロープ2. pinAttachmentWithItem - Google 13Hit3. slidingAttachmentWithItem - Google 9Hit4. fixedAttachmentWithItem - Google 10Hit

UIKitDynamics(iOS9～)

Demo

UIDynamicAnimatorのオブジェクトを作成

実装手順

必要なBehaviorを作成し、アニメーションさせたいViewをセット

UIDynamicAnimatorにBehaviorをセット

実装（抜粋） animator = UIDynamicAnimator(referenceView: source) let gravity = UIGravityBehavior(items: [destination]) gravity.magnitude = 12

let collision = UICollisionBehavior(items: [destination]) collision.addBoundaryWithIdentifier("bottom", fromPoint: CGPoint(x: 0, y: source.bounds.height), toPoint: CGPoint(x: source.bounds.width, y: source.bounds.height))

let item = UIDynamicItemBehavior(items: [destination]) item.elasticity = 0.5 item.resistance = 0.8 animator.delegate = self animator.addBehavior(gravity) animator.addBehavior(collision) animator.addBehavior(item)

CollectionViewLayoutを継承してCustomLayoutを作成

実装手順(UICollectionView)

override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes! {

return animator.layoutAttributesForCellAtIndexPath(indexPath)

} override func layoutAttributesForElementsInRect(rect: CGRect) -> [AnyObject]? { return animator.itemsInRect(rect) }

animator = UIDynamicAnimator(collectionViewLayout: self)

定型文

疑問点

Animatorが起動した時点で無視される

設定したAutoLayoutはどうなる？

疑問点

リアルタイムに取れる、優秀

UIViewのframeから座標は取れる？

疑問点

GestureRecognizerばっちり使える

アニメーション中のViewのタッチ判定は？

疑問点

無理、無駄

UIViewのframeに任意の座標を設定してViewを動かせる？

疑問点

Viewを操作したい時どうする？

UIAttachmentBehaviorに操作したいViewと移動したい位置のanchorPointを指定、

lengthを0にすると狙いの位置には動かせる

疑問点

アニメーションが終了した判定は？

すべてのオブジェクトが停止した時、UIDynamicAnimatorDelegateの

dynamicAnimatorDidPauseメソッドが呼ばれる

疑問点アニメーションが終了したら

Viewが元の位置に戻ったりする？

しないAnimatorを削除しても、Viewの位置はそのまま

疑問点

その時のAutoLayoutは？

分かりません

まとめ•UIKitDynamicsはUIViewとUICollectionView

で使えて、その実装自体は容易

•大抵のパターンの物理演算を標準機能で実装できるようになった

•アニメーションをリアルタイムに補足して、操作することができるので、インタラクティブなアニメーションに向いている

UIKitDynamicsを活用してインタラクティブで

アニメーションリッチなアプリを実装しよう！