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

Question

我正在尝试实现类似于 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 中进行过转换，希望有人能告诉我如何在这里实现我想要的。

标签： iosswiftxcodeios-animations

Answer 1

UITabBarController使用自动调整大小的蒙版完成所有布局。在这种情况下，您可以tabBar将其添加到容器视图中，执行动画然后将其添加回它的根视图。例如，使用Cards动画，您可以将其更改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)

        })
    }

}

这会产生如下动画：