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);
}

score 2 · Answer 1 · answered Feb 27 '14 at 18:36

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;
}];

answered Feb 27 '14 at 18:36

Rafał Sroka

39,540
23
113
143

Tried with this. Its not looking good as while table is coming up, I can see the view behind it. This is because alpha is changing. IS there any other way to avoid expanding/shrinking appearance of image inside the view? Upvoting! – Abhinav Feb 27 '14 at 18:42

score 2 · Accepted Answer · answered Feb 27 '14 at 18:43

2

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.

answered Feb 27 '14 at 18:43

matt

515,959
87
875
1,141

This sounds promising and exactly what I am looking for. Let me try with this. Upvoting! – Abhinav Feb 27 '14 at 18:44
Apprantly we are not using UIImageView. We are drawing it using core graphics rather. Do we have contentMode equivalent in core graphics? – Abhinav Feb 27 '14 at 18:54
Even if you are using core graphics you must be getting the image into the interface somehow. If you are using a custom UIView that draws itself, then the answer is _still_ the `contentMode`, but the details would depend upon your drawing code, which you still are not showing. – matt Feb 27 '14 at 19:02
I have edited my post to include image rendering code. – Abhinav Feb 27 '14 at 19:09
What I would do is move that `drawRect` code into a UIGraphicsBegin... block so that you _are_ drawing a UIImage. Put the UIImage into an image view as I said before. Now as the view's height increases it simply reveals more and more of that image. I actually do this in my Zotz app to make it look as if the view is blurring what is behind it as it rises up from the bottom. – matt Feb 27 '14 at 20:00
Hmmm. Alright Matt. Let me try this out. Thanks a ton! – Abhinav Feb 27 '14 at 20:28

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

2 Answers2