Swift Uiview background animation not working

Question

Im making this view where the bottomsheet will pop up and the background view will doing to fade in, and when i hit the button to dismiss the background will fade out.

i actually have done the half part where when the bottomsheet is pop up it comes from bottom to top animation and the background color will fade in, but its different case when i wanna dismiss the bottomsheet, the background animation not doing this fade out animation and rather doing the top to bottom animation, anybody know why i get this bug?

this is my code

let fullView: CGFloat = 0
let screenSize: CGRect = UIScreen.main.bounds

@IBOutlet weak var Text: UILabel!
@IBOutlet weak var topView: UIView!
@IBOutlet weak var vieww: UIView!
@IBOutlet weak var botView: UIView!
@IBOutlet weak var Button: UIButton!

@objc func pressed(sender : Any) {
    
    var closeView = screenSize.height
   
    print(closeView)
    
    UIView.animate(withDuration: 0.4) { [weak self] in
        let frame = self?.view.frame
         self?.view.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
        self?.view.frame = CGRect(x: 0, y: closeView, width: frame!.width, height: frame!.height)
    }
    
    UIView.animate(withDuration: 0.4, delay: 0.35, options: .curveEaseOut, animations: {
        self.topView.alpha = 0.0
    }, completion: nil)
    
    isShown = false

}

override func viewDidLoad() {
    super.viewDidLoad()
    
    button()
   
    self.topView.alpha = 0.0
    
    vieww.layer.cornerRadius = 20
    vieww.layer.borderWidth = 0.5
    vieww.layer.borderColor = UIColor(red:222/255, green:225/255, blue:227/255, alpha: 1).cgColor
    vieww.clipsToBounds = true
    
    botView.layer.masksToBounds = false
    botView.layer.shadowColor = UIColor.black.cgColor
    botView.layer.shadowOpacity = 0.14
    botView.layer.shadowOffset = CGSize(width: 0, height: 0)
    botView.layer.shadowRadius = 2.7
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    
    //when the animation is popping up
    
    UIView.animate(withDuration: 0.4) { [weak self] in
        let frame = self?.view.frame
        //            let yComponent = UIScreen.main.bounds.height - 896
        let yComponent = self?.fullView
        self?.view.frame = CGRect(x: 0, y: yComponent!, width: frame!.width, height: frame!.height)
    }
        
        UIView.animate(withDuration: 0.4, delay: 0.35, options: .curveEaseOut, animations: {
            self.topView.alpha = 0.5
        }, completion: nil)

}

func button() {
    
    Button.addTarget(self, action: #selector(pressed), for: .touchUpInside)
}

i still doesnt know why is this happen, im guessing its because of the dismiss animation and the fade out animation wont do anything because the dismiss animation get called first...but it still doesnt make any sense because then i try to pop in the bottom sheet its working and now i try to use the same method and its not working.....any idea? Thanks:)

Answer 1

Problem is in with your pressed method -

You are changing the main view's frame by providing y=closeView(which is the size of the screen height). Your popover is getting shifted as your whole main view is going down.

topView is also shifting down with main view

@objc func pressed(sender : Any) {
  
  let closeView = screenSize.height
 
  print(closeView)
  
  UIView.animate(withDuration: 0.4) { [weak self] in
      let frame = self?.view.frame
       self?.view.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
      self?.view.frame = CGRect(x: 0, y: closeView, width: frame!.width, height: frame!.height) //Wrong
  }


UIView.animate(withDuration: 0.4, delay: 0.35, options: .curveEaseOut, animations: {
      self.topView.alpha = 0.0
  }, completion: nil)
  

}

Solution -

self?.<bottomView>.frame = CGRect(x: 0, y: closeView, width: frame!.width, height: frame!.height) //Change bottom view with the bottom subview object which you want to push at bottom

Answer 2

You need to use completion handler for hiding the view like this

 UIView.animateKeyframes(withDuration: 0.4, delay: 0.35, options: .curveEaseOut, animations: {
       self.topView.alpha = 0.0
    }) { _ in
      isShown = false
    }