I'm trying to implement CardViews similar to the ones used in the iOS 11 App Store. In order to do so, I'm using a GitHub project (https://github.com/PaoloCuscela/Cards) and tweaked it a bit.
The problem is that when transitioning back from the presented Detail View to the initial view (which is placed inside a TabBarController) the card is drawn in front of the TabBar (see video https://youtu.be/qDb3JoISTdw) which gives the whole transition a kind of 'glitchy' look.
This is the Code of the transitioning class I use:
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
}
}
I haven't worked with transitioning in iOS and hope someone can tell me how to achieve what I want here.
UITabBarController does all of its layout using autoresizing masks. That being the case you can grab the tabBar add it to the container view, perform the animation then add it back to it's root view. For example using the Cards animation you can change the animateTransition(using transitionContext: UIViewControllerContextTransitioning) to:
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)
})
}
}
Which produces an animation like:
Related
I have a UIView that will change its height and position depending so it's always "stuck" to the keyboard. The problem is that there is a asynchronous animation when changing the textField, the rest works fine. Here is a video for a better understanding:
Animation
This happen even though I used UIResponder.keyboardAnimationCurveUserInfoKey for the animations.
Here are all the parts inside my code where I animate:
Notification-Handler in ViewController:
var keyboardHeight = CGFloat(0)
var duration: Any?
var curve: NSNumber?
//MARK: keyboardWillShow
#objc func keyboardWillShow(_ notification: Notification) {
if let keyboardFrame: NSValue = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
let keyboardRectangle = keyboardFrame.cgRectValue
self.keyboardHeight = keyboardRectangle.height
let duration = notification.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey]
self.duration = duration
let curve = notification.userInfo?[UIResponder.keyboardAnimationCurveUserInfoKey]
self.curve = curve as? NSNumber
if self.wishViewIsVisible {
UIView.animate(withDuration: self.duration as! TimeInterval, delay: 0, options: UIView.AnimationOptions(rawValue: UIView.AnimationOptions.RawValue(truncating: self.curve!)), animations: {
self.wishConstraint.constant = -(self.wishView.frame.height + self.keyboardHeight)
self.view.layoutIfNeeded()
}, completion: nil)
}
}
}
Closure-Handler in ViewController:
self.wishView.onPriceButtonTapped = { [unowned self] height, isHidden in
if isHidden {
UIView.animate(withDuration: self.duration as! TimeInterval, delay: 0, options: UIView.AnimationOptions(rawValue: UIView.AnimationOptions.RawValue(truncating: self.curve!)), animations: {
self.wishConstraint.constant -= height
self.wishView.priceTextField.becomeFirstResponder()
self.view.layoutIfNeeded()
}, completion: nil)
} else {
UIView.animate(withDuration: self.duration as! TimeInterval, delay: 0, options: UIView.AnimationOptions(rawValue: UIView.AnimationOptions.RawValue(truncating: self.curve!)), animations: {
self.wishConstraint.constant += height
self.wishView.wishNameTextField.becomeFirstResponder()
self.view.layoutIfNeeded()
}, completion: nil)
}
}
Closure inside UIView:
#objc func priceButtonTapped(){
let priceViewIsHidden = priceView.isHidden
if priceViewIsHidden {
UIView.animate(withDuration: 0.25) {
self.priceView.alpha = 1
self.priceView.isHidden = false
self.theStackView.layoutIfNeeded()
}
self.onPriceButtonTapped?(priceView.frame.height, true)
} else {
UIView.animate(withDuration: 0.25) {
self.priceView.alpha = 0
self.priceView.isHidden = true
self.theStackView.layoutIfNeeded()
}
self.onPriceButtonTapped?(priceView.frame.height, false)
}
}
Does anyone know how I can fix this issue?
I know I am hard-coding the values inside the UIView but that is just to hide/show the arrangedSubview inside the StackView and this is not where the animation is off as you can see in the video. It only looks off when changing the textFields.
I am trying to create custom transition but I have a problem with "jumping" tableView. As you can see, just before transition, tableView hide under navigationBar which is wrong. How can I fix it?
Animation code:
UIView.animate(withDuration: transitionDuration, delay: 0, options: animationOptions, animations: { [weak self] in
guard let self = self else { return }
fromVC.view.transform = CGAffineTransform(scaleX: 0.9, y: 0.855)
fromVC.view.layer.cornerRadius = self.cornerRadius
fromVC.view.clipsToBounds = true
self.containerView.frame.origin.y -= self.containerHeight
self.topView.frame.origin.y -= self.containerHeight
self.backdropView.alpha = self.backdropAlpha
}, completion: { _ in
transitionContext.completeTransition(true)
})
and how it looks right now:
Inside a UIViewController, I call a .xib file and present it over the current UIView.
// initiate the pop up ad view and display it
let popUpAdView = PopUpAdViewController(nibName: "PopUpAdView", bundle: nil)
popUpAdView.displayIntoSuperView(view)
There is a button inside that .xib file that should remove itself from the screen when it's touched. However it doesn't perform so.
What exactly am I missing?
class PopUpAdViewController: UIViewController {
#IBOutlet weak var popUpAdView: UIView!
#IBOutlet weak var closeButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// adjust the view size from the device's screen size
let screenSize = UIScreen.mainScreen().bounds
view.frame = CGRectMake(0, 64, screenSize.width, screenSize.height-64)
// cosmetically adjust the view itself
view.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.6)
view.userInteractionEnabled = true
closeButton.userInteractionEnabled = true
// style the pop up ad view
popUpAdView.layer.cornerRadius = 5
popUpAdView.layer.shadowOpacity = 0.8
popUpAdView.layer.shadowOffset = CGSizeMake(0.0, 0.0)
closeButton.addTarget(self, action: #selector(removeOutOfSuperView), forControlEvents: .TouchUpInside)
}
func displayIntoSuperView(superView: UIView!) {
superView.addSubview(self.view)
// define the initial cosmetical values of the items
popUpAdView.transform = CGAffineTransformMakeScale(0.3, 0.3)
popUpAdView.alpha = 0.0
closeButton.alpha = 0.0
// animate...
UIView.animateWithDuration(0.8, delay: 0.0, options: .CurveEaseIn, animations: {
self.popUpAdView.alpha = 1.0
self.popUpAdView.transform = CGAffineTransformMakeScale(1.0, 1.0)
}) { (Bool) in
UIView.animateWithDuration(0.6, delay: 1.5, options: .CurveEaseIn, animations: {
self.closeButton.alpha = 1.0
}, completion: { (Bool) in
})
}
}
func removeOutOfSuperView() {
UIView.animateWithDuration(0.5, delay: 0.0, options: .CurveEaseIn, animations: {
self.closeButton.alpha = 0.0
self.popUpAdView.transform = CGAffineTransformMakeScale(0.1, 0.1)
}) { (finished) in
UIView.animateWithDuration(0.8, delay: 0.0, options: .CurveEaseIn, animations: {
self.view.alpha = 0.0
self.view.removeFromSuperview()
}, completion: nil)
}
}
#IBAction func closePopUpAdView(sender: AnyObject) {
print("Closing the pop up ad...")
removeOutOfSuperView()
}
}
Update
.xib structureL:
I have a label that is initially positioned at the center of the screen. It currently transitions from the the center to the right end of the screen then autoreverses back to its position. I'd like to have it begin another animateWithDuration so that it continues from the center return to the left position of the screen then autoreverse back to the position and sequentially loop from there on after.
I have already attempted and successfully made the first half work but I'm not sure how to continue to the second portion where it begins the center->left transition and loop.
Swift 2.0 Code:
func animateRight()
{
UIView.animateWithDuration(1.0, delay: 0.0, options: [ .Autoreverse, .CurveEaseInOut], animations: {
label.center.x = self.view.frame.width/2
}, completion: { finished in
if finished {
label.frame.origin.x = 0.0
animateLeft()
}
})
}
func animateLeft()
{
UIView.animateWithDuration(1.0, delay: 0.0, options: [ .Autoreverse, .CurveEaseInOut], animations: {
label.frame.origin.x = (self.view.frame.width/2) * -1
}, completion: { finished in
if finished {
label.center.x = self.view.frame.width/2
animateRight()
}
})
}
// Start process
animateRight()
You should call the same animate with duration method you create for animating to right and call in completion. Something like this:
func animateRight()
{
UIView.animate(withDuration: 1.0, delay: 0.0, options: [], animations: {
self.label.center.x = self.view.frame.width
}, completion: { finished in
if finished {
self.animateLeft()
}
})
}
func animateLeft()
{
UIView.animate(withDuration: 2.0, delay: 0.0, options: [ .autoreverse, .repeat, .curveEaseInOut, .beginFromCurrentState], animations: {
self.label.frame.origin.x = 0.0
}, completion: nil)
}
Call defaultSetup to start
When animationRight end, it will call animationLeft
When animationLeft end, it will call animationRight again to run animation loop
Here is the code:
func defaultSetup(){
self.animationRight()
}
func animationRight(){
let transform = CGAffineTransform(scaleX: 1.05, y: 1.05).rotated(by: .pi/180)
UIView.animate(withDuration: 3.0, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 3.0, options: [.allowUserInteraction, .repeat], animations: { [weak self] in
guard let `self` = self else { return }
self.vRight.transform = transform
}, completion: { [weak self] (done) in
guard let `self` = self else { return }
self.vRight.transform = .identity
self.animationLeft()
})
}
func animationLeft(){
let transform = CGAffineTransform(scaleX: 1.05, y: 1.05).rotated(by: .pi/180)
UIView.animate(withDuration: 3.0, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 3.0, options: [.allowUserInteraction], animations: { [weak self] in
guard let `self` = self else { return }
self.vLeft.transform = transform
}, completion: { [weak self] (done) in
guard let `self` = self else { return }
self.vLeft.transform = .identity
self.animationRight()
})
}
I saw a tutorial on Appcoda Transition ViewControllers transition a menu from up to bottom and I implemented it. Then, I tried to transition from bottom up using UIViewControllerContextTransitioning. But, doing it wrong cause I was setting the wrong values I think. Below is the code
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
//Get reference to our fromView, toView and the container view
let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)
let toView = transitionContext.viewForKey(UITransitionContextToViewKey)
//Setup the transform for sliding
let container = transitionContext.containerView()
let height = container?.frame.height
let moveDown = CGAffineTransformMakeTranslation(0, height! - 150)
let moveUp = CGAffineTransformMakeTranslation(0, -50)
//Add both views to the container view
if isPresenting {
toView?.transform = moveUp
snapShot = fromView?.snapshotViewAfterScreenUpdates(true)
container?.addSubview(toView!)
container?.addSubview(snapShot!)
}
//Perform the animation
UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.3, options: UIViewAnimationOptions(rawValue: 0), animations: {
if self.isPresenting {
self.snapShot?.transform = moveDown
toView?.transform = CGAffineTransformIdentity
} else {
self.snapShot?.transform = CGAffineTransformIdentity
fromView?.transform = moveUp
}
}, completion: {finished in
transitionContext.completeTransition(true)
if !self.isPresenting {
self.snapShot?.removeFromSuperview()
}
})
}
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
return duration
}
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
// Get reference to our fromView, toView and the container view
let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!
// Set up the transform we'll use in the animation
guard let container = transitionContext.containerView() else {
return
}
let moveUp = CGAffineTransformMakeTranslation(0, container.frame.height + 50)
let moveDown = CGAffineTransformMakeTranslation(0, -250)
// Add both views to the container view
if isPresenting {
toView.transform = moveUp
snapshot = fromView.snapshotViewAfterScreenUpdates(true)
container.addSubview(toView)
container.addSubview(snapshot!)
}
// Perform the animation
UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.8, options: [], animations: {
if self.isPresenting {
self.snapshot?.transform = moveDown
toView.transform = CGAffineTransformIdentity
} else {
self.snapshot?.transform = CGAffineTransformIdentity
fromView.transform = moveUp
}
}, completion: { finished in
transitionContext.completeTransition(true)
if !self.isPresenting {
self.snapshot?.removeFromSuperview()
}
})
}
This Should work. I checked out the tutorial you shared and you probably can't see the menu on the bottom because the way the MenuTableViewController.swift is set up on storyboard it is made so that the menu is always started from the top, so change that up and it should work perfectly fine. Let me know if you have any questions.