Hello guys, Today we learn about TableView List Animation.
Sometimes we need to add some special effects in our table view like, we want to open the list from left to right, top to bottom, and many more effects. To give these effects in our code, for this what do we do? let’s start.
Getting Started:-
Step 1:- Firstly, Create an Xcode project
File—> New—> Project—>iOS—> Next And add your project name then create.
Step 2:- Secondly, create a simple table view and add the code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import UIKit class ViewController: UIViewController { @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() tableView.dataSource = self tableView.delegate = self tableView.reloadData() } } extension ViewController: UITableViewDataSource, UITableViewDelegate{ func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 10 } func tableView(_tableView: UITAbleView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "ListTableViewCell") as! ListTableViewCell if indexPath.row%2 == 0 { cell.backgroundColor = .systemMint }else{ cell.backgroundColor = .systemCyan } cell.listLabel.text = "List" + " " + String(indexPath.row) return cell } } |
Step 3:- Now, if you want to show the animation in your table list then we need to call the will display Method
|
1 2 3 |
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt inexPath: IndexPath) { } |
For, a better understanding starts with simple animation
Let’s start with simple animation in table view
you need to add some lines of code the will display the method
Will Display -This method will call when the table view draws the row in the cell.
1. Simple Animation:-
|
1 2 3 4 5 |
cell.alpha = 0 UIView.animate(withDuration: 0.5, delay: 0.5*Double(indexPath.row),animations: { cell.alpha = 1 }) |
Now, run the app and see the output.
2. wave Animation:-
Code:-
|
1 2 3 4 |
cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: 0) UIView.animate(withDuration: 5, delay: 0.06*Double(indexPath.row), usingSpringWithDamping: 0.5, initialSpringVelocity: 0.2, options: .curveEaseIn, animations: { cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height) }) |
Output:-
3. Animation from left to right Or right to left
Code:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// left to right cell.alpha = 0 cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y:cell.contentView.frame.height) UIView.animate(withDuration: 0.5, delay: 0.5*Double(indexPath.row), animations: { cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height) cell.alpha = 1 }) // right to left cell.alpha = 0 cell.transform = CGAffineTransform(translationX: 0, y:cell.contentView.frame.height) UIView.animate(withDuration: 0.5, delay: 0.5*Double(indexPath.row), animations: { cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height) cell.alpha = 1 }) // top to bottom cell.alpha = 0 cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y:0) UIView.animate(withDuration: 0.5, delay: 0.5*Double(indexPath.row), animations: { cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height) cell.alpha = 1 }) // bottom to top cell.alpha = 0 cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y:cell.contentView.frame.height) UIView.animate(withDuration: 0.5, delay: 0.5*Double(indexPath.row), animations: { cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: 0) cell.alpha = 1 }) |
Output:- I am adding the output only for the left to right animation.
4. Rotation Animation
code:-
|
1 2 3 4 5 6 |
cell.alpha = 0 cell.transform = CGAffineTransform(rotationAngle: 180) UIView.animate(withDuration: 0.5, delay: 0.5*Double(indexPath.row), animations: { cell.transform = CGAffineTransform(rotationAngle: 0.0) cell.alpha = 1 }) |
Output:-
5. Linear Animation
code:-
|
1 2 3 4 5 6 |
cell.transform = CGAffineTransform(translationX: 0, y:0) UIView.animate(withDuration: 1, delay: 0.05*Double(indexPath.row), options: .curveLinear) { cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height) } |
Output:-
6. Scaling Animation:-
code:-
|
1 2 3 4 |
cell.transform = CGAffineTransform(scaleX: 0, y: 0) UIView.animate(withDuration: 2, animations: { cell.transform = CGAffineTransform(scaleX: 1, y:1) }) |
Output:-
7. Move Up With Bounce
code:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
cell.alpha = 0 cell.transform = CGAffineTransform(translationX: 0, y: cell.contentView.frame.height) UIView.animate( withDuration: 0.5, delay: 0.5 * Double(indexPath.row), usingSpringWithDamping: 0.4, initialSpringVelocity: 0.1, options: [.curveEaseInOut], animations: { cell.alpha = 1 cell.transform = CGAffineTransform(translationX: 0, y: 0) }) |
8. Slide-In With Rotation
In this I want to show my table view with two different effects so I have divided my table cell into two-part – even and odd
for odd row i want to slide in effect and for even cell i want to rotary cell
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
if indexPath.row%2 == 0 { cell.transform = CGAffineTransform(translationX: tableView.bounds.width, y: 0) UIView.animate( withDuration: 0.5, delay: 0.5 * Double(indexPath.row), options: [.curveEaseInOut], animations: { cell.transform = CGAffineTransform(translationX: 0, y: 0) }) }else{ cell.alpha = 0 cell.transform = CGAffineTransform(rotationAngle: 180) UIView.animate(withDuration: 0.5, delay: 0.5*Double(indexPath.row), animations: { cell.transform = CGAffineTransform(rotationAngle: 0.0) cell.alpha = 1 }) } |
Output:-
You may also create many more effects like the above example you just need to call the animation function accodingly.
Conclusion:-
In this blog, we discussed the working of TableView List Animation in-app.
I hope this blog will help you to understand the animation functionality
Thanks for reading!!!