TableViewCell Animation in swift

Swift

Undoubtedly, the table view is one of the most popular features in any iOS app. It shows one column of content that scrolls vertically and is separated into rows.

Sometimes we need to add some special effects or Animation on the tableview when the list is opened. What do we do to provide these effects in our code? Let’s go ahead and get started TableViewCell Animation in swift.

  1. Firstly create a new project for it.
  2. Create a Table View class and add their delegates and code.
class ViewController: UIViewController {
    @IBOutlet var animatedTableView: UITableView?
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func reloadTableview() {
        animatedTableView?.reloadData()
    }
    
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 7
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "AnimatedTableViewCell", for: indexPath) as! AnimatedTableViewCell
        if indexPath.row % 2 == 0 {
            cell.mainView?.backgroundColor = .systemPink
        } else {
            cell.mainview?.backgroundColor = .gray
        }
        return cell
    }
}

class AnimatedTableViewCell: UITableViewCell {
    @IBOutlet var textLbl: UILabel?
    @IBOutlet var mainView: UIView?
}

If you want to add animation in your code then we need to call table view’s WillDisplay function

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
}
  1. UIView will be used to help us animate the table view cells. animate function of the class UIView
  2. ‘willDisplay’ This method will call when your table view draws the row in the cell.

Add this code in the willDisplay method.

1. Simple Animation:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.alpha = 0
        UIView.animate(withDuration: 0.5, delay: 0.5*Double(indexPath.row), animations: {
            cell.alpha = 1
        })
}

Alpha is a  property that has a floating-point value between 0.0 and 1.0, where 0.0 denotes complete transparency and 1.0 denotes complete opaqueness.

Output:

Animation From Left To Right Or Right To Left:

2. Left to right:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
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: 0, y: cell.contentView.frame.height)
                    cell.alpha = 1
                })
}

In the initial time,  x will be the width of the cell which means set the left position(starting position) of the cell and y will be the height of the cell when the callback function I.e. animations call x  will be changed, it ends with  0.

Output:

3. Right to left:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
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
                })
}

Similarly, In the Right-to-left case x will be 0 because the animation starts from the right and ends with the left and when the callback function i.e. animations call x will be changed, it ends with the width of the cell.

Output:

Animation From Top To Bottom Or Bottom To Top:

4. Top to Bottom:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
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
 })
}

In the case of Top to Bottom, y starts from the top i.e. 0, and when the callback function call I.e. animations call y will be changed, it ends with the height of the cell.

Output:

5. Bottom to Top:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
  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
 })
}

In the case of Bottom to Top, y starts from the bottom I.e. height of the cell and when the callback function call I.e. animations call y will be changed, it ends with 0 of the cell.

Output:

6. Wave Animation:

Add this code in will display method.

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
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.07, options: .curveEaseInOut, animations: {
            cell.transform = CGAffineTransform(translationX: cell.contentView.frame.width, y: cell.contentView.frame.height)
        })
}

Output:

7. Stair Animation:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.alpha = 0
cell.transform = CGAffineTransform(translationX: 0, 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
})
}

Output:

8. Rotation Animation:

Add this code in the willDisplay method.

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
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)
cell.alpha = 1
})
}

Output:

9. Linear Animation:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.alpha = 0
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.alpha = 1
 }
}

Output:

10. Scaling Animation:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.alpha = 0
cell.transform = CGAffineTransform(scaleX: 0, y: 0)
UIView.animate(withDuration: 1, animations: {
cell.transform = CGAffineTransform(scaleX: 1, y: 1)
cell.alpha = 1
})
}

Output:

11. Rotation With Slide-In:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
if indexPath.row%2 == 0 {
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
 })  } else {
 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)
                })
            }
}

Output:

12. Slide-In With Rotation:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { 
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:

14. Move Up With Bounce:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
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)
            })
}

Output:

15. Move Down With Bounce:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { 
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)
            })
}

Output:

Conclusion:

We covered the different types of TableView List Animation in-app in this blog. I hope this blog post will make it easier for you to comprehend how the animation works.

If you have any queries Please Comment Below.

Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *