CODEWITHSUNDEEP
iosswiftuiviewanimation
Uzair Dhada
Uzair Dhada

Reputation: 333

pop out animation of UIView in swift

I am learning swift, I was successfully able to do popup animation of an UIView as below code but now i want to do reverse of it. i.e the way the UIView was animated should go back on a button click, Like the view is shrinking and then disappears.

popupView.isHidden = false
popupInnerView.isHidden = false
popupInnerView.transform = CGAffineTransform(scaleX: 0, y: 0)
UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
        self.popupView.alpha = 1.0;
        self.popupInnerView.transform = .identity
}, completion: nil)

Upvotes: 6

Views: 15329

Answers (3)

Awais Fayyaz
Awais Fayyaz

Reputation: 2415

Check if this one works for you. I have bound the showing and hiding of popup to buttons but you can bind them to anything.

Popup showing and hiding

For this to work

  • Drag and drop a uiview(your popup) into dock of view controller (see picture) Popup inside dock
  • Make outlet of your uiview(popup) in your view controller. I am calling it popupView

For showing popup with Animation use the code 

 @IBAction func btnShowPopupTapped(_ sender: UIButton) {

 popupView.center = view.center
 popupView.alpha = 1
 popupView.transform = CGAffineTransform(scaleX: 0.8, y: 1.2)

 self.view.addSubview(popupView)
 UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: [],  animations: {
 //use if you want to darken the background
   //self.viewDim.alpha = 0.8
   //go back to original form
   self.popupView.transform = .identity
 })

}

And for hiding the popup 

@IBAction func btnHideMeTapped(_ sender: Any) {

 UIView.animate(withDuration: 0.3, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: [], animations: {
 //use if you wish to darken the background
   //self.viewDim.alpha = 0
   self.popupView.transform = CGAffineTransform(scaleX: 0.2, y: 0.2)

 }) { (success) in
   self.popupView.removeFromSuperview()

 }



}

Note: If you want to darken the background as in gif.

  • Drag and drop a uiview into your view heirarchy (view dim). see the picview Dim
  • pin to 0, 0 , 0 ,0 to the main view
  • set its background color to black
  • set is alpha to 0
  • uncomment the line (self.viewDim.alpha = 0.8) in "btnShowPopupTapped" Action
  • uncomment the line (self.viewDim.alpha = 0) in "btnHideMeTapped" Action

Let me know if this helps.

Upvotes: 11

Uzair Dhada
Uzair Dhada

Reputation: 333

This code worked for Pop Out

UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
            self.popupView.alpha = 0.0;
            self.popupInnerView.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)
        }, completion: { _ in
            self.popupView.isHidden = true
            self.popupInnerView.isHidden = true
        })

Upvotes: 0

Kaushik Makwana
Kaushik Makwana

Reputation: 1327

Try This

For Zoom in

UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {

    self.popupInnerView.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
}, completion: { _ in
     self.popupInnerView.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
})

For Zoom Out

UIView.animate(withDuration: 1, delay: 0, options: .curveLinear, animations: {
            self.popupInnerView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
        }, completion: nil)

Upvotes: 4

Related Questions