View Controller Transition實(shí)現(xiàn)京東加購物車效果
這篇文章中我們主要來敘述一下上述動(dòng)畫效果的實(shí)現(xiàn)方案。主要涉及 View Controller 轉(zhuǎn)場(chǎng)動(dòng)畫的知識(shí)。
我搭建了個(gè)人站點(diǎn),那里有更多內(nèi)容,請(qǐng)多多指教。點(diǎn)我哦?。。?/p>
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 提供 Animator extension 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í)間苦差事。如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Android實(shí)現(xiàn)仿淘寶購物車增加和減少商品數(shù)量功能demo示例
- Android實(shí)現(xiàn)的仿淘寶購物車demo示例
- Android實(shí)現(xiàn)購物車功能
- iOS9 系統(tǒng)分享調(diào)用之UIActivityViewController
- iOS開發(fā)中ViewController的頁面跳轉(zhuǎn)和彈出模態(tài)
- angularjs學(xué)習(xí)筆記之三大模塊(modal,controller,view)
- iOS開發(fā)中的ViewController轉(zhuǎn)場(chǎng)切換效果實(shí)現(xiàn)簡(jiǎn)介
相關(guān)文章
Android AsyncTask完全解析 帶你從源碼的角度徹底理解
這篇文章主要是針對(duì)Android AsyncTask進(jìn)行完全解析,帶你從源碼的角度徹底理解,感興趣的小伙伴們可以參考一下2016-04-04Android實(shí)現(xiàn)基于ZXing快速集成二維碼掃描功能
這篇文章主要為大家詳細(xì)介紹了Android二維碼掃描ZXing快速項(xiàng)目集成的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07Flutter底部導(dǎo)航欄的實(shí)現(xiàn)方式
這篇文章主要為大家詳細(xì)介紹了Flutter底部導(dǎo)航欄的實(shí)現(xiàn)方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02Android Activity的啟動(dòng)過程源碼解析
這篇文章主要介紹了Android Activity的啟動(dòng)過程源碼解析,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05Android學(xué)習(xí)筆記之應(yīng)用單元測(cè)試實(shí)例分析
這篇文章主要介紹了Android學(xué)習(xí)筆記之應(yīng)用單元測(cè)試,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android單元測(cè)試的實(shí)現(xiàn)原理與具體步驟,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11Android ViewPager動(dòng)態(tài)加載問題
這篇文章主要介紹了Android ViewPager動(dòng)態(tài)加載問題,需要的朋友可以參考下2017-03-03Android應(yīng)用中Back鍵的監(jiān)聽及處理實(shí)例
在Android應(yīng)用中處理Back鍵按下事件,多種實(shí)現(xiàn)方法如下,感興趣的朋友可以了解下哈2013-06-06Android判斷服務(wù)是否運(yùn)行及定位問題實(shí)例分析
這篇文章主要介紹了Android判斷服務(wù)是否運(yùn)行及定位問題,以實(shí)例形式較為詳細(xì)的分析了Android判斷服務(wù)運(yùn)行狀態(tài)及獲取經(jīng)緯度的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09