Adding a new UITableViewRow pushes the existing cells down too quickly

Question

I am trying to create UITableCellView animation like Peek Calendar. As can be seen here:

I am using UITableView and the following code for animation

//Animaiton for the table view cells to appear
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{

    if([cell.reuseIdentifier isEqualToString:@"HolidayCell"]) {

        int x = (indexPath.row-self.selectedMonth) %2;
        //1. Setup the CATransform3D structure
        CATransform3D rotation;
        CATransform3D position;

        position = CATransform3DMakeTranslation(0, -36, 0) ;

        //rotation.m33 = 12;
        UILabel *shadow = (UILabel*)[cell.contentView viewWithTag:2];

        //2. Define the initial state (Before the animation)
        cell.alpha = 1;
        shadow.alpha = 0.75;

        if(x==1) {
            rotation = CATransform3DMakeRotation((-90.0*M_PI)/180, 1.5, 0.0, 0.0);
            rotation.m34 = 0.0059;
            cell.layer.anchorPoint = CGPointMake(0.5, 0.0);    
        }
        else
        {
            rotation = CATransform3DMakeRotation((90.0*M_PI)/180, 1.5, 0.0, 0.0);
            rotation.m34 = 0.0059;
            cell.layer.anchorPoint = CGPointMake(0.5, 1.0);
        }

        cell.layer.transform = CATransform3DConcat(position, rotation);

        //3. Define the final state (After the animation) and commit the animation
        [UIView beginAnimations:@"rotation" context:NULL];
        [UIView setAnimationDuration:2.3];
        //[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:cell cache:YES];
        cell.layer.transform = CATransform3DIdentity;
        cell.alpha = 1;
        shadow.alpha = 0;
        //cell.layer.shadowOff

 1. List item

set = CGSizeMake(0, 0);
        [UIView commitAnimations];
    }
}

Now I don't have any issue in particular with the animation. The cells are rotating just fine. However my issue is that when a cell i inserted even while rotated it is still taking up space as if it were fully open.

As you can see the cells are rotating within their "virtual boxes" however I want the cells to stick together as depicted in this image:

Does anyone have any idea on how to do this?

Answer 1

You are not transforming the frame, only the layer. The layer is only the visual representation of the cell, and does not define size or position of the cell.

I believe, in a tableView, the frame of a cell is defined first by the heightForRowAtIndexPath: method, but you should be able to change and animate it later using the "frame" property. Try setting it to zero, and animate to the final height when the cell appears.

Code, that finally gave the solution: https://www.cocoacontrols.com/controls/jtgesturebasedtableviewdemo

Answer 2

Here is some code, that actually works (tested it). Put it into the -(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath method, and comment out the other code for testing

CGRect cellFrame = cell.frame;

//replace with the y coordinate of the point, where the cell(s) get inserted
float insertPoint = 0;
//replace with the duration you wish
float animationDuration = 5;

[cell setFrame:CGRectMake(cellFrame.origin.x, insertPoint, cellFrame.size.width, 0)];
[UIView animateWithDuration:animationDuration animations:^{
    [cell setFrame:cellFrame];
}];

That may not be exactly what you want, but it should give you an idea...