Hi all, today we will check out simple but cool floating buttons using UIViewAnimations methods. So, in this we are going to show 4 buttons which came out upside from another button. Here we are using constraints of buttons, button and UIViewAnimations. Let’s start with adding constraint to each buttons.
1) Setting constraints for buttons:-
Add constraint such that bottom constraint of 2nd button to 1st bottom similarly do for 3rd to 4th and 4th to 5th button. I am doing this because when i am going to update value for constraint is same and due to that i can manage spacing between them.
I have set my button’s size to 45*45 and other constraints to ZERO. After setting constraint you should see only single button which overlaps other buttons. And I need IBActions of all 4 buttons.
2) Adding Animations to IBAction methods:-
Add Following line code in your application
if !flag{
UIView.animate(withDuration: 0.20, animations: {
self.btn1bottomCons.constant = 55
}, completion: { (isTrue) in
if isTrue{
UIView.animate(withDuration: 0.15, animations: {
self.btn2bottomCons.constant = 55
}, completion: { (isTrue) in
if isTrue{
UIView.animate(withDuration: 0.10, animations: {
self.btn3bottomCons.constant = 55
})
}
})
}
})
}else{
UIView.animate(withDuration: 0.5, animations: {
self.view.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
})
btn1bottomCons.constant = 0
btn2bottomCons.constant = 0
btn3bottomCons.constant = 0
UIView.animate(withDuration: 0.10, animations: {
})
}
flag = !flag
Here flag is Bool value used to toggle the buttons. btn1bottomCons, btn2bottomCons, btn3bottomCons and btn4bottomCons are the constraint which we have created initially. When flag is false set constraint value to 55 otherwise set 0. Please observer that i have set value in the completion block of other button and duration of animation 0.20, 0.15, 0.10. So that at end animation must be fast.
If you like to create your own custom completion handle here is one example given below,….
func yourFunctionName(isFlag:Bool,str:String,isCompleted:(_ success: String)-> Void){
for _ in 0 … 1000 {
//make delay
}
var str2 = “Hi “
str2 += “Shashi!, Yours String is—> “
str2 += str
isCompleted(str2)// Pass your result to completion block at the end?
}
Now call the function as below,
yourFunctionName(isFlag: true, str: “?“) { (str_temp) in
print(“—-===>***”,str_temp,”***<===—-“)
}
3) Run the App:-
Run the code and click the button and observe there and say “there is no animation happening here?” .
To solve this issue you need to update layout which is single line of code more powerful because I observer that due to that viewDidload() call again? yes.
So you need to add the following line of code
self.view.layoutIfNeeded()
So final code will be,——>
if !flag{
UIView.animate(withDuration: 0.20, animations: {
self.btn1bottomCons.constant = 55
self.view.layoutIfNeeded()
}, completion: { (isTrue) in
if isTrue{
UIView.animate(withDuration: 0.15, animations: {
self.btn2bottomCons.constant = 55
self.view.layoutIfNeeded()
}, completion: { (isTrue) in
if isTrue{
UIView.animate(withDuration: 0.10, animations: {
self.btn3bottomCons.constant = 55
self.view.layoutIfNeeded()
})
}
})
}
})
}else{
UIView.animate(withDuration: 0.5, animations: {
self.view.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
})
btn1bottomCons.constant = 0
btn2bottomCons.constant = 0
btn3bottomCons.constant = 0
UIView.animate(withDuration: 0.10, animations: {
self.view.layoutIfNeeded()
})
}
flag = !flag
And my original project is on this Link:—–>https://github.com/ShashikantBhadke/ADMobs
