Create Animated UIView from top to bottom with corner radius

Question

I developed an iOS app, and I have an animation in it, I would like to create an animation like this .

I tried:

blueView.backgroundColor = .blue
let duration = 1
let radius = blueView.frame.height / 2

self.blueView.frame.size = CGSize(width:   50, height:   50)
blueView.layer.cornerRadius = radius
if #available(iOS 11, *) {
    UIView.animate(withDuration: TimeInterval(duration), animations: {
       self.blueView.frame.size = CGSize(width:   self.view.frame.width, height:   self.view.frame.height)    
    }, completion: { _ in
                        UIView.animate(withDuration: TimeInterval(duration), animations: {

                            self.blueView.layer.cornerRadius = 0
                        })
    })
}

But I didn't achieve what I want, any idea or help to get that?

Answer 1

Looks like you're missing updating the blueView radius in your animation as a start. Below are some quick changes/additions to get close to the animation that you mentioned. I added the view programmatically, and made minimal changes to your code.

let blueView: UIView = {
    // set starting position of view here
    let view = UIView(frame: CGRect(x: UIScreen.main.bounds.size.width , y: 0, width: 50, height: 50))
    view.backgroundColor = .blue
    view.layer.cornerRadius = view.frame.height / 2
    return view
}()

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.addSubview(blueView)
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    let duration: TimeInterval = 1

    if #available(iOS 11, *) {
        UIView.animate(withDuration: duration, animations: {
            // set blue view size to double the screen so it can cover full screen with corner radius
            self.blueView.frame.size = CGSize(width: self.view.frame.height * 2, height:   self.view.frame.height * 2)
            // update corder radius to equal new size
            self.blueView.layer.cornerRadius = self.view.frame.height
            // Set ending position of view here to offset new size and radius
            self.blueView.center = CGPoint(x: UIScreen.main.bounds.width, y: 0)
        }, completion: { _ in
            UIView.animate(withDuration: duration, animations: {
                self.blueView.frame.size = CGSize(width: self.view.frame.width, height:   self.view.frame.height)
                self.blueView.layer.cornerRadius = 0
                self.blueView.center = self.view.center
            })
        })
    }
}

I'm sure this can be done a different way, but I wanted to keep code close to what you started with in hopes that it helps you understand what I changed.