在 Swift 4 中的 TabBar 下方绘制关闭过渡
Drawing a dismiss transition beneath the TabBar in Swift 4
我正在尝试实现与 iOS 11 App Store 中使用的类似的 CardView。为此，我使用了一个 GitHub 项目 (https://github.com/PaoloCuscela/Cards) 并对其进行了一些微调。
问题在于，当从呈现的详细信息视图转换回初始视图（位于 TabBarController 内）时，卡片被绘制在 TabBar 的前面（参见视频 https://youtu.be/qDb3JoISTdw），这给出了整个过渡有点'glitchy'的样子。
这是转换代码 class 我使用：
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 中进行过转换，希望有人能告诉我如何在这里实现我想要的。
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)
})
}
}
产生如下动画：
我正在尝试实现与 iOS 11 App Store 中使用的类似的 CardView。为此，我使用了一个 GitHub 项目 (https://github.com/PaoloCuscela/Cards) 并对其进行了一些微调。
问题在于，当从呈现的详细信息视图转换回初始视图（位于 TabBarController 内）时，卡片被绘制在 TabBar 的前面（参见视频 https://youtu.be/qDb3JoISTdw），这给出了整个过渡有点'glitchy'的样子。
这是转换代码 class 我使用：
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 中进行过转换，希望有人能告诉我如何在这里实现我想要的。
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)
})
}
}
产生如下动画：