Contenu connexe
Similaire à カスタムトランジションやアニメーションを活用した「写真を生かすUI」のサンプル (16)
Plus de Fumiya Sakai (20)
カスタムトランジションやアニメーションを活用した「写真を生かす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を適用
このクラスのメンバ変数として遷移元 ⇄ 遷移先を管理する変数を作る【しておくと良いもの】
- 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)】
- 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スクロール時