View Controller Transition實現(xiàn)京東加購物車效果
這篇文章中我們主要來敘述一下上述動畫效果的實現(xiàn)方案。主要涉及 View Controller 轉(zhuǎn)場動畫的知識。

我搭建了個人站點,那里有更多內(nèi)容,請多多指教。點我哦?。?!
Presenting a View Controller
顯示一個 View Controller 主要有一下幾種方式:
- 使用 segues 自動顯示 View Controller;
- 使用 showViewController:sender: 和 showDetailViewController:sender: 方法顯示 View Controller;
- 調(diào)用 presentViewController:animated:completion: 方法依模態(tài)形式顯示 View Controller
通過上述方式,我們可以將一個 View Controller 顯示出來,而對于顯示地形式,我們可以使用 UIKit 中預(yù)定義的形式,也可以自定義(即自定義轉(zhuǎn)場動畫)。
Customizing the Transition Animations
自定義轉(zhuǎn)場動畫中,主要包含以下幾個組件:
- Presenting View Controller(正在顯示的 View Controller)
- Animator(動畫管理者)
- Presented View Controller(要顯示的 View Controller)
- Transitioning Delegate Object(轉(zhuǎn)場代理,用來提供 Animator 對象)
實現(xiàn)自定義轉(zhuǎn)場動畫,通常按照以下幾個步驟來完成
- 創(chuàng)建 Presented View Controller;
- 創(chuàng)建 Animator;
- 設(shè)置 Presented View Controller 的 transitioningDelegate 屬性,并實現(xiàn) UIViewControllerTransitioningDelegate 提供 Animator 對象;
- 在 Presenting View Controller 中調(diào)用 presentViewController:animated:completion: 顯示 Presented View Controller;
Presented View Controller
這里,我們將 Presented View Controller 本身作為其轉(zhuǎn)場代理,你也可以使用單獨的代理對象。
class PresentedViewController: UIViewController {
let imageView = UIImageView(image: UIImage(named: "jd_add.jpg"))
override func viewDidLoad() {
super.viewDidLoad()
// 1.設(shè)置 transitioningDelegate(轉(zhuǎn)場代理)
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)場動畫的管理者,主要負(fù)責(zé) Presenting 和 Dismissing 動畫效果。
動畫時長
/// 轉(zhuǎn)場動畫時長
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return TimeInterval(0.5)
}
執(zhí)行動畫
/// 執(zhí)行轉(zhuǎn)場動畫
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
switch type {
case .Present:
present(transitionContext: transitionContext)
case .Dismiss:
dismiss(transitionContext: transitionContext)
}
}
Presenting 動畫
/// Presenting 動畫
func present(transitionContext: UIViewControllerContextTransitioning) {
/** 1.從轉(zhuǎn)場上下文中取出 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)容的屬性 */
// 對 presentingVC 的視圖內(nèi)容截屏,用于 presentedVC 顯示出來時的背景
guard let presentingVCViewSnapshot = presentingVC.view.snapshotView(afterScreenUpdates: false) else {
return
}
// 隱藏 presentingVC 的 view,并將其截屏添加到 containerView 中
presentingVC.view.isHidden = true
containerView.addSubview(presentingVCViewSnapshot)
// 改變 presentingVCViewSnapshot 的焦點
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)場動畫 */
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)場動畫結(jié)束(很重要)
transitionContext.completeTransition(true)
}
}
Dismissing 動畫
/// Dismissing 動畫
func dismiss(transitionContext: UIViewControllerContextTransitioning) {
/** 1.從轉(zhuǎn)場上下文中取出容器視圖、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)場動畫 */
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)場動畫結(jié)束(很重要)
transitionContext.completeTransition(true)
}
}
Transitioning Delegate
// MARK: - 2.實現(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)該熟悉了其使用方法,至于博客中的動畫效果,我想就沒辦法深究了,這是一個花費時間苦差事。如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
總結(jié)Android中多線程更新應(yīng)用的頁面信息的方式
這篇文章主要介紹了總結(jié)Android中多線程更新應(yīng)用的頁面信息的方式,文中共總結(jié)了runOnUiThread、Handler、AsyncTask異步以及View直接在UI線程中更新的方法,需要的朋友可以參考下2016-02-02
Android如何判斷一個點在不在多邊形區(qū)域內(nèi)
這篇文章主要為大家詳細(xì)介紹了Android判斷一個點在不在多邊形區(qū)域內(nèi)的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-05-05
Android實現(xiàn)自定義帶文字和圖片Button的方法
這篇文章主要介紹了Android實現(xiàn)自定義帶文字和圖片Button的方法,涉及Android針對Button按鈕的布局與設(shè)計技巧,需要的朋友可以參考下2015-05-05
Android 判斷某個Activity 是否在前臺運行的實例
下面小編就為大家分享一篇Android 判斷某個Activity 是否在前臺運行的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Android編程實現(xiàn)分頁加載ListView功能示例
這篇文章主要介紹了Android編程實現(xiàn)分頁加載ListView功能,結(jié)合實例形式分析了listview分頁加載的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2017-02-02
Android開發(fā)技巧之ViewStub控件惰性裝載
布局文件中的控件并不一定在程序啟動時全都用到,有一些控件只在特定的情況下才會被使用到;我們急需一種機制來改變<include>標(biāo)簽的這種行為,只在需要時裝載控件。這種機制就是本節(jié)要介紹的ViewStub控件2013-01-01
Android viewpage實現(xiàn)禁止滑動的功能
這篇文章主要介紹了Android viewpage實現(xiàn)禁止滑動的功能的相關(guān)資料,這里附有實現(xiàn)的實例代碼,主要還是重新 ViewPage 這個類,需要的朋友可以參考下2016-11-11

