#potatotips

1. SioriでどのようにCustom Transitionを実装しているか
2014/09/24
弥真 フィラース

2. 自己紹介

3. 弥真（やしん） フィラース
!
2013年5月よりウォンテッドリー株式会社にデ
ザイナーとして参加。
!
UI/UXの設計・デザインはもちろん、フロント
エンドの実装もやってます（Web、アプリ両方）
!
詳しいプロフィール
→https://www.wantedly.com/users/42889

4. Sioriリリースしました！

5. なんでジェスチャー操作？
・ボタンとか非ジェスチャーに比べ入力領域が広いので、
画面サイズが大きくても操作が圧倒的に楽だし早い
!
・直感的に使えて操作が楽しい！
!
・カスタムのtransitionがアプリの個性になる
!
!
言葉で説明するより実際に使ってもらったほうがわかると
思うのでダウンロードして使ってみてください！

6. Custom Transition
の仕組み

7. Custom Transitionを形成する3つの要素
fromViewController
移動元のviewController
!
!
toViewController
移動先のviewController
!
!
animationController
animationの制御をする

8. Push / Popの場合
pushまたはpopViewControllerでviewcontroller間の移動
開始
navigation controllerのdelegateメソッドである
‑navigationController: animationControllerForOperation:
fromViewController: toViewController:
が呼ばれる
animationControllerを返す

9. Push / Popの場合
pushまたはpopViewControllerでviewcontroller間の移動
開始
navigation controllerのdelegateメソッドである
‑navigationController: animationControllerForOperation:
fromViewController: toViewController:
が呼ばれる
animationControllerを返す
ここでcustom用のanimationController返す

10. animationControllerってなに？
UIViewControllerAnimatedTransitioningのprotocolを実装したオブジェクト
animationController内で二つのメソッドを定義する必要がある
・transitionDuration
transitionのアニメーションの合計時間を返す
・animateTransition
transitionのアニメーションを定義する。
引数でtransitionContextを受け取る。transitionContextから
fromViewController、toViewController、containerViewが
取れるのでそれを使ってアニメーションを定義する。

11. Custom Transition
をInteractiveにする

13. 4つ目の要素
Interaction Controller
・UIViewControllerInteractiveTransitioningのprotocolを実装したオブジェクト
!
・interactive transitioningを簡単に実装できる
UIPercentDrivenInteractiveTransitionが用意されている。
!
・アニメーションのタイムラインがあるとして、そのタイムライン上のどこの位置
にいるかを管理する。また、ユーザの入力によってpercentCompleteプロパ
ティを変えることでアニメーションを再生したり巻き戻したりできる。

14. 実装の流れ
1. ユーザの入力（ジェスチャー）を検知
!
2. transitionを開始
!
3. animationControllerをnavigationControllerのdelegateに返す
!
4. interactionControllerをnavigationControllerのdelegateに返す
!
5. ユーザの入力からinteractionControllerの状態をアップデートする
!
6. ユーザの入力が終わったらinteraction Controllerにtransitionを
cancelするかfinishするか伝える

15. 1. ユーザの入力（ジェスチャー）を検知
・transitionControllerでユーザ入力を検知するように
panGestureRecognizerを作る。
!
・そのpanGestureを対象のviewControllerに貼る

16. 2. transitionを開始
・panGestureのUIGestureRecognizerStateがBegan
に変わったらtransition（popViewControllerまたは
pushViewController）を開始する

17. 3. animationControllerをnavigationControllerの
delegateに返す
・transitionが開始するとnavigationControllerのdelegateメ
ソッドであるanimationControllerForOperationが呼ばれるの
でanimationControllerを返す

18. 4. interactionControllerをnavigationControllerの
delegateに返す
・animationControllerForOperationが呼ばれたあとすぐに
interactionControllerForAnimationControllerが呼ばれるので
interactionControllerを返す。

19. 5. ユーザの入力からinteractionControllerの状態を
アップデートする
・animationControllerのanimateTransitionメソッドがanimationのタイムラ
インを作ってくれる。そのタイムライン上のどこにいるかを判断するために
interactionControllerのupdateInteractiveTransitionメソッドを呼ぶ。
・panGestureのstateがChangeに変わったらジェスチャーの移動距離から
percentを計算してupdateInteractiveTransitionメソッドに引数として
percentを渡してpercentCompletedプロパティをアップデートする。
・ジェスチャーが続いてる間常にアップデートするようにする

20. 6. ユーザの入力が終わったらinteraction Controllerに
transitionをcancelするかfinishするか伝える
・panGestureのstateがCancelled、Failed、またはFinished
になったことでジェスチャーが終了したことを検知する
・ジェスチャーが終了したらユーザがtransitionをキャンセルし
たかったのか完了したかったのかを判断して
interactionControllerのcancelInteractiveTransitionまたは
finishInteractiveTransitionメソッドを呼んでtransitionを完了
させる。

21. 複数のgesture
recognizerを制御する

22. SioriではひとつのviewControllerに複数の
gesture recognizerが混在してる。
Pop Push Scroll
Swipe

23. どうやって制御しているか？
・transitionがstartするかしないかはviewControllerで判断する
・interactionControllerからviewControllerにdelegateを貼る
・interactiveTransitionCanStart, interactiveTransitionShouldCancel,
interactiveTransitionShouldFinishなどのdelegateメソッド用意して
viewControllerでそれぞれのinteractionControllerのメソッドを制御する。
!
・UIGestureRecognizerDelegateを利用する
・shouldRecognizeSimultaneouslyWithGestureRecognizerや
gestureRecognizerShouldBeginをうまく利用する。
・たとえばpopするviewがない時はpopのinteractionControllerのgestureの
gestureRecognizerShouldBeginでfalseを返してそもそも反応しないようにする。
!
・viewControllerでisTransitioningプロパティを作ってtransition中かどうかの
フラグを立てる
・transitioning中であればscrollViewのscrollはしないようにするなど。

24. やってみて思ったこと
・iOS7から公開されたAPIなのでまだまだ情報が少ない
・ベストプラクティスがわからない。interactive transitionが複数に
なると途端に複雑になる。どこにbugがあるかわかりにくい。
!
・transitionをキャンセルしてそのままscrollに入るようにするとか、
animationをスムースに切り替えるのに苦労した
!
・他がやってない分やったら目立つかも

25. デザイナー募集してます！
https://www.wantedly.com/projects/10775
エンジニアも募集してます！
https://www.wantedly.com/projects/7755