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

自己紹介

弥真（やしん） フィラース !

2013年5月よりウォンテッドリー株式会社にデザイナーとして参加。 !

UI/UXの設計・デザインはもちろん、フロントエンドの実装もやってます（Web、アプリ両方）

!

詳しいプロフィール →https://www.wantedly.com/users/42889

Sioriリリースしました！

なんでジェスチャー操作？

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

Custom Transitionの仕組み

Custom Transitionを形成する3つの要素

fromViewController 移動元のviewController

!!

toViewController 移動先のviewController

!!

animationController animationの制御をする

Push / Popの場合

pushまたはpopViewControllerでviewcontroller間の移動開始

navigation controllerのdelegateメソッドである ‑navigationController: animationControllerForOperation:

fromViewController: toViewController: が呼ばれる

animationControllerを返す

Push / Popの場合

pushまたはpopViewControllerでviewcontroller間の移動開始

navigation controllerのdelegateメソッドである ‑navigationController: animationControllerForOperation:

fromViewController: toViewController: が呼ばれる

animationControllerを返す

ここでcustom用のanimationController返す

animationControllerってなに？

UIViewControllerAnimatedTransitioningのprotocolを実装したオブジェクト

animationController内で二つのメソッドを定義する必要がある

・transitionDuration 　transitionのアニメーションの合計時間を返す

・animateTransition 　transitionのアニメーションを定義する。　 　引数でtransitionContextを受け取る。transitionContextから 　fromViewController、toViewController、containerViewが 　取れるのでそれを使ってアニメーションを定義する。

Custom TransitionをInteractiveにする

4つ目の要素Interaction Controller

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

実装の流れ

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

1. ユーザの入力（ジェスチャー）を検知

・transitionControllerでユーザ入力を検知するように 　panGestureRecognizerを作る。 !

・そのpanGestureを対象のviewControllerに貼る

2. transitionを開始

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

3. animationControllerをnavigationControllerのdelegateに返す

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

4. interactionControllerをnavigationControllerのdelegateに返す

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

5. ユーザの入力からinteractionControllerの状態をアップデートする

・panGestureのstateがChangeに変わったらジェスチャーの移動距離から 　percentを計算してupdateInteractiveTransitionメソッドに引数として 　percentを渡してpercentCompletedプロパティをアップデートする。

・ジェスチャーが続いてる間常にアップデートするようにする

・animationControllerのanimateTransitionメソッドがanimationのタイムラ 　インを作ってくれる。そのタイムライン上のどこにいるかを判断するために 　interactionControllerのupdateInteractiveTransitionメソッドを呼ぶ。

6. ユーザの入力が終わったらinteraction Controllerにtransitionをcancelするかfinishするか伝える

・panGestureのstateがCancelled、Failed、またはFinishedになったことでジェスチャーが終了したことを検知する

・ジェスチャーが終了したらユーザがtransitionをキャンセルしたかったのか完了したかったのかを判断してinteractionControllerのcancelInteractiveTransitionまたはfinishInteractiveTransitionメソッドを呼んでtransitionを完了させる。

複数のgesture recognizerを制御する

Pop Push Scroll

SioriではひとつのviewControllerに複数のgesture recognizerが混在してる。

Swipe

どうやって制御しているか？

・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はしないようにするなど。

やってみて思ったこと

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

デザイナー募集してます！https://www.wantedly.com/projects/10775

エンジニアも募集してます！https://www.wantedly.com/projects/7755