Show partial content of image using animation

Question

I am working with images in iOS. So when a user presses let's say a button, I want an image to appear to fill up from the bottom to the top.

In order be more precise, imagine a thermometer that is empty and when you press a button the thermometer fills up from the bottom to the top. But I want this with animation.

Do you have any idea how to implement that?

Thanks!

Answer 1

You can easily do it by having a second view acting as a mask over the image view with your image. Then you can apply simple scale transform and animate it revealing the image. Alternatively, you can animate the frame change. Effect will be the same. I'm attaching code for 2 ways of doind this.

Here is what I achieved in both cases:

Code I used for the case I:

@interface MyViewController ()
@property(nonatomic, strong) UIImageView *imageView;
@property(nonatomic, strong) UIView *maskView;
@end

@implementation MyViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Image"]];
    _imageView.center = self.view.center;
    _imageView.layer.anchorPoint = CGPointMake(0.5, 0.0);

    [self.view addSubview:_imageView];

    _maskView = [[UIView alloc] initWithFrame:_imageView.frame];
    _maskView.backgroundColor = [UIColor whiteColor];
    _maskView.center = self.view.center;
    _maskView.layer.anchorPoint = CGPointMake(0.5, 0.0);

    [self.view addSubview:_maskView];
}

- (IBAction)buttonTapped:(id)sender
{
    [UIView animateWithDuration:1.0f
                     animations:^
    {
        _maskView.transform = CGAffineTransformMakeScale(1.0, 0.0001);
    }];
}

@end

Code I used for the case II:

@interface MyViewController ()
@property(nonatomic, strong) UIImageView *imageView;
@property(nonatomic, assign) CGFloat height;
@end

@implementation MyViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Image"]];
    _imageView.center = self.view.center;
    _imageView.contentMode = UIViewContentModeBottom;

    _height = CGRectGetHeight(_imageView.bounds);

    CGRect frame = _imageView.frame;
    frame.size.height = 0.00001;
    frame.origin.y += _height;

    _imageView.frame = frame;
    _imageView.clipsToBounds = YES;

    [self.view addSubview:_imageView];
}

- (IBAction)buttonTapped:(id)sender
{
    [UIView animateWithDuration:1.0f
                     animations:^
    {
        CGRect frame = _imageView.frame;
        frame.size.height = _height;
        frame.origin.y -= _height;

        _imageView.frame = frame;
    }];
}

@end

In both cases the end effect was the same.

Answer 2

You can do this by changing the frame of the view within the animate block. For example, if myView was a 100x100 sized view:

myView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, 0, 0);

[UIView animateWithDuration:1.0f
                     animations:^
{
    myView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, 100, 100);
}];

This example should enlarge a 100x100 view in the bottom left corner of the screen, making it appear to reveal itself from the bottom up.