Floating Menu with fabulous and attractive animations!
Floating Menu also known as "fixed menu" or “Fab Menu”, floating menus stay in a fixed position when you scroll the page. They appear to "float" on top of the page as you scroll. Fab menu layouts are the latest word in apps technology, its gives very efficient and attract the user. It’s save from complicated and complex layout of your app, because fab menu contains some buttons or options inside, thus UI Design looks neat and clean.
Expand - Collapse menu with simple & easiest swift programming with impressive animation and less code! You can use this menu wherever you want with no much efforts, and it’s too easy to customise it. You don’t need of any pods or complex coding.
Here are some easy steps for create this amazing menu:
First of all drag and drop UIView at Main.storyboard and create vertical view. Set height & width as per your requirement and fill background color.
Add UIButtons inside of above UIView and arrange them vertically with appropriate space between all buttons, set their height & width.
Here i’m add four buttons - one button for open and close menu action and other three buttons for menu options.
Now, It’s time to coding !
Create IBOutlet of UIView with menuView name:
@IBOutlet weak var menuView: UIView!
Build connection between IBOutlet and storyboard’s UIView.
Add other four IBOutlet for UIButtons:
@IBOutlet weak var mainBtn: UIButton!
@IBOutlet weak var btn2: UIButton!
@IBOutlet weak var btn3: UIButton!
@IBOutlet weak var btn4: UIButton!
Build connection between IBOutlet and storyboard’s UIButtons - mainBtn for bottom first button, btn2,btn3 & btn4 for other three menu buttons.
Add bool value for further use set false by default -
var isButtonMenuOpen = false
Hide three menu buttons on view load, because we need only display main Button which press action shows other three buttons, so i’m hiding three button in viewDidLoad().
self.btn2.alpha = 0
self.btn3.alpha = 0
self.btn4.alpha = 0
Next i’m set corner as radius of mainBtn and clear background color of menuView on load view, because i dont need show menuview by default.
self.mainBtn.layer.cornerRadius = self.mainBtn.frame.height / 2
self.menuView.backgroundColor = .clear
Here i’m using some variant and fabulous animations for attractive looks.
Extensions of animation:
When expand menuView i’m using springBottomToTop function and springTopToBottom when collapse menuView.
extension UIView{
func springTopToBottom(view: UIView, delaay: TimeInterval){
view.alpha = 1.0
view.transform = CGAffineTransform(translationX: 0, y: -view.frame.minY)
UIView.animate(withDuration: 0.9, delay: delaay, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
view.alpha = 0
view.transform = CGAffineTransform.identity
}, completion: nil)
}
func springBottomToTop(view: UIView, delaay: TimeInterval){
view.alpha = 0.0
view.transform = CGAffineTransform(translationX: 0, y: view.frame.maxY)
UIView.animate(withDuration: 0.9, delay: delaay, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
view.alpha = 1
view.layer.cornerRadius = view.frame.height / 2
view.transform = CGAffineTransform.identity
}, completion: nil)
}
}
Now, create menuBtn action to expand the menuView.
@IBAction func moreButton(_ sender: UIButton) {
}
Before expand view it’s necesary to check that is menuview alredy open or not?
With If…else condition i’m checking that menu already opened or not. If already opened than we need to close them.
if isButtonMenuOpen {
}else{
}
If already expanded menu than hide menuView with all menu buttons. Here im hiding with animation using of above springTopToBottom function :
self.btn2.springTopToBottom(view: self.btn2, delaay: 0.1)
self.btn3.springTopToBottom(view: self.btn3, delaay: 0.01)
self.btn4.springTopToBottom(view: self.btn4, delaay: 0.001)
menuView hide using another animation style:
UIView.transition(with: self.menuView,
duration: 0.6,
options: [.transitionFlipFromTop],
animations: {
self.btn2.alpha = 0
self.btn3.alpha = 0
self.btn4.alpha = 0
},
completion: nil)
Also clear background color of menuView and set false value to isButtonMenuOpen.
isButtonMenuOpen = false
self.menuView.backgroundColor = .clear
Now add some stuff of coding for else condition where menuView not opened. we need to open or expand menuView!
Again i’m using animation for open menuView:
UIView.transition(with: self.menuView,
duration: 0.5,
options: [.transitionFlipFromBottom],
animations: {
self.menuView.isHidden = false
},
completion: nil)
Set background color & corner radius of menuView:
self.menuView.backgroundColor = UIColor(red: 122/255, green: 154/255, blue: 255/255, alpha: 1.0)
self.menuView.layer.cornerRadius = 45
and finally it’s time to show menu options with animation:
self.btn2.springBottomToTop(view: self.btn2, delaay: 0.2)
self.btn3.springBottomToTop(view: self.btn3, delaay: 0.3)
self.btn4.springBottomToTop(view: self.btn4, delaay: 0.4)
at end of else condition set true value to isButtonMenuOpen.
isButtonMenuOpen = true
Here, Fab menu is Ready!!!
---------------------------------------------------------------------------------------------------------------------------
Instagram’s Like button Animation:
Like-Dislike button animation with simple and easy codding!
Add UIButton at the storyboard with system icon named - heart, set the tint color and size.
Build Connection with @IBOutlet and add action on Touch Up Inside.
@IBOutlet weak var likeBtn: UIButton!
@IBAction func likeButton(_ sender: UIButton) {
}
What happened when we tap on like button in instagram? Heart fill with damping with spring animation. So i’m stuffing in the likeButton @IBAction function.
For check is the like button already liked or not, i’m set bool value at top of the class:
var isLiked = false
set false as default value.
First i’m checking that what should be happen if already liked, If already liked than button icon should be empty heart and isLiked value must be false.
At the else, stuff of code for like and the button icon should be filled heart and isLiked value must be true.
Here the whole condition and code with Spring animation:
if self.isLiked{
self.leftBtn.transform = CGAffineTransform(translationX: 0, y: 0)
UIView.animate(withDuration: 0.1, animations: {
self.leftBtn.transform = self.leftBtn.transform.scaledBy(x: 0.8, y: 0.8)
let largeConfig = UIImage.SymbolConfiguration(pointSize: 20, weight: .light, scale: .large)
let largeBoldDoc = UIImage(systemName: "heart", withConfiguration: largeConfig)
self.leftBtn.setImage(largeBoldDoc, for: .normal)
}, completion: { _ in
// Step 2
UIView.animate(withDuration: 0.1, animations: {
self.leftBtn.transform = CGAffineTransform.identity
})
})
self.isLiked = false
}else{
self.leftBtn.transform = CGAffineTransform(translationX: 0, y: 0)
UIView.animate(withDuration: 0.1, animations: {
self.leftBtn.transform = self.leftBtn.transform.scaledBy(x: 0.8, y: 0.8)
let largeConfig = UIImage.SymbolConfiguration(pointSize: 35, weight: .bold, scale: .large)
let largeBoldDoc = UIImage(systemName: "heart.fill", withConfiguration: largeConfig)
self.leftBtn.setImage(largeBoldDoc, for: .normal)
}, completion: { _ in
// Step 2
UIView.animate(withDuration: 0.1, animations: {
self.leftBtn.transform = CGAffineTransform.identity
})
})
self.isLiked = true
}
Done!!!!
---------------------------------------------------------------------------------------------------------------------------
Search Bar using micro-interaction
Micro-animations are little, preferably functional animations that support the user by giving visual feedback and displaying changes more clearly. With micro-animations, it's possible to explain a lot without using a word.
Here Search button will be convert into Search bar on the tap of it. Using micro-interaction app design looks simple and more effective.
Add UIButton at the storyboard with system icon named - magnifyingglass, set the tint color and size.
Build Connection with @IBOutlet and add action on Touch Up Inside.
@IBOutlet weak var searchBtn: UIButton!
@IBAction func searchButton(_ sender: UIButton) {
}
Also add UITextfield exact near to the search button add the constraint as per below figure:
Add @IBOutlet :
@IBOutlet weak var borderTextFieldWidth: NSLayoutConstraint!
Build connection with constraint of width at the storyboard as shown at the below figure:
Now For check is the search button already liked or not, i’m set bool value at top of the class:
var grow: Bool = false
set false as default value.
Add the function of animation with passing the bool value and duration time to grow or expand the search bar.
Here entire stuff with checking condition that the search bar expanded or not?
if grow {
UIView.animate(withDuration: duration,delay: 0.5, usingSpringWithDamping: 0.6, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
self.borderTextFieldWidth.constant = 280
self.searchBar.backgroundColor = UIColor(red: 122/255, green: 154/255, blue: 255/255, alpha: 1.0)
self.mainBtn.isHidden = true
self.leftBtn.isHidden = true
self.view.layoutIfNeeded()
}, completion: { (finished: Bool) in
})
} else {
UIView.animate(withDuration: duration, delay: 0.3, usingSpringWithDamping: 0.6, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
self.borderTextFieldWidth.constant = 0
self.view.layoutIfNeeded()
self.mainBtn.isHidden = false
self.leftBtn.isHidden = false
}, completion: { (finished: Bool) in
})
}
Call this function in the searchButton @IBAction function with bool value and duration time.
grow = !grow
animateGrowShrinkTextFields(grow: grow, duration: 1.0)
Finally your micro-interaction search bar is ready!
Hope this post will helpful !!
