In 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.

This is the final result.

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

First of all download the source code of the project.

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 to CATransform3DIdentity, 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 3to guide the animation and achieve an original effect.

Thank you for reading.