Today I gonna show you how you can easily animate your UITableViewCells  with UIKit  and QuartzCore out of the box functionality. This allows you to create smooth animation during state changes like adding or deleting some rows or sections of your table view.

Introduction

For this tutorial I am using the – at the moment – latest iOS SDK 8.1, but the code is downward compatible. We will implement all the code within a subclass of UITableViewController  and you should be already familiar with the default code within such a subclass.

The workflow to create smooth row animations is pretty simple:

1. React to some kind of user interaction (e.g. selecting a UITableViewCell ) or an event.
2. Mark the beginning of a UITableView  update
3. Change the state of your view controller
4. Insert/delete/reload corresponding rows and/or sections with a selected animation type
5. Mark the end of a UITableView  update

One of the important thing to know is that you have to ensure that the correct number of rows and sections is returned of your UITableViewController  implementation after calling methods like insertRowsAtIndexPaths: withRowAnimation:  or deleteRowsAtIndexPaths: withRowAnimation:  and committing the table view update. If you have four rows in your first section and you remove two of them within a beginUpdates  and endUpdates block your implementation of tableView:numberOfRowsInSection:  must return two after that.

UITableView provides the following methods to implement row animations:

insertRowsAtIndexPaths:withRowAnimation:

deleteRowsAtIndexPaths:withRowAnimation:

moveRowAtIndexPath:toIndexPath:

insertSections:withRowAnimation:

deleteSections:withRowAnimation:

Next you will find two easy examples showing you how to create simple row animations as well as how to chain two row animations in sequence.

 

Simple Row Animation

Ok, lets get hands-on and create a simple row animation. We are going to remove a row which was selected by a user. We are using a simple NSMutableArray  as our data model containing some NSStrings named _data . Next we implement the UITableViewDataSource methods for returning the number of sections and rows per section.

Chained Animations

Next we are going to create a little bit more complex animation. First we remove a row and after that we will add another section to our UITableView . For this case we will use a multidimensional NSMutableArray  to represent sections and rows as our data model. Again our methods for the number of sections and rows are stated below:

To get a smooth animation we need to chain two animations in a sequence. Since UITableView  provides no callbacks or methods with completion blocks for executing code after an animation is done, we use the help of CATransaction . Each layer animation happens within a CATransaction  and this transactions can be nested too. In our case we use CATransaction  to batch another animation after the first animation did end. To start a transaction use the method begin  and to end it use commit. To set the next animation use the method setCompletionBlock: .

I hope this post helped you or saved you some time.