在 Swift 4 中的 TabBar 下绘制关闭过渡

Posted 2023-03-15

【中文标题】在 Swift 4 中的 TabBar 下绘制关闭过渡

【英文标题】：Drawing a dismiss transition beneath the TabBar in Swift 4

【发布时间】：2018-06-21 11:25:14

【问题描述】：

我正在尝试实现类似于 ios 11 App Store 中使用的 CardViews。为此，我使用了一个 GitHub 项目 (https://github.com/PaoloCuscela/Cards) 并对其进行了一些调整。

问题是，当从呈现的详细视图转换回初始视图（放置在 TabBarController 内）时，卡片被绘制在 TabBar 前面（参见视频https://youtu.be/qDb3JoISTdw），这为整个转换提供了一种“故障”外观。

这是我使用的过渡类的代码：

import UIKit

class Animator: NSObject, UIViewControllerAnimatedTransitioning 


fileprivate var presenting: Bool
fileprivate var velocity = 0.6
var bounceIntensity: CGFloat = 0.07
var card: Card

init(presenting: Bool, from card: Card) 
    self.presenting = presenting
    self.card = card
    super.init()


func animateTransition(using transitionContext: UIViewControllerContextTransitioning) 

    // Animation Context Setup
    let container = transitionContext.containerView
    let to = transitionContext.viewController(forKey: .to)!
    let from = transitionContext.viewController(forKey: .from)!
    container.addSubview(to.view)
    container.addSubview(from.view)


    guard presenting else 

        // Detail View Controller Dismiss Animations
        card.isPresenting = false

        let detailVC = from as! DetailViewController
        let cardBackgroundFrame = detailVC.scrollView.convert(card.backgroundIV.frame, to: nil)
        let bounce = self.bounceTransform(cardBackgroundFrame, to: card.originalFrame)

        // Blur and fade with completion
        UIView.animate(withDuration: velocity/2, delay: 0, options: .curveEaseOut, animations: 
            detailVC.blurView.alpha = 0

        , completion: nil)
        UIView.animate(withDuration: velocity, delay: 0, options: .curveEaseOut, animations: 
            detailVC.snap.alpha = 0
            self.card.backgroundIV.layer.cornerRadius = self.card.cardRadius

        , completion:  _ in

            detailVC.layout(self.card.originalFrame, isPresenting: false, isAnimating: false)
            self.card.addSubview(detailVC.card.backgroundIV)
            transitionContext.completeTransition(true)
        )

        // Layout with bounce effect
        UIView.animate(withDuration: velocity/2, delay: 0, options: .curveEaseOut, animations: 

            detailVC.layout(self.card.originalFrame, isPresenting: false, transform: bounce)
            self.card.delegate?.cardIsHidingDetail?(card: self.card)

        )  _ in UIView.animate(withDuration: self.velocity/2, delay: 0, options: .curveEaseOut, animations: 

            detailVC.layout(self.card.originalFrame, isPresenting: false)
            self.card.delegate?.cardIsHidingDetail?(card: self.card)
            )
        
        return

    

    // Detail View Controller Present Animations
    card.isPresenting = true

    let detailVC = to as! DetailViewController
    let bounce = self.bounceTransform(card.originalFrame, to: card.backgroundIV.frame)

    container.bringSubview(toFront: detailVC.view)
    detailVC.card = card
    detailVC.layout(card.originalFrame, isPresenting: false)

    // Blur and fade with completion
    UIView.animate(withDuration: velocity/2, delay: 0, options: .curveEaseOut, animations: 
        detailVC.blurView.alpha = 1

    , completion: nil)

    UIView.animate(withDuration: velocity, delay: 0, options: .curveEaseOut, animations: 

        self.card.transform = CGAffineTransform.identity    // Reset card identity after push back on tap
        detailVC.snap.alpha = 1
        self.card.backgroundIV.layer.cornerRadius = 0

    , completion:  _ in

        detailVC.layout(self.card.originalFrame, isPresenting: true, isAnimating: false, transform: .identity)
        transitionContext.completeTransition(true)
    )

    // Layout with bounce effect
    UIView.animate(withDuration: velocity/2, delay: 0, options: .curveEaseOut, animations: 

        detailVC.layout(detailVC.view.frame, isPresenting: true, transform: bounce)
        self.card.delegate?.cardIsShowingDetail?(card: self.card)

    )  _ in UIView.animate(withDuration: self.velocity/2, delay: 0, options: .curveEaseOut, animations: 

        detailVC.layout(detailVC.view.frame, isPresenting: true)
        self.card.delegate?.cardIsShowingDetail?(card: self.card)

        )
    



private func bounceTransform(_ from: CGRect, to: CGRect ) -> CGAffineTransform 

    let old = from.center
    let new = to.center

    let xDistance = old.x - new.x
    let yDistance = old.y - new.y

    let xMove = -( xDistance * bounceIntensity )
    let yMove = -( yDistance * bounceIntensity )

    return CGAffineTransform(translationX: xMove, y: yMove)



func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval 
    return velocity

我没有在 iOS 中进行过过渡，希望有人能告诉我如何在这里实现我想要的。

【参考方案1】：

UITabBarController 使用自动调整大小掩码完成所有布局。在这种情况下，您可以获取tabBar 将其添加到容器视图，执行动画然后将其添加回它的根视图。例如，使用 卡片 动画，您可以将 animateTransition(using transitionContext: UIViewControllerContextTransitioning) 更改为：

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) 

    // Animation Context Setup
    let container = transitionContext.containerView
    let to = transitionContext.viewController(forKey: .to)!
    let from = transitionContext.viewController(forKey: .from)!
    container.addSubview(to.view)
    container.addSubview(from.view)

    // If going to tab bar controller
    // Add tab bar above view controllers
    // Turn off interactions
    if !presenting, let tabController = to as? UITabBarController 
        tabController.tabBar.isUserInteractionEnabled = false
        container.addSubview(tabController.tabBar)
    


    guard presenting else 

        // Detail View Controller Dismiss Animations
        card.isPresenting = false

        let detailVC = from as! DetailViewController
        let cardBackgroundFrame = detailVC.scrollView.convert(card.backgroundIV.frame, to: nil)
        let bounce = self.bounceTransform(cardBackgroundFrame, to: card.originalFrame)

        // Blur and fade with completion
        UIView.animate(withDuration: velocity, delay: 0, options: .curveEaseOut, animations: 

            detailVC.blurView.alpha = 0
            detailVC.snap.alpha = 0
            self.card.backgroundIV.layer.cornerRadius = self.card.cardRadius

        , completion:  _ in

            detailVC.layout(self.card.originalFrame, isPresenting: false, isAnimating: false)
            self.card.addSubview(detailVC.card.backgroundIV)

            // Add tab bar back to tab bar controller's root view
            if let tabController = to as? UITabBarController 
                tabController.tabBar.isUserInteractionEnabled = true
                tabController.view.addSubview(tabController.tabBar)
            
            transitionContext.completeTransition(true)
        )

        // Layout with bounce effect
        UIView.animate(withDuration: velocity/2, delay: 0, options: .curveEaseOut, animations: 

            detailVC.layout(self.card.originalFrame, isPresenting: false, transform: bounce)
            self.card.delegate?.cardIsHidingDetail?(card: self.card)

        )  _ in UIView.animate(withDuration: self.velocity/2, delay: 0, options: .curveEaseOut, animations: 

            detailVC.layout(self.card.originalFrame, isPresenting: false)
            self.card.delegate?.cardIsHidingDetail?(card: self.card)
            )
        
        return

    

    // Detail View Controller Present Animations
    card.isPresenting = true

    let detailVC = to as! DetailViewController
    let bounce = self.bounceTransform(card.originalFrame, to: card.backgroundIV.frame)

    container.bringSubview(toFront: detailVC.view)
    detailVC.card = card
    detailVC.layout(card.originalFrame, isPresenting: false)

    // Blur and fade with completion
    UIView.animate(withDuration: velocity, delay: 0, options: .curveEaseOut, animations: 

        self.card.transform = CGAffineTransform.identity    // Reset card identity after push back on tap
        detailVC.blurView.alpha = 1
        detailVC.snap.alpha = 1
        self.card.backgroundIV.layer.cornerRadius = 0

    , completion:  _ in

        detailVC.layout(self.card.originalFrame, isPresenting: true, isAnimating: false, transform: .identity)
        transitionContext.completeTransition(true)
    )

    // Layout with bounce effect
    UIView.animate(withDuration: velocity/2, delay: 0, options: .curveEaseOut, animations: 

        detailVC.layout(detailVC.view.frame, isPresenting: true, transform: bounce)
        self.card.delegate?.cardIsShowingDetail?(card: self.card)

    )  _ in UIView.animate(withDuration: self.velocity/2, delay: 0, options: .curveEaseOut, animations: 

        detailVC.layout(detailVC.view.frame, isPresenting: true)
        self.card.delegate?.cardIsShowingDetail?(card: self.card)

        )
    

这会产生如下动画：

【讨论】：

非常感谢，在物理设备上的工作就像一个魅力！不知何故并没有改变模拟器上的任何东西，我想知道这是怎么回事？