UIView animation inside UITableViewCell

Question

I´m developing an iOS app that has in one view a UITableView with two custom UITableViewCell. All this using a main storyboard.

Everything works pretty fine. But what I need to implement is a single fade in/fade out animation in one UIView from just one cell.

Currently I´m using a this code to animate the view:

[UIView animateWithDuration:1.2
                      delay:0
                    options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat | UIViewAnimationOptionCurveEaseInOut animations:^{

                        self.myView.alpha = 0;

                    } completion:^(BOOL finished) {

                        self.myView.alpha = 1;

                    }];

In a "set content" method that I call in the tableView:cellForRowAtIndexPath: data source method of the UITableView.

The animations works ok. Even if a change between views the view still animating. My problem is when I reload the data from the table view or the table view scrolls up or down until the cell with the animation disappear and it has to reuse the cell to show it again, in that moment the cell is presented with no animation.

What am I missing in here? Is there a better way to implement this? How do I restart the animation after the table view reuses the cell?

I think is important to remark that according to my UI design only one cell will have the animation.

Thanks.

Answer 1

I think you should implement one more delegate method of UITableView, which is -

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

& perform your animations on the respective view of the respective cell inside it.

The below method will be called every time the cell is displayed, (also in case if it goes out of the TableView's frame and comes back to the visible area)

-(void) tableView:(UITableView *) tableView willDisplayCell:(UITableViewCell *) cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    //row number on which you want to animate your view
    //row number could be either 0 or 1 as you are creating two cells
    //suppose you want to animate view on cell at 0 index
    if(indexPath.row == 0) //check for the 0th index cell
    {
         // access the view which you want to animate from it's tag
         UIView *myView = [cell.contentView viewWithTag:MY_VIEW_TAG];

         // apply animation on the accessed view
         [UIView animateWithDuration:1.2
                      delay:0
                    options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat | UIViewAnimationOptionCurveEaseInOut animations:^
         {
                   [myView setAlpha:0.0];
         } completion:^(BOOL finished)
         {
                   [myView setAlpha:1.0];
         }];
    }
}

Answer 2

Using UIView animations. Works in Swift 4.

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        cell.alpha = 0
        UIView.animate(withDuration: 0.3, animations: {
            cell.alpha = 1
        })
    }