Animate Mask in Objective C

Question

I am making an application where I have to show 3 images in a single screen, and when User touch one image then that Image should be shown by Animating and resizing.

So for 1st Step I did Masking of 3 images with 3 different Transparent Mask Image from How to Mask an UIImageView

And my method is like below

- (UIImageView*) maskedImage:(UIImage *)image withMasked:(UIImage *)maskImage {
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    CALayer *mask1 = [CALayer layer];
    mask1.contents = (id)[maskImage CGImage];
    mask1.frame = CGRectMake(0, 0, 1024, 768);
    imageView.layer.mask = mask1;
    imageView.layer.masksToBounds = YES;
    return imageView;
}

And I am calling this as

    self.image2 = [UIImage imageNamed:@"screen2Full.png"];
    self.mask2 = [UIImage imageNamed:@"maskImage.png"];
    self.imageView2 = [self maskedImage:self.image2 withMasked:self.mask2];
    [self.completeSingleView addSubview:self.imageView2];

This is working perfectly.

Now for Step 2. Animate the Mask, so that Full Image can be shown. I have googled a lot about this but didn't get success. So Please help me. I just want to know how can we Animate and Resize the Mask Image So that I can view a full Image. My concept is as below.

Answer 1

So finally i got the solution from multiple sites and some own logic and hard work obviously ;). So here is the solution of this

-(void)moveLayer:(CALayer*)layer to:(CGPoint)point
{
    // Prepare the animation from the current position to the new position
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.fromValue = [layer valueForKey:@"position"];
    animation.toValue = [NSValue valueWithCGPoint:point];
    animation.duration = .3;
    layer.position = point;

    [layer addAnimation:animation forKey:@"position"];
}

-(void)resizeLayer:(CALayer*)layer to:(CGSize)size
{
    CGRect oldBounds = layer.bounds;
    CGRect newBounds = oldBounds;
    newBounds.size = size;
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];

    animation.fromValue = [NSValue valueWithCGRect:oldBounds];
    animation.toValue = [NSValue valueWithCGRect:newBounds];
    animation.duration = .3;
    layer.bounds = newBounds;    
    [layer addAnimation:animation forKey:@"bounds"];
}

- (UIImageView*) animateMaskImage:(UIImage *)image withMask:(UIImage *)maskImage width:(int )wd andHeight:(int )ht andSize:(CGSize)size andPosition:(CGPoint)pt {
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    CALayer *mask = [CALayer layer];
    mask.contents = (id)[maskImage CGImage];
    mask.frame = CGRectMake(0, 0, wd, ht);

    //This needs to be place before masking. I don't knwo why. But its working :)
    [self resizeLayer:mask to:size];
    [self moveLayer:mask to:pt];

    imageView.layer.mask = mask;
    imageView.layer.masksToBounds = YES;
    return imageView;
}

You just need to call this as

 [self.imageView1 removeFromSuperview];
 self.imageView1 = [self animateMaskedImage:self.image1 withMasked:self.mask1 width:1024 andHeight:768 andSize:CGSizeMake(1024*4, 768*4) andPosition:CGPointMake(1024*2, 768*2)];
 [self.completeSingleView addSubview:self.imageView1];