Animating UITableViewCells one by one

Question

I am trying animation, where the UITableView is already in place,but the subview (which itself contains the cell's content view) for each of the UITableViewCells is outside the window bounds. It is outside the screen. When the view loads, the cell animate from left to right, one by one, till the rightmost x value of the frame touches the rightmost x value of the UITableView.

The animation is such that, once first cell takes off, the second cell takes off before the first cell is finished with it's animation. Similarly, the third cell takes off before the second is finished with it's animation. However, i am not able to achieve this, and i all my rows animate all-together.

-(void)animateStatusViewCells:(SupportTableViewCell *)cell
{
__block CGPoint center;
[UIView animateWithDuration:0.55 delay:0.55 options:UIViewAnimationOptionCurveEaseIn animations:^{
    center = cell.statusView.center;
    center.x += (cell.frame.size.width - 20);
    cell.statusView.center = center;
}completion:^(BOOL success){
    NSLog(@"Translation successful!!!");
    double delayInSeconds = 2.0;
    dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
    dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
        //[self animateStatusViewCells:cell];
    });
}];
}


 -(void)animateSupportTableView:(UITableView *)myTableView
 {
   NSMutableArray *cells = [[NSMutableArray alloc] init];
   NSInteger count = [myTableView numberOfRowsInSection:0];

 for (int i = 0; i < count; i++) {
    [cells addObject:[myTableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]]];
}

for (SupportTableViewCell *cell in cells) {

    [self animateStatusViewCells:cell];
   }

}

-(void)viewDidAppear:(BOOL)animated{
   [super viewDidAppear:animated];
   [self animateSupportTableView:_statusTableView];
 }

Here's the initWithStyle method for the custom UITableViewCell:

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
 {
 self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
 if (self) {
    // Initialization code
    _statusView = [[UIView alloc] initWithFrame:self.frame];
    self.contentView.backgroundColor = [UIColor greenColor];
    self.contentView.alpha = 0.7;
    CGPoint cellCenter = self.center;
    cellCenter.x = self.center.x -  (self.frame.size.width - 20);
    _statusView.center = cellCenter;

    [self addSubview:_statusView];
    [_statusView addSubview:self.contentView];
 }
 return self;

}

`center` should be declared inside the first block, and you don't need `__block` — newacct, Apr 12 '13 at 18:29

score 4 · Accepted Answer · answered Apr 12 '13 at 19:14

You need to use a different delay value for each animation. Instead of using a constant delay of .55, pass in the cell number to your animate method, and use something like:

CGFloat delay = .55 + cellNumber * cellDelay;
[UIView animateWithDuration: 0.55 delay: delay options:UIViewAnimationOptionCurveEaseIn animations:
^{
  //animation code
}
];

score 2 · Answer 2 · answered Nov 12 '15 at 16:52

For what its worth, this is a clean solution:

func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell,     forRowAtIndexPath indexPath: NSIndexPath) {
    let trans = CATransform3DMakeTranslation(-cell.frame.size.width, 0.0, 0.0)
    cell.layer.transform = trans

    UIView.beginAnimations("Move", context: nil)
    UIView.setAnimationDuration(0.3)
    UIView.setAnimationDelay(0.1 * Double(indexPath.row))
    cell.layer.transform = CATransform3DIdentity
    UIView.commitAnimations()
}

BhushanVU · Answer 3 · 2013-04-12T11:10:43.810

try this

declare this somewhere.

int c=0;


-(void)animateStatusViewCells:(SupportTableViewCell *)cell
{
__block CGPoint center;
[UIView animateWithDuration:0.55 delay:0.55 options:UIViewAnimationOptionCurveEaseIn animations:^{
    center = cell.statusView.center;
    center.x += (cell.frame.size.width - 20);
    cell.statusView.center = center;
}completion:^(BOOL success){
c++;
if(c<[cells count]){
[self animateStatusViewCells:[cells objectAtIndex:c]];
}
}];
}



-(void)animateSupportTableView:(UITableView *)myTableView
 {
   NSMutableArray *cells = [[NSMutableArray alloc] init];
   NSInteger count = [myTableView numberOfRowsInSection:0];

 for (int i = 0; i < count; i++) {
    [cells addObject:[myTableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]]];
}

   [self animateStatusViewCells:[cells objectAtIndex:c]];


}

Animating UITableViewCells one by one

3 Answers3