中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

View Controller Transition實現京東加購物車效果

發布時間:2020-09-12 10:54:07 來源:腳本之家 閱讀:165 作者:世俗孤島 欄目:移動開發

這篇文章中我們主要來敘述一下上述動畫效果的實現方案。主要涉及 View Controller 轉場動畫的知識。

View Controller Transition實現京東加購物車效果

我搭建了個人站點,那里有更多內容,請多多指教。點我哦!!!

Presenting a View Controller

顯示一個 View Controller 主要有一下幾種方式:

  • 使用 segues 自動顯示 View Controller;
  • 使用 showViewController:sender: 和 showDetailViewController:sender: 方法顯示 View Controller;
  • 調用 presentViewController:animated:completion: 方法依模態形式顯示 View Controller

通過上述方式,我們可以將一個 View Controller 顯示出來,而對于顯示地形式,我們可以使用 UIKit 中預定義的形式,也可以自定義(即自定義轉場動畫)。

Customizing the Transition Animations

自定義轉場動畫中,主要包含以下幾個組件:

  • Presenting View Controller(正在顯示的 View Controller)
  • Animator(動畫管理者)
  • Presented View Controller(要顯示的 View Controller)
  • Transitioning Delegate Object(轉場代理,用來提供 Animator 對象)

實現自定義轉場動畫,通常按照以下幾個步驟來完成

  • 創建 Presented View Controller;
  • 創建 Animator;
  • 設置 Presented View Controller 的 transitioningDelegate 屬性,并實現 UIViewControllerTransitioningDelegate 提供 Animator 對象;
  • 在 Presenting View Controller 中調用 presentViewController:animated:completion: 顯示 Presented View Controller;

Presented View Controller

這里,我們將 Presented View Controller 本身作為其轉場代理,你也可以使用單獨的代理對象。

class PresentedViewController: UIViewController {
 let imageView = UIImageView(image: UIImage(named: "jd_add.jpg"))
 override func viewDidLoad() {
  super.viewDidLoad()
  // 1.設置 transitioningDelegate(轉場代理)
  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 作為轉場動畫的管理者,主要負責 Presenting 和 Dismissing 動畫效果。

動畫時長

/// 轉場動畫時長
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
 return TimeInterval(0.5)
}

執行動畫

/// 執行轉場動畫
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
 switch type {
 case .Present:
  present(transitionContext: transitionContext)
 case .Dismiss:
  dismiss(transitionContext: transitionContext)
 }
}

Presenting 動畫

/// Presenting 動畫
func present(transitionContext: UIViewControllerContextTransitioning) {
 /** 1.從轉場上下文中取出 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.設置 Presenting View Controller 所顯示內容的屬性 */
 // 對 presentingVC 的視圖內容截屏,用于 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.設置 Presented View Controller 所顯示內容的屬性 */
 presentedVC.view.frame = CGRect(x: 0, y: containerView.bounds.height, width: containerView.bounds.width, height: containerView.bounds.height)
 containerView.addSubview(presentedVC.view)
 /** 4.設置 Presenting 轉場動畫 */
 UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
  // 改變 presentingVCViewSnapshot 的 layer 的 transform,使其繞 X軸 旋轉,并改變大小
  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 轉場動畫結束(很重要)
  transitionContext.completeTransition(true)
 }
}

Dismissing 動畫

/// Dismissing 動畫
func dismiss(transitionContext: UIViewControllerContextTransitioning) {
 /** 1.從轉場上下文中取出容器視圖、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.設置 Dismissing 轉場動畫 */
 UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
  // 將 presentedVCViewSnapshot 的 transform 恢復到初始值
  presentedVCViewSnapshot.layer.transform = CATransform3DIdentity
  // 將 presentedVC 的 view 的 transform 恢復到初始值
  presentingVC.view.transform = CGAffineTransform.identity
 }) { (finished) in
  // 使 presentedVC 的 view 顯示出來,并隱藏其截屏
  presentedVC.view.isHidden = false
  presentedVCViewSnapshot.removeFromSuperview()
  // 告知 UIKit Dismissing 轉場動畫結束(很重要)
  transitionContext.completeTransition(true)
 }
}

Transitioning Delegate

// MARK: - 2.實現 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)
}

關于 View Controller Transition 就介紹到這里,你應該熟悉了其使用方法,至于博客中的動畫效果,我想就沒辦法深究了,這是一個花費時間苦差事。如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

银川市| 高清| 泾川县| 安新县| 文安县| 碌曲县| 共和县| 延津县| 天长市| 收藏| 兴山县| 辛集市| 四川省| 大兴区| 平阳县| 灵山县| 华亭县| 尼玛县| 藁城市| 洪洞县| 陆川县| 临颍县| 砚山县| 南华县| 阿合奇县| 白朗县| 琼结县| 渑池县| 新昌县| 绥中县| 渭南市| 邹平县| 通道| 济宁市| 荆门市| 米泉市| 湘阴县| 平泉县| 驻马店市| 白朗县| 伽师县|