2016年3月5日 yidev 第22回勉強会

1. UIKitDynamicsの活用法
Shinji Kobayashi
GentleSoft
yidev 第２２回勉強会

2. Name：Shinji Kobayashi
Twitter：@gentlejkov
GentleSoft
Who are you?
http://gentlesoft.net

3. 2Dの物理演算を使ったアニメーションが
簡単に作成できるライブラリ
UIKitDynamicsとは
通常のアプリケーション中に物理演算の
アニメーションを簡単に導入できる

4. 2Dの物理演算を使ったアニメーションが
簡単に作成できるライブラリ
UIKitDynamicsとは
通常のアプリケーション中に物理演算の
アニメーションを簡単に導入できる？

5. UIKitDynamicsの特徴
•標準で用意されている内容なら低負荷で物
理演算を実装できる
•実装自体は割と簡単
•iOS8までは標準の機能が物足りなかった
が、iOS9での機能追加により必要な物理演
算が出 ってきた

6. UIKitDynamicsの問題点
•物理演算に沿わない動きはできない
•思った通りに動かすのは難しい
•何に使えばいいのか分からない

7. UIKitDynamicsの使い道
•UIViewを物理演算に沿ったアニメーション
させて、リッチな表現をする
•画面遷移に物理演算のアニメーションを取
り入れて遊ぶ

8. UIDynamicItemプロトコルを実装したクラス
UIKitDynamicsの対象
•UIView
•UICollectionViewLayoutAttributes
UICollectionViewのCustumLayoutを使う

9. • UIAttachmentBehavior - バネ
• UICollisionBehavior - 衝突
• UIGravityBehavior - 重力
• UIDynamicItemBehavior - 物体の特性
• UIPushBehavior - エネルギー
• UISnapBehavior - 移動
UIKitDynamics(∼iOS8)

10. Demo
UIKitDynamics(∼iOS8)

11. • UIDynamicItemCollisionBoundsType
• UIFieldBehavior
• linearGravityFieldWithVector - 重力空間
• radialGravityFieldWithPosition -引力／電磁力
• noiseFieldWithSmoothness:animationSpeed
• UIAttachmentBehavior
1. limitAttachmentWithItem - ロープ
2. pinAttachmentWithItem - Google 13Hit
3. slidingAttachmentWithItem - Google 9Hit
4. fixedAttachmentWithItem - Google 10Hit
UIKitDynamics(iOS9∼)

12. Demo

13. UIDynamicAnimatorのオブジェクトを作成
実装手順
必要なBehaviorを作成し、アニメーション
させたいViewをセット
UIDynamicAnimatorにBehaviorをセット

14. 実装（抜粋）
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)

15. 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)
定型文

16. 疑問点
Animatorが起動した時点で無視される
設定したAutoLayoutはどうなる？

17. 疑問点
リアルタイムに取れる、優秀
UIViewのframeから座標は取れる？

18. 疑問点
GestureRecognizerばっちり使える
アニメーション中のViewのタッチ判定は？

19. 疑問点
無理、無駄
UIViewのframeに任意の座標を
設定してViewを動かせる？

20. 疑問点
Viewを操作したい時どうする？
UIAttachmentBehaviorに操作したいViewと
移動したい位置のanchorPointを指定、
lengthを0にすると狙いの位置には動かせる

21. 疑問点
アニメーションが終了した判定は？
すべてのオブジェクトが停止した時、
UIDynamicAnimatorDelegateの
dynamicAnimatorDidPauseメソッドが呼ばれる

22. 疑問点
アニメーションが終了したら
Viewが元の位置に戻ったりする？
しない
Animatorを削除しても、Viewの位置はそのまま

23. 疑問点
その時のAutoLayoutは？
分かりません

24. まとめ
•UIKitDynamicsはUIViewとUICollectionView
で使えて、その実装自体は容易
•大抵のパターンの物理演算を標準機能で実
装できるようになった
•アニメーションをリアルタイムに補足して、
操作することができるので、インタラクティ
ブなアニメーションに向いている

25. UIKitDynamicsを活用して
インタラクティブで
アニメーションリッチな
アプリを実装しよう！