カスタムトランジションやアニメーションを活用した「写真を生かすUI」のサンプル
•
1 recomendación•1,771 vistas
shibuya.swift #7での登壇資料になります。 昨年のAdventCalendarでも触れたカスタムトランジションとアニメーションを活用して写真を生かすようなUIを作る際のポイントに関してピックアップしたものになります。 今回は特にカスタムトランジションを活用した処理部分での実装に重点を置きModal遷移時及びNavigationControllerでのPush/Pop時のケースに関して解説をしています。 ★実装サンプルに関する詳細解説 http://qiita.com/fumiyasac@github/items/04c66743a3c829d39b1f ★サンプルのリポジトリ https://github.com/fumiyasac/mediaStyleTableViewSet
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a カスタムトランジションやアニメーションを活用した「写真を生かすUI」のサンプル
Similar a カスタムトランジションやアニメーションを活用した「写真を生かすUI」のサンプル (16)
Más de Fumiya Sakai
Más de Fumiya Sakai (20)
Último
Último (12)
カスタムトランジションやアニメーションを活用した「写真を生かすUI」のサンプル
- 6. import UIKit //画面遷移時に使用するアニメーションの実装をUIViewControllerAnimatedTransitioningを採用したクラスにて行う class TransitionController: NSObject, UIViewControllerAnimatedTransitioning { //アニメーションの時間を定義する internal func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval { return (遷移アニメーションの時間) } /** * アニメーションの実装を定義する * この場合には画面遷移コンテキスト（UIViewControllerContextTransitioningを採用したオブジェクト） * → 遷移元や遷移先のViewControllerやそのほか関連する情報が格納されているもの */ internal func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { (この中に画面遷移時のアニメーションを行う実体の処理を記載する) } } ✦ CustomTransitionの処理をまとめたクラスを用意 CustomTransitionの外付けクラスの概要 アニメーション実体をそれぞれの遷移のタイミングで適用する形なのでanimateTransion内に処理を記載する ★アニメーションを実装するクラスの雛形はざっくりとこんな感じ NSObjectを継承 & UIViewControllerAnimatedTransitioningを適用 このクラスのメンバ変数として遷移元 ⇄ 遷移先を管理する変数を作る【しておくと良いもの】
- 7. ✦ 処理の実体はContainerViewを作成しその中に表示対象を入れる CustomTransitionの組み立てポイント 画面遷移時に表示したい or 動かしたいUI要素を取得できるので、その各要素をContainerViewへ追加する形 ★画面遷移のコンテキストからアニメーション実体及びViewControllerを取得 各遷移元及び遷移先ViewControllerを取得し、その中のUI要素に関するものを取 得する。取得した要素をaddSubViewをしてアニメーション処理を適用する流れ。 ・遷移元 それぞれの画面遷移に関する要素はtransitionContextから取得し、その要素に対しアニメーション アニメーション実体の ContainerView //アニメーションの実態となるコンテナビューを作成 let containerView = transitionContext.containerView addSubView アニメーション完了時にはtransitionContext.completeTransition(true)とする //遷移元のControllerの取得 let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from) //遷移先のControllerの取得 let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to) ・遷移先 取得して追加したものに対して UIView.animate( … を適用する
- 8. class SampleController: UIViewController, UIScrollViewDelegate, UIViewControllerTransitioningDelegate { //・・・（省略）・・・ //カスタムトランジション用クラスのインスタンス let transition = CustomTransition() //サンプルのボタンアクション func sampleAction(_ sender: UIButton) { //カスタムトランジションを適用した画面遷移を行う let contentsDetail = storyboard!.instantiateViewController(withIdentifier: "ContentsDetailController") as! ContentsDetailController garellyDetail.transitioningDelegate = self self.present(contentsDetail, animated: true, completion: nil) } //・・・（省略）・・・ } ✦ 遷移先のViewControllerにtransitionDelegateを適用する CustomTransitionをModal遷移へ適用する① 遷移元のViewController側にCustomTransitionを利用した遷移に関する処理を適用させる処理を記載する形 ★UIViewControllerTransitioningDelegateの適用と遷移時のアクションの設定例 CustomTransitionのクラスを適用するための下準備 遷移元→遷移先への遷移タイミングでtransitionDelegateの宣言 UIViewControllerTransitioningDelegateの記載のみ (処理は遷移元のViewController)【遷移先の設定】
- 9. /** * Modal遷移時の実装参考：iOS Animation Tutorial: Custom View Controller Presentation Transitions * https://www.raywenderlich.com/113845/ios-animation-tutorial-custom-view-controller-presentation-transitions */ //進む場合のアニメーションの設定を行う internal func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? { //遷移時にCustomTransitionで必要な値を引き渡す等の処理を行う transition.presenting = true return transition } //戻る場合のアニメーションの設定を行う internal func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? { transition.presenting = false return transition } ✦ UIViewControllerTransitioningDelegateプロトコルを適用 CustomTransitionをModal遷移へ適用② present / dismissを判定する設定をCustomTransitionのクラス内で管理できるようにしておくのがポイント ★animationControllerメソッドでpresent & dismiss時の動きを設定する CustomTransitionクラス内のメンバ変数：presenting(Bool型)で決定【遷移の方向（present/dismiss）】
- 12. ✦ Push / Pop時のアニメーションをカスタマイズするケース UINavigationBar + CustomTransition① Push / Pop時にCustomTransitionを適用させるために独自のUINavigetionに関するクラスを実装しておく ★遷移アニメーションの実体クラス ＆ NavigationControllerを継承した適用するクラス TransitionController.swift TransitionNavigationController.swift AppDelegate.swift NavigationControllerの遷移（Push/Pop）をする際にはCustomTransitionが適用される形にする 遷移アニメーションの実体を実装するクラス 状態（Push / Pop）管理用メンバ変数: forward と遷移の際にアニメーションをする画像情報を 引き渡すロジックが実装されている。 UINavigationControllerを継承 & UINavigationControllerDelegateプロトコルを適用したクラス //UINavigationControllerでUIViewControllerAnimatedTransitioningを実装した独自アニメーションを使用する際に使用する internal func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? { … } rootViewControllerの設定時にTransitionNavigationControllerクラスを適用させる（今回は全体に適用） 【この実装のポイントとなるメソッド】 ※この部分の設定は実装や設計次第で行う
- 13. ✦ UIViewControllerAnimatedTransitioningの独自アニメーション適用 UINavigationBar + CustomTransition② TransitionControllerの内容はPush / Pop時の処理を分けて画像が浮き上がって拡大 / 縮小する形にする ★Push / Popでの画面遷移時にCustomTransition用のクラスを適用させる処理 //UINavigationControllerでUIViewControllerAnimatedTransitioningを実装した独自アニメーションを使用する際に使用する internal func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? { ����//TransitionControllerのインスタンスを作成する let transitionController = TransitionController() �//操作のenum(TransitionController内で定義)の値に応じてpushかpopかを決定する switch operation { case .push: transitionController.forward = true return transitionController case .pop: transitionController.forward = false return transitionController default: break } return nil } } TransitionController.swift (ポイント1)： 画面遷移を行うメソッドが実行される タイミングでUICollectionViewCellの タップで選択した画像を作成する (ポイント2)： 画面遷移のアニメーションが行われる タイミングで作成した画像の大きさに 関するアニメーションを行う
- 17. ✦ 文字列データ＆フォントの種類と大きさから文字の横幅を取得 ナビゲーション部分のUIがシンプルな場合には、アニメーションや色を工夫することで目立つポイントになる ★UIScrollViewに敷き詰めたUIButtonのテキストを元に下線の大きさを決定する おまけ：詳細画面の文字幅に合わせた下線ナビ実装 //取得したテキスト文字列とフォントから文字列の幅を取得する fileprivate func getCharacterWidthValue(string: String, font: UIFont) -> Int { let size = string.size(attributes: [NSFontAttributeName : font]) return Int(size.width) } //ボタン表示テキストとスクロールビューの表示エリアから動くラベル（下線）のX座標を取得する /** * 引数は下記の通り： * scrollViewLayoutWidth(Int型) : ボタンを入れたスクロールビューの幅 * separateValue(Int型) : ボタンを入れたスクロールビューの幅で表示されるボタンの数 * page(Int型) : 現在のページ番号(0..n) * charWidth(Int型) : ボタンに表示している文字の幅 */ fileprivate func getMovingLabelPosX(scrollViewLayoutWidth: Int, separateValue: Int, page: Int, charWidth: Int) -> Int { //★詳細は省略 (動くラベルのX座標位置) = (ボタンを入れたスクロールビューの幅 ÷ ボタン数 ÷ 2) + (ボタンを入れたスクロールビュー の幅 ÷ ボタン数 × 現在のページ番号) - (ボタンに表示している文字の幅 ÷ 2) return positionX } ターゲットの文字列に.sizeメソッドを適用する UIScrollView内に配置した動くラベルのアニメーション処理の中にX座標の位置を決めるメソッドを記載する形にする ※下線ナビゲーション部分以外につな ぎ部分ではアニメーションを仕込んだ 箇所の一覧。 ・NavigationBar等を隠す ・ポップアップ表示時 ・CollectionViewスクロール時