Hello friends,
This article is use for UITableViewCell animation.
In most of the application for represent data you can use UITableView.
When UITableView represent at that time you need to animated UITableViewCell for best UI experience of application.
How to use
You need to implement UITableView method
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
///Animation code
}
Now you need to developed FadeIn animation like this
cell.alpha = 0
UIView.animate(withDuration: 0.1, delay: (0.1 * Double(indexPath.row)), animations: {
cell.alpha = 1.0
}, completion: nil)
For more animation see this video
For above animation I have created extension for UITableViewCell
extension UITableViewCell{
/// Table view cell fade in animation for best way to represent
/// tableview
///
/// - Parameters:
/// - duration: animation duration default value 0.1
/// - index: cell index
func fadeInAnimation(withDuration duration: Double = 0.1,forIndex index : Int) {
self.alpha = 0
UIView.animate(withDuration: duration, delay: (duration * Double(index)), animations: {
self.alpha = 1.0
}, completion: nil)
}
/// Table view cell bounce animation for best way to represent
/// tableview
///
/// - Parameters:
/// - duration: animation duration default value 0.8
/// - delay: animation delay default value 0.05
/// - index: cell index
func bouncingAnimation(withDuration duration: Double = 0.8,withDelay delay : Double = 0.05,forIndex index : Int) {
self.transform = CGAffineTransform(translationX: 0, y: self.frame.height)
UIView.animate(withDuration: duration,delay: delay * Double(index),usingSpringWithDamping: 0.8,initialSpringVelocity: 0.1,animations: {
self.transform = CGAffineTransform(translationX: 0, y: 0)
})
}
/// Table view cell move in animation for best way to represent
/// tableview
///
/// - Parameters:
/// - duration: animation duration default value 0.5
/// - delay: animation delay default value 0.08
/// - index: cell index
func moveInAnimation(withDuration duration: Double = 0.5,withDelay delay : Double = 0.08,forIndex index : Int) {
self.alpha = 0
self.transform = CGAffineTransform(translationX: 0, y: self.frame.height / 2)
UIView.animate(withDuration: duration,delay: delay * Double(index),animations: {
self.alpha = 1
self.transform = CGAffineTransform(translationX: 0, y: 0)
})
}
/// Table view cell right side to in animation for best way to represent
/// tableview
///
/// - Parameters:
/// - duration: animation duration default value 0.5
/// - delay: animation delay default value 0.08
/// - index: cell index
func rightInAnimation(withDuration duration: Double = 0.5,withDelay delay : Double = 0.08,forIndex index : Int) {
self.transform = CGAffineTransform(translationX: self.bounds.width, y: 0)
UIView.animate(withDuration: duration,delay: delay * Double(index),animations: {
self.transform = CGAffineTransform(translationX: 0, y: 0)
})
}
/// Table view cell left side to in animation for best way to represent
/// tableview
///
/// - Parameters:
/// - duration: animation duration default value 0.5
/// - delay: animation delay default value 0.08
/// - index: cell index
func leftInAnimation(withDuration duration: Double = 0.5,withDelay delay : Double = 0.08,forIndex index : Int) {
self.transform = CGAffineTransform(translationX: -self.bounds.width, y: 0)
UIView.animate(withDuration: duration,delay: delay * Double(index),animations: {
self.transform = CGAffineTransform(translationX: 0, y: 0)
})
}
}
And you can simply use like
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
if (animationType == .bounce){
cell.bouncingAnimation(forIndex: indexPath.row)
}else if (animationType == .moveIn){
cell.moveInAnimation(forIndex: indexPath.row)
}else if (animationType == .leftIn){
cell.leftInAnimation(forIndex: indexPath.row)
}else if (animationType == .rightIn){
cell.rightInAnimation(forIndex: indexPath.row)
}else if (animationType == .side){
if (indexPath.row % 2 == 0){
cell.leftInAnimation(forIndex: indexPath.row)
}else{
cell.rightInAnimation(forIndex: indexPath.row)
}
}else{
cell.fadeInAnimation(forIndex: indexPath.row)
}
}
The sample code for illustrated in this post is available on GitHub.
Thank you.
I watch your post video carefully.
ReplyDeleteI think this is wonderful.
Thank you
DeleteThis is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value. Im glad to have found this post as its such an interesting one! I am always on the lookout for quality posts and articles so i suppose im lucky to have found this! I hope you will be adding more in the future... Bring Collective conscious to peace and harmony
ReplyDelete