Zoom in and zoom out a UIView from button position with animation

Question

I want to open a UIView on button click and view should be popup from button's initial position to the while screen same as image gets open in gallery. On click image the image get open from the clicked position and covers the whole screen. I want the same behaviour with UIView on button click. I've tried below code:

Initial position:

UIView.animate(withDuration: 0.9, delay: 0.0, options: .curveLinear, animations: {
    self.vwDetails.frame = CGRect(x: self.btnSelectedVendor.frame.origin.x, y: self.btnSelectedVendor.frame.origin.y, width: self.btnSelectedVendor.frame.width, height: self.btnSelectedVendor.frame.height)
}, completion: nil)

On button click:

UIView.animate(withDuration: 0.9, delay: 0.0, options: .curveLinear, animations: {
    self.vwDetails.frame = CGRect(x: self.vwContainer.frame.origin.x, y: self.vwContainer.frame.origin.y, width: self.vwContainer.frame.width, height: self.vwContainer.frame.height)
}, completion: nil)

This code is not working for me.

Thanks in advance.

Answer 1

I think you need something like this:

self.vwDetails.frame = CGRect(x: self.vwContainer.frame.origin.x, y: self.vwContainer.frame.origin.y, width: self.vwContainer.frame.width, height: self.vwContainer.frame.height)

Firstly you setup initial position

UIView.animate(withDuration: 0.9, delay: 0.0, options: .curveLinear, animations: {
    self.vwDetails.frame = CGRect(x: self.vwContainer.frame.origin.x, y: self.vwContainer.frame.origin.y, width: self.vwContainer.frame.width, height: self.vwContainer.frame.height)
}, completion: nil)

and after you start animation

Answer 2

To achieve both translation and scale at the same time, you'll want something like this:

let originalTransform = yourView.transform
let scaledTransform = originalTransform.scaledBy(x: 0.2, y: 0.2)
let scaledAndTranslatedTransform = scaledTransform.translatedBy(x: 0.0, y: -250.0)
UIView.animate(withDuration: 0.7, animations: {
  self.main.transform = scaledAndTranslatedTransform
})

Answer 3

Try this

Replace your code

UIView.animate(withDuration: 0.9, delay: 0.0, options: .curveLinear, animations: {
    self.vwDetails.frame = CGRect(x: self.vwContainer.frame.origin.x, y: self.vwContainer.frame.origin.y, width: self.vwContainer.frame.width, height: self.vwContainer.frame.height)
}, completion: nil)

With this:

UIView.transition(with: self.vwContainer, duration:0.5, options: .curveLinear, animations: {
             self.vwContainer.frame.size = CGSize(width: self.view.frame.width, height: self.vwContainer.frame.height)
            self.vwContainer.center = self.view.center
        }) { (b) in

        }

You can adjust the positioning according to your requirements