CODEWITHSUNDEEP
swiftanimationbuttonuiappearance
Hreno Hrenovich
Hreno Hrenovich

Reputation: 336

Showing and hiding button with custom animation

Now I'm having such animation:

UIView.animateWithDuration(0.5) { () -> Void in
   self.scrollToTopBtn.alpha = self.isVisible(self.searchBar.searchBar) ? 0 : 0.6
}

Button is located in bottom-right corner of screen. I want her to appear moving from right to left and dissapear moving from left to right. How can I do this?

Upvotes: 1

Views: 2915

Answers (2)

Hugo Alonso
Hugo Alonso

Reputation: 6824

One easy way to achieve this is:

1.- Lets say that let buttonWidth is the width of your scrollToTopBtn UIButton.

2.- Put your scrollToTopBtn in the bottom-right corner of screen, but all the way right out of the screen bounds. This will be your initial state for the button.

3.- When you want it to appear, just call following function:

Swift 2

func showButton() {
   UIView.animateWithDuration(0.35, animations: { () -> Void in
      self.scrollToTopBtn.transform = CGAffineTransformTranslate(self.scrollToTopBtn.transform, -buttonWidth, 0)
      }, nil)
}

Swift 3, 4, 5

func showButton() {
    UIView.animate(withDuration: 0.35, animations: { () -> Void in
        self.scrollToTopBtn.transform = self.scrollToTopBtn.transform.translatedBy(x: -buttonWidth, y: 0)
    }, completion: nil)
}

4.- If you want it to disappear:

Swift 2

func hideButton() {
   UIView.animateWithDuration(0.35, animations: { () -> Void in
      self.scrollToTopBtn.transform = CGAffineTransformTranslate(self.scrollToTopBtn.transform, buttonWidth, 0)
      }, nil)
}

Swift 3, 4, 5

func hideButton() {
    UIView.animate(withDuration: 0.35, animations: { () -> Void in
        self.scrollToTopBtn.transform = self.scrollToTopBtn.transform.translatedBy(x: buttonWidth, y: 0)
    }, completion: nil)
}

Notice that a good practice may be to create the button in runtime, adding it to the hierarchy when needed and then removing it when done using it.

Upvotes: 2

ishaq
ishaq

Reputation: 1841

There are a bunch of ways to do it. The easiest would be setting frame of the button. Something like this:

UIView.animateWithDuration(0.5) { () -> Void in
    self.scrollToTopBtn.alpha = self.isVisible(self.searchBar.searchBar) ? 0 : 0.6
    let superViewWidth = self.scrollToTopBtn.superview!.bounds.size.width
    let buttonWidth = self.scrollToTopBtn.frame.size.width

    if(self.isVisible(self.searchBar.searchBar)) { // move it off of the view (towards right)
        self.scrollToTopBtn.frame.origin.x = superViewWidth + buttonWidth
    }
    else { // bring it back to it's position
        self.scrollToTopBtn.frame.origin.x = 10 // or whatever the normal x value for the button is
    }
}

The better way to do it

The better way would be to animate the constraint constant. Here's how you could do it:

First create an outlet for the constraint in your view controller:

@IBOutlet weak var buttonLeadingConstraint: NSLayoutConstraint!

Go to Interface builder and connect the button's leading constraint to buttonLeadingConstraint outlet.

Now you can animate it like this:

if(self.isVisible(self.searchBar.searchBar)) { // move it off the screen
    self.buttonLeadingConstraint.constant = self.view.bounds.width + 10
}
else {
    self.buttonLeadingConstraint.constant = 10 // or whatever the normal value is
}

// Now animate the change
UIView.animateWithDuration(0.5) { () -> Void in
    self.view.layoutIfNeeded()
}

Note that you set the constant on constraint before you call animateWithDuration, and inside the animations block, you only need to call `layoutIfNeeded' on the parent view.

Upvotes: 1

Related Questions