Animating custom view half way the screen with an image in it - abrupt animation

Question

In one of my views I have a bottom bar. A tap on this view animates a temporary cart half way to the screen. Now, where there is no item in the temporary table I show a no data overlay which is nothing but a view with an empty cart image and text underneath it.

The issue is: when this table animates to expand and collapse, the no data overlay does not look good during animation. It appears that the image is also shrinking/expanding until the temporary table view stops animating.

So, I tried by playing with the alpha of the temporary table view while this animation happens so that it does not look that bad. But this is not helping either. There is an abrupt flash in the end.

Any suggestions?

self.temporaryTable.backgroundView = self.noDataOverlay;

[UIView animateWithDuration:0.5 animations:^{
    self.temporaryTable.alpha = 0.5;
} completion:^(BOOL finished) {
    self.temporaryTable.alpha = 1.0;
}];

Here is my code for drawing the image:

    - (void)drawRect:(CGRect)iRect scalingImage:(BOOL)iShouldScale {
        CGRect aRect = self.superview.bounds;   
        // Draw our image
        CGRect anImageRect = iRect;
        if (self.image) {
            //scale the image based on the height
            anImageRect = CGRectZero;
            anImageRect.size.height = self.image.size.height;
            anImageRect.size.width = self.image.size.width;
    #ifdef ACINTERNAL
            if (iShouldScale) {
                anImageRect = [self aspectFittedRect:anImageRect max:aRect];
            } else {
                anImageRect.origin.x = (iRect.size.width/2) - (anImageRect.size.width/2);
                anImageRect.origin.y = kTopMargin;
            }
    #else
            anImageRect.origin.x = (iRect.size.width/2) - (anImageRect.size.width/2);
            anImageRect.origin.y = kTopMargin;
    #endif
            if (self.shouldCenterImage)
                anImageRect.origin.y = (iRect.size.height/2) - (anImageRect.size.height/2);

            [self.image drawInRect:anImageRect];
        } else {
            anImageRect.origin.y = (iRect.size.height/6);
            anImageRect.size.height = (iRect.size.height/6);
        }

        // Draw our title and message
        if (self.title) {
            CGFloat aTop = anImageRect.origin.y + anImageRect.size.height + kSpacer;
            CGFloat aWidth = aRect.size.width;
            UIColor *aColor = [UIColor colorWithRed:96/256.0 green:106/256.0 blue:122/256.0 alpha:1];
            [aColor set];       
            CGRect aTextRect = CGRectMake(0, aTop, aWidth, kTitleHeight * 2);
            UIFont *aTitleFont = [UIFont boldSystemFontOfSize:kTitleFontSize];
            [self.title drawInRect:aTextRect withFont:aTitleFont lineBreakMode:NSLineBreakByClipping alignment:NSTextAlignmentCenter];

            if (self.subTitle) {
                UIFont *aSubTitleFont = [UIFont systemFontOfSize:kSubTitleFontSize];
                aTextRect = CGRectMake(0, aTop+kSpacer, aWidth, kTitleHeight);
                [self.subTitle drawInRect:aTextRect withFont:aSubTitleFont lineBreakMode:NSLineBreakByClipping alignment:NSTextAlignmentCenter];
            }
        }
    }


- (void)addToView:(UIView *)iView {
    // setting a unique tag number here so that if the user has any other tag there should not be a conflict
    UIView *aView = [iView viewWithTag:699]; 
    if (aView) {
        [aView removeFromSuperview];
    }
    self.tag = 699;
    [iView addSubview:self];
}


- (void)removeView {
    [super removeFromSuperview];
}


-(void)setViewFrame:(CGRect) iFrame {
    CGRect aRect = self.frame;
    aRect.size.width = iFrame.size.width;
    aRect.size.height = iFrame.size.height;
    self.frame = aRect;
    [self setNeedsDisplay];
}


- (CGRect)aspectFittedRect:(CGRect)iRect max:(CGRect)iMaxRect {
    float anOriginalAspectRatio = iRect.size.width / iRect.size.height;
    float aMaxAspectRatio = iMaxRect.size.width / iMaxRect.size.height;

    CGRect aNewRect = iMaxRect;
    if (anOriginalAspectRatio > aMaxAspectRatio) { // scale by width
        aNewRect.size.height = iMaxRect.size.width * iRect.size.height / iRect.size.width;
    } else {
        aNewRect.size.width = iMaxRect.size.height  * iRect.size.width / iRect.size.height;
    }
    aNewRect.origin.y =  (iMaxRect.size.height - aNewRect.size.height)/2.0;
    aNewRect.origin.x =  (iMaxRect.size.width  - aNewRect.size.width)/2.0;

    return CGRectIntegral(aNewRect);
}

Answer 1

One possibility here is to fix the original problem, namely the fact that the empty cart image is expanding/collapsing as the view animates. Without seeing your code it is difficult to solve this problem, but in my own code what I do is set the contentMode of the UIImageView to UIViewContentModeBottom. This causes the image to stay the same size even though the image view that contains it may grow and shrink as part of the animation.

Answer 2

You see a flash because you animate alpha up to 0.5 and then when animation completes you set it from 0.5 to 1.0. Just animate the alpha up to 1.0:

[UIView animateWithDuration:0.5 
                 animations:^
{
    self.temporaryTable.alpha = 1.0;
}];