How to animating table view cell in iOS

n this quick tutorial I’d like to show you how to add a simple but interesting effect to your UITableView using with just a few lines of code.

I love Core Animation and I think it is a fantastic instrument that allows us to easily achieve some interesting effects with almost no effort. So, in this experiment we are going to animate the cells of a table through some easy settings over the cells’ layers.

Check the final result on Vimeo.

Before you start this project you will need the source files. Please click the link below and share a tweet to access these files:

Project description

I’ve decided to apply just a 3D rotation on the Z axis to the cells when they are displayed. Anyway, it will be really simple to change my settings creating something that fits your needs.

Let’s code

Now open the file TableViewController.m. You’ll notice quite easily it’s a pretty standard configuration. In fact, we’ve just implemented the basic TableViewController’s delegate and datasource.

Now focus on the function tableView:WillDisplayCell:ForRowAtIndexPath:
This is part of the protocol UITableViewDelegate and it’s called just before a cell is displayed on the screen.
Since we want to animate the cells as soon as they are displayed, this is the right place where to work.

Here’s the complete code for the function:

//This function is where all the magic happens
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{

//1. Setup the CATransform3D structure
CATransform3D rotation;
rotation = CATransform3DMakeRotation( (90.0*M_PI)/180, 0.0, 0.7, 0.4);
rotation.m34 = 1.0/ -600;
//2. Define the initial state (Before the animation)
cell.layer.shadowColor = [[UIColor blackColor]CGColor];
cell.layer.shadowOffset = CGSizeMake(10, 10);
cell.alpha = 0;

cell.layer.transform = rotation;
cell.layer.anchorPoint = CGPointMake(0, 0.5);

//3. Define the final state (After the animation) and commit the animation
[UIView beginAnimations:@”rotation” context:NULL];
[UIView setAnimationDuration:0.8];
cell.layer.transform = CATransform3DIdentity;
cell.alpha = 1;
cell.layer.shadowOffset = CGSizeMake(0, 0);
[UIView commitAnimations];


In Step 1 we instruct a CATransform3D to perform a rotation over the Y and Z axis (Check the first part of this tutorial if you need more information about 3D and Core Animation).

With Step 2 we define the initial state of the cell. In that case we are adding some shadows (for the glory, as this is barely visible during the animation) and we update the layer transform matrix using the rotation created in Step 1.
We then set the anchor point at X 0.0 and Y 0.5 to achieve a rotation around the left side of the cell.

The last Step 3, resets the cell to its original state through an animation.
Essentially we use the helper function of UIView beginAnimations:context to update the values of the cell’s layer performing the animation.

You have other ways to perform this animation, but this is just the easiest that also allows us to choose a duration.

In this particular function we reset the transformation toCATransform3DIdentity, the background color to white, the shadow to 0 and the alpha to 1.

So we take advantage of the interpolation between the state of step 2 and the state of step 3 to guide the animation and achieve an original effect.

Thank you for reading.

for more detail plz click on


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at

Up ↑

%d bloggers like this: