Browse Month: October 2017

Animation like floating Buttons.

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 01000 {
//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