Question

I wrote a custom UITableViewCell – image view, button and three labels now I am trying to add some animations to it. So once I tap the button, it fades away and the spinner replaces the button. After two seconds the cell is overlaid with a red color, as a subview of cell fades in, then the indicator is removed and and red overlay starts fading back out. As well the button I previously removed fades back in.

(I could not phrase it a better way 😛 )

The method is :

-(void)rentButtonPressed:(id)sender
{

    UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
    [indicator startAnimating];
    indicator.center = self.rentButton.center;

    [UIView animateWithDuration:0.2
                     animations:^{self.rentButton.alpha = 0.0;}
                     completion:^(BOOL finished){
                         [self.rentButton removeFromSuperview];
                         [self addSubview:indicator];
                     }
     ];

    UIView *overlay = [[UIView alloc] initWithFrame:self.backgroundImage.frame];
    overlay.alpha = 0.0;
    overlay.backgroundColor = [UIColor redColor];
    [self.contentView addSubview:overlay];

    [UIView animateWithDuration:0.4
                          delay:2.0
                        options:UIViewAnimationCurveEaseInOut
                     animations:^{
                             [indicator removeFromSuperview];
                             overlay.alpha = 0.4;
                         }
                    completion:^(BOOL finished){
                        [UIView animateWithDuration:0.4
                                        animations:^{ overlay.alpha = 0.0; }
                                        completion:^(BOOL finished)
                                        {
                                            [overlay removeFromSuperview];
                                        }
                        ];

                        [self.contentView addSubview:self.rentButton];
                        [UIView animateWithDuration:0.4 animations:^{ self.rentButton.alpha = 1.0;}];
                        [self.delegate didTryToRentMovieAtCell:self];
                    }
    ];

}

So the code does fade out the button, replace it with spinner and fades in the red overlay. The problem is, the red overlay does not fade away, but disappears same with the button, instead of fading in, it just appears.

Answer 1

During your animation, you are changing the view hierarchy by adding and removing subviews. The UIView class method animateWithDuration:animations:completion is intended only animating property changes in a view, and not for changing the view hierarchy.

Try using the UIView class method transitionWithView:duration:options:animations:completion: instead, and use the cell’s content view as the “container.”

This documentation is helpful in distinguishing between animating view property changes and animating view transitions, specifically the section “Changing the Subviews of a View”:
http://developer.apple.com/library/ios/#documentation/windowsviews/conceptual/viewpg_iphoneos/animatingviews/animatingviews.html