冬天已經(jīng)過去了，陽(yáng)光越來越暖洋洋的了。還記得上學(xué)的時(shí)候，老師總說“春天是播種的季節(jié)”，而我還沒在朋友圈許下什么愿望。一年了，不敢想象回首還能看到點(diǎn)什么，所以勇往直前。當(dāng)被俗世所擾，你是否也丟失了自己，忘卻了理想。

欲做精金美玉的人品，定從烈火中煅來；
思立掀天揭地的事功，須向薄冰上履過。

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計(jì)算培訓(xùn),高端軟件開發(fā)培訓(xùn),項(xiàng)目經(jīng)理培訓(xùn)

這篇博客中，我們主要來敘述一下上述動(dòng)畫效果的實(shí)現(xiàn)方案。主要涉及 View Controller 轉(zhuǎn)場(chǎng)動(dòng)畫的知識(shí)。

我搭建了個(gè)人站點(diǎn)，那里有更多內(nèi)容，請(qǐng)多多指教。點(diǎn)我哦?。?！

Presenting a View Controller

顯示一個(gè) View Controller 主要有一下幾種方式：

  • 使用 segues 自動(dòng)顯示 View Controller；

  • 使用 showViewController:sender: 和 showDetailViewController:sender: 方法顯示 View Controller；

  • 調(diào)用 presentViewController:animated:completion: 方法依模態(tài)形式顯示 View Controller

通過上述方式，我們可以將一個(gè) View Controller 顯示出來，而對(duì)于顯示地形式，我們可以使用 UIKit 中預(yù)定義的形式，也可以自定義（即自定義轉(zhuǎn)場(chǎng)動(dòng)畫）。

Customizing the Transition Animations

自定義轉(zhuǎn)場(chǎng)動(dòng)畫中，主要包含以下幾個(gè)組件：

  • Presenting View Controller（正在顯示的 View Controller）

  • Animator（動(dòng)畫管理者）

  • Presented View Controller（要顯示的 View Controller）

  • Transitioning Delegate Object（轉(zhuǎn)場(chǎng)代理，用來提供 Animator 對(duì)象）

實(shí)現(xiàn)自定義轉(zhuǎn)場(chǎng)動(dòng)畫，通常按照以下幾個(gè)步驟來完成

  • 創(chuàng)建 Presented View Controller；

  • 創(chuàng)建 Animator；

  • 設(shè)置 Presented View Controller 的 transitioningDelegate 屬性，并實(shí)現(xiàn) UIViewControllerTransitioningDelegate 提供 Animator 對(duì)象；

  • 在 Presenting View Controller 中調(diào)用 presentViewController:animated:completion: 顯示 Presented View Controller；

Presented View Controller

這里，我們將 Presented View Controller 本身作為其轉(zhuǎn)場(chǎng)代理，你也可以使用單獨(dú)的代理對(duì)象。

class PresentedViewController: UIViewController {    let imageView = UIImageView(image: UIImage(named: "jd_add.jpg"))    override func viewDidLoad() {        super.viewDidLoad()        // 1.設(shè)置 transitioningDelegate（轉(zhuǎn)場(chǎng)代理）
        transitioningDelegate = self
        modalPresentationStyle = .custom
        view.addSubview(imageView)
    }    override func viewDidLayoutSubviews() {        super.viewDidLayoutSubviews()
        imageView.frame = CGRect(x: 0, y: 120, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height - 120)
    }    override func touchesBegan(_ touches: Set, with event: UIEvent?) {        self.dismiss(animated: true, completion: nil)
    }
}

Animator

Animator 作為轉(zhuǎn)場(chǎng)動(dòng)畫的管理者，主要負(fù)責(zé) Presenting 和 Dismissing 動(dòng)畫效果。

動(dòng)畫時(shí)長(zhǎng)

/// 轉(zhuǎn)場(chǎng)動(dòng)畫時(shí)長(zhǎng)func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {    return TimeInterval(0.5)
}

執(zhí)行動(dòng)畫

/// 執(zhí)行轉(zhuǎn)場(chǎng)動(dòng)畫func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {    switch type {    case .Present:
        present(transitionContext: transitionContext)    case .Dismiss:
        dismiss(transitionContext: transitionContext)
    }
}

Presenting 動(dòng)畫

/// Presenting 動(dòng)畫func present(transitionContext: UIViewControllerContextTransitioning) {    /** 1.從轉(zhuǎn)場(chǎng)上下文中取出 Presenting/Pressented View Controller 及容器視圖 */
    guard let presentingVC = transitionContext.viewController(forKey: .from) as? ViewController else {        return
    }    guard let presentedVC = transitionContext.viewController(forKey: .to) as? PresentedViewController else {        return
    }    let containerView = transitionContext.containerView    /** 2.設(shè)置 Presenting View Controller 所顯示內(nèi)容的屬性 */
    // 對(duì) presentingVC 的視圖內(nèi)容截屏，用于 presentedVC 顯示出來時(shí)的背景
    guard let presentingVCViewSnapshot = presentingVC.view.snapshotView(afterScreenUpdates: false) else {        return
    }    // 隱藏 presentingVC 的 view，并將其截屏添加到 containerView 中
    presentingVC.view.isHidden = true
    containerView.addSubview(presentingVCViewSnapshot)    // 改變 presentingVCViewSnapshot 的焦點(diǎn)
    presentingVCViewSnapshot.layer.anchorPoint = CGPoint(x: 0.5, y: 1)    // 更新 presentingVCViewSnapshot 的 frame
    presentingVCViewSnapshot.frame = presentingVC.view.frame    /** 3.設(shè)置 Presented View Controller 所顯示內(nèi)容的屬性 */
    presentedVC.view.frame = CGRect(x: 0, y: containerView.bounds.height, width: containerView.bounds.width, height: containerView.bounds.height)
    containerView.addSubview(presentedVC.view)    /** 4.設(shè)置 Presenting 轉(zhuǎn)場(chǎng)動(dòng)畫 */
    UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {        // 改變 presentingVCViewSnapshot 的 layer 的 transform，使其繞 X軸 旋轉(zhuǎn)，并改變大小
        presentingVCViewSnapshot.layer.transform.m34 = -1 / 100.0
        presentingVCViewSnapshot.layer.transform = presentingVCViewSnapshot.layer.transform = CATransform3DConcat(CATransform3DMakeRotation(CGFloat(0.1), 1, 0, 0), CATransform3DMakeScale(0.85, 0.95, 1))        // 改變 presentedVC 的 view 的 transform
        presentedVC.view.transform = CGAffineTransform(translationX: 0, y: -containerView.bounds.height)
    }) { (finished) in
        // 告知 UIKit Presenting 轉(zhuǎn)場(chǎng)動(dòng)畫結(jié)束（很重要）
        transitionContext.completeTransition(true)
    }
}

Dismissing 動(dòng)畫

/// Dismissing 動(dòng)畫func dismiss(transitionContext: UIViewControllerContextTransitioning) {    /** 1.從轉(zhuǎn)場(chǎng)上下文中取出容器視圖、Presenting/Pressented View Controller 及其 view 的截屏 */
    let containerView = transitionContext.containerView    guard let presentingVC = transitionContext.viewController(forKey: .from) as? PresentedViewController else {        return
    }    guard let presentedVC = transitionContext.viewController(forKey: .to) as? ViewController else {        return
    }    let subviewsCount = containerView.subviews.count
    let presentedVCViewSnapshot = containerView.subviews[subviewsCount - 2]    /** 2.設(shè)置 Dismissing 轉(zhuǎn)場(chǎng)動(dòng)畫 */
    UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {        // 將 presentedVCViewSnapshot 的 transform 恢復(fù)到初始值
        presentedVCViewSnapshot.layer.transform = CATransform3DIdentity
        // 將 presentedVC 的 view 的 transform 恢復(fù)到初始值
        presentingVC.view.transform = CGAffineTransform.identity
    }) { (finished) in
        // 使 presentedVC 的 view 顯示出來，并隱藏其截屏
        presentedVC.view.isHidden = false
        presentedVCViewSnapshot.removeFromSuperview()        // 告知 UIKit Dismissing 轉(zhuǎn)場(chǎng)動(dòng)畫結(jié)束（很重要）
        transitionContext.completeTransition(true)
    }
}

Transitioning Delegate

// MARK: - 2.實(shí)現(xiàn) UIViewControllerTransitioningDelegate 提供 Animatorextension PresentedViewController: UIViewControllerTransitioningDelegate {    /// Present
    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {        return MyAnimator(type: .Present)
    }    /// Dismiss
    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {        return MyAnimator(type: .Dismiss)
    }
}

Present

@IBAction func present() {    let presentedVC = PresentedViewController()
    present(presentedVC, animated: true, completion: nil)
}

關(guān)于 View Controller Transition 就介紹到這里，你應(yīng)該熟悉了其使用方法，至于博客中的動(dòng)畫效果，我想就沒辦法深究了，這是一個(gè)花費(fèi)時(shí)間苦差事。

我搭建了個(gè)人站點(diǎn)，那里有更多內(nèi)容，請(qǐng)多多指教。點(diǎn)我哦?。。?/a>



分類: iOS