Search code examples
iosswiftbuttontransition

How to slide and hide button using transition in Swift


I am a beginner at Swift. I have two buttons in Swift, but the thing is that I want to slide them down and hide them using transition when I click on the dismiss button.

I have attached the code here for my buttons.


    func showdirection(){
        
        
        startbtn.frame=CGRect(x:10, y:500, width:(screenSize.width/2)-15, height:350)
        startbtn.backgroundColor = UIColor(red:0.29, green:0.23, blue:0.54, alpha:1.0)
        startbtn.setTitle("Start".uppercased(), for: UIControl.State.normal)
        startbtn.addTarget(self, action:#selector(self.startdirection), for: .touchUpInside)
        startbtn.layer.cornerRadius = 20

        self.view.addSubview(startbtn)
        
        dismissbtn.frame=CGRect(x:(screenSize.width/2)+10, y:500, width:(screenSize.width/2)-20, height:35)
     //   dismissbtn.frame=CGRect(x:150, y:500, width:(screenSize.width/2)-15, height:50)

        dismissbtn.backgroundColor = UIColor(red:1, green:0, blue:0, alpha:1.0)
        dismissbtn.setTitle("Dismiss".uppercased(), for: UIControl.State.normal)
        startbtn.addTarget(self, action:#selector(self.dismissdirection), for: .touchUpInside)
        dismissbtn.layer.cornerRadius = 20
        self.view.addSubview(dismissbtn)
        
        
        
        
    }

Here I want to hide both buttons on clicking the dissmissbtn using transition.


Solution

  • You can use the UIView.animate to achieve this.

    // Set the target
    dismissbtn.addTarget(self, action: #selector(dismissToSlideButtonsDown), for: .touchUpInside)
    
    @objc func dismissToSlideButtonsDown() {
       UIView.animate(withDuration: 0.2, animations: {
          self.startbtn.alpha = 0 // This will make it fade away
          self.startbtn.frame.origin.y = UIScreen.main.bounds.height // This will move it out of the screen by pushing it down
    
          self.dismissbtn.alpha = 0 
          self.dismissbtn.frame.origin.y = UIScreen.main.bounds.height
       })
    }
    

    By changing button's alpha value you are making them less visible. Also by changing their frame's origin point you move them around. If you change the y property then it will move vertically, for horizontal movement you can change the x. Combining them is also possible.