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.
