TableView List Animation

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.

project creation images for TableView List Animation

Step 2:- Secondly, create a simple table view and add the code

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
    }
}

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


func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt inexPath: IndexPath) {
}

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:-

 cell.alpha = 0
        
        UIView.animate(withDuration: 0.5, delay: 0.5*Double(indexPath.row),animations: {
            cell.alpha = 1
        })

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:-

   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)
        })

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:-

 // 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
        })

// 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:-

  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
        })

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:-

        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)
        }

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:-

 cell.transform = CGAffineTransform(scaleX: 0, y: 0)
        UIView.animate(withDuration: 2, animations: {
            cell.transform = CGAffineTransform(scaleX: 1, y:1)
        })

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:-

 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)
        })

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

  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
        })
    }

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!!!

TableView List Animation

Khushboo Gupta 27 June 2022

. . .

Getting Started:-

2. wave Animation:-

3. Animation from left to right Or right to left

4. Rotation Animation

5. Linear Animation

6. Scaling Animation:-

7. Move Up With Bounce

8. Slide-In With Rotation

Conclusion:-

Leave a Comment Cancel Reply

Message Sent!