Tab bar with awesome Animations!

 
Maniisha Gorasiya


There is a saying that - Animation can tell more than live action.

That’s absolutely fits in app user experience, well-designed animation make it easier for users to interact with your app. Animations are useful to explain the logic of an app to a user and improve app usability. Well-designed animation or motion can improve usability of app and make the interaction with an app more engaging and delightful.


Home icon with Rubber Band Animation!


Drag & Drop UIButton to ViewController with empty button title and set button image with home named system icon. Set tint color and size of icon according your choice. 


At Code of ViewController add -

@IBOutlet weak home: UIButton!


Set Bool for detect is button tapped or not?

var isTapped = false


also add button @IBAction -

 @IBAction func homeButton(_ sender: UIButton) {

  }


Build connection with Storyboard - 




Here animation code for @IBAction func homeButton -


@IBAction func homeButton(_ sender: UIButton) {

        let largeConfig = UIImage.SymbolConfiguration(pointSize: 30, weight: .regular, scale: .default)

        if isTapped == false{

            isTapped = true

            self.home.tintColor = UIColor.systemTeal

            let largeBoldDoc = UIImage(systemName: "house.fill", withConfiguration: largeConfig)!.withRenderingMode(.alwaysTemplate)

            self.home.setImage(largeBoldDoc, for: .normal)

            

        }else{

            isTapped = false

            self.home.tintColor = UIColor.lightGray

            let largeBoldDoc = UIImage(systemName: "house", withConfiguration: largeConfig)!.withRenderingMode(.alwaysTemplate)

            self.home.setImage(largeBoldDoc, for: .normal)

        }

        sender.transform = CGAffineTransform(scaleX: 0.9, y: 0.5)

        UIView.animate(withDuration: 2.0,

                               delay: 0,

                               usingSpringWithDamping: CGFloat(0.20),

                               initialSpringVelocity: CGFloat(6.0),

                               options: UIView.AnimationOptions.allowUserInteraction,

                               animations: {

            sender.transform = CGAffineTransform.identity

        },

            completion: { Void in()  }

        )

    }


-----------------------------------------------------------------------------



Shake the Bell!!!




I’ll show an animation which can instant notify the user that your app has new notification. Bell Icon is mostly used for notification, so i’ll gonna use it. Bell icon will animate like movement of real bell and its looks smooth and attractive.


Drag & Drop UIButton to ViewController with empty button title and set button image with bell named system icon. Set tint color and size of icon according your choice. 


At Code of ViewController add -

@IBOutlet weak var notification: UIButton!


also add button @IBAction -

 @IBAction func notificationAction(_ sender: UIButton) {

  }


Build connection with Storyboard


Here animation code for @IBAction func notificationAction -


@IBAction func notificationAction(_ sender: UIButton) {

        let largeConfig = UIImage.SymbolConfiguration(pointSize: 30, weight: .regular, scale: .default)

        if isTapped == false{

            isTapped = true

            self.notification.tintColor = UIColor.systemTeal

            let largeBoldDoc = UIImage(systemName: "bell.badge.fill", withConfiguration: largeConfig)!.withRenderingMode(.alwaysTemplate)

            self.notification.setImage(largeBoldDoc, for: .normal)

            

        }else{

            isTapped = false

            self.notification.tintColor = UIColor.lightGray

            let largeBoldDoc = UIImage(systemName: "bell.badge", withConfiguration: largeConfig)!.withRenderingMode(.alwaysTemplate)

            self.notification.setImage(largeBoldDoc, for: .normal)

        }

        let transform = CAKeyframeAnimation(keyPath: "transform.translation.x")

        transform.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)

        transform.values = [0, 0, 0, 0, 0, 0, 0, 0, 0]

               

        let rotateIcon = CAKeyframeAnimation(keyPath: "transform.rotation.z")

        rotateIcon.values = [-12, 12, -12, 12, 0, 0, 0, 0, 0].map {

            (degrees: Double) -> Double in

            let radians: Double = (.pi * degrees) / 180.0

            return radians

        }

        let shakeIcon: CAAnimationGroup = CAAnimationGroup()

        shakeIcon.animations = [transform, rotateIcon]

        shakeIcon.duration = 1.0

        self.notification.layer.add(shakeIcon, forKey: "shakeIt") 

    }


----------------------------------------------------------------------------


SearchBar popup from Search Icon!


Drag & Drop UIButton to ViewController with empty button title and set button image with magnifyingglass named system icon. Set tint color and size of icon according your choice. 


At Code of ViewController add -

@IBOutlet weak search: UIButton!


Set Bool for detect is seachbar expanded or not?

 var grow: Bool = false


Add UITExtField with bottom figure’s constarints




@IBOutlet weak var searchBar: UITextField!


also add NSLayoutConstraint 

@IBOutlet weak var searchTextFieldWidth: NSLayoutConstraint!


also add button @IBAction -

 @IBAction func searchButton(_ sender: UIButton) {

  }


Build connection with Storyboard 


Here animation code for @IBAction func searchButton -


@IBAction func searchButton(_ sender: UIButton) {

        grow = !grow

        animateGrowShrinkTextFields(grow: grow)

    }


    

    @objc func tapDetected() {

        self.searchBar.rightView = nil

        grow = !grow

       animateGrowShrinkTextFields(grow: grow)

    }

    

    func animateGrowShrinkTextFields (grow: Bool){

        if grow {

            self.grow = true

            UIView.animate(withDuration: 1.0,delay: 0.5, usingSpringWithDamping: 0.6, initialSpringVelocity: 0, options: .curveEaseInOut, animations: { [self] in

            self.searchTextFieldWidth.constant = 350

            self.searchBar.DesignRightFieldWithIcon(image: UIImage(systemName: "magnifyingglass")!)

            let singleTap = UITapGestureRecognizer(target: self, action: #selector(tapDetected))

            self.searchBar.rightView!.isUserInteractionEnabled = true

            self.searchBar.rightView!.addGestureRecognizer(singleTap)

            self.searchBar.backgroundColor = UIColor.systemTeal

                

            self.searchBar.layer.cornerRadius = self.searchBar.frame.height / 2

            let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: 15, height: self.searchBar.frame.size.height))

            self.searchBar.attributedPlaceholder = NSAttributedString(string:"Search Here...", attributes:[NSAttributedString.Key.foregroundColor: UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.2)])

            self.searchBar.leftView = paddingView

            self.searchBar.leftViewMode = .always

                

            self.home.isHidden = true

            self.notification.isHidden = true

            self.search.isHidden = true

            self.list.isHidden = true

            self.settings.isHidden = true

            self.view.layoutIfNeeded()

        }, completion: { (finished: Bool) in

        })

        } else {

            self.grow = false

            UIView.animate(withDuration: 1.0, delay: 0.3, usingSpringWithDamping: 0.6, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {

                self.searchTextFieldWidth.constant = 0

                self.view.layoutIfNeeded()

                self.home.isHidden = false

                self.notification.isHidden = false

                self.search.isHidden = false

                self.list.isHidden = false

                self.settings.isHidden = false

            }, completion: { (finished: Bool) in

            })

        }

        

    }


Here i’ll create extension for add search icon at right side of searchBar textfield.

extension UITextField{

    func SetRightIcon(image:UIImage){

        var leftIcon = UIImageView()

        if UIDevice.current.userInterfaceIdiom == .pad{

            leftIcon.frame = CGRect(x: -40, y:0, width: 40, height:40)

        }else{

            leftIcon = UIImageView(frame: CGRect(x: 15, y:0, width: self.frame.height, height:self.frame.height))

        

        }


        leftIcon.tintColor = .white

        leftIcon.image = image

        leftIcon.contentMode = .center

        

        let view = UIView(frame: CGRect(x: 0, y: 0, width: 62, height: self.frame.height))

        view.addSubview(leftIcon)

        self.rightViewMode = .always

        self.rightView = view

    }

    

    func DesignRightField(){

        let image = UIImageView(frame: CGRect(x: 0, y:0, width: self.frame.width, height:self.frame.height))

        image.image = UIImage(named: "magnifyingglass")

        image.contentMode = .scaleAspectFill

        image.layer.zPosition = 99

        self.borderStyle = .none

        self.backgroundColor = UIColor.clear

        self.textAlignment = .left

        let view = UIView(frame: CGRect(x: 0, y: 0, width: 62, height: self.frame.height))

        self.rightViewMode = .always

        self.rightView = view

        self.addSubview(image)

        self.sendSubviewToBack(image)

        

    }

    

    func DesignRightFieldWithIcon(image:UIImage){

        DesignRightField()

        SetRightIcon(image: image)

        

    }

}


----------------------------------------------------------------------------


List Icon With Stretchable  animation!


Drag & Drop UIButton to ViewController with empty button title and set button image with square.grid.2x2 named system icon. Set tint color and size of icon according your choice. 


At Code of ViewController add -

 @IBOutlet weak list: UIButton!

 @IBAction func listButton(_ sender: UIButton) {

  }


Build connection with Storyboard 


Here animation code for @IBAction func listButton -



 @IBAction func listButton(_ sender: UIButton) {

        let largeConfig = UIImage.SymbolConfiguration(pointSize: 30, weight: .regular, scale: .default)

        if isTapped == false{

            isTapped = true

            self.list.tintColor = UIColor.systemTeal

            

            let largeBoldDoc = UIImage(systemName: "square.grid.2x2.fill", withConfiguration: largeConfig)!.withRenderingMode(.alwaysTemplate)

            self.list.setImage(largeBoldDoc, for: .normal)

        }else{

            isTapped = false

            self.list.tintColor = UIColor.lightGray

            let largeBoldDoc = UIImage(systemName: "square.grid.2x2", withConfiguration: largeConfig)!.withRenderingMode(.alwaysTemplate)

            self.list.setImage(largeBoldDoc, for: .normal)

        }

        sender.transform = CGAffineTransform(scaleX: 0.5, y: 0.9)

        UIView.animate(withDuration: 2.0,

                               delay: 0,

                               usingSpringWithDamping: CGFloat(0.20),

                               initialSpringVelocity: CGFloat(6.0),

                               options: UIView.AnimationOptions.allowUserInteraction,

                               animations: {

            sender.transform = CGAffineTransform.identity

        },

            completion: { Void in()  }

        )

        

    }


-----------------------------------------------------------------------------


Settings Icon with Rotating wheel !


Drag & Drop UIButton to ViewController with empty button title and set button image with gearshape named system icon. Set tint color and size of icon according your choice. 


At Code of ViewController add -

 @IBOutlet weak settings: UIButton!

 @IBAction func settingsButton(_ sender: UIButton) {

  }


Build connection with Storyboard 


Here animation code for @IBAction func settingsButton -


@IBAction func settingsButton(_ sender: UIButton) {

        let largeConfig = UIImage.SymbolConfiguration(pointSize: 30, weight: .regular, scale: .default)

        if isTapped == false{

            isTapped = true

            self.settings.tintColor = UIColor.systemTeal

            let largeBoldDoc = UIImage(systemName: "gearshape.fill", withConfiguration: largeConfig)!.withRenderingMode(.alwaysTemplate)

            self.settings.setImage(largeBoldDoc, for: .normal)

        }else{

            isTapped = false

            self.settings.tintColor = UIColor.lightGray

            let largeBoldDoc = UIImage(systemName: "gearshape", withConfiguration: largeConfig)!.withRenderingMode(.alwaysTemplate)

            self.settings.setImage(largeBoldDoc, for: .normal)

        }

        let rotation : CABasicAnimation = CABasicAnimation(keyPath: "transform.rotation.z")

        rotation.toValue = NSNumber(value: Double.pi * 2)

        rotation.duration = 1

        rotation.isCumulative = true

        rotation.repeatCount = 1

        settings.layer.add(rotation, forKey: "rotationAnimation")

    }


Here your animation is ready! Hope this post will helpful for you.




Comments

No Comment

Leave a Comment

Your email address will not be published.



#212, JV Square 2, Sanskar Nagar, Bhuj-370001, Gujarat
+(91) 97 26 134340
Mon-Fri 9:00am-6:00pm
talk@lpktechnosoft.com
24 X 7 online support