Showing and hiding button with custom animation - swift

Question

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?

Answer 1

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.

Answer 2

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.