CODEWITHSUNDEEP
objective-canimationuiimageviewmaskcabasicanimation
PoKoBros
PoKoBros

Reputation: 721

Animating a UIImageView with a mask but the mask is static

I am trying to have an animation in which a mask is placed in the center of the view. Any image view that passes behind the mask appears. So here is my code so far, but the problem with this code is that it animates the mask with the image view. 

UIView *maskView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.worldImageView.frame.size.height, self.worldImageView.frame.size.height)];

// ...position maskView...
maskView.layer.position = CGPointMake(CGRectGetMidX([self.view bounds]), CGRectGetMidY([self.view bounds]));

maskView.layer.backgroundColor = [UIColor blackColor].CGColor;

maskView.layer.cornerRadius = 90;

self.worldImage = [[UIImageView alloc] init];
self.worldImage.frame = self.worldImageView.frame;
self.worldImage.image = [UIImage imageNamed:@"continents.png"];
[maskView addSubview:self.worldImage];

[self.view addSubview:maskView];

CABasicAnimation* worldAnimation = [[CABasicAnimation alloc] init];
[worldAnimation setFromValue:[NSValue valueWithCGPoint:CGPointMake(self.view.frame.size.width + 50, CGRectGetMidY([maskView bounds]))]];
[worldAnimation setToValue:[NSValue valueWithCGPoint:CGPointMake(-50, CGRectGetMidY([maskView bounds]))]];
worldAnimation.keyPath = @"position";
worldAnimation.duration = 6.0f;
worldAnimation.repeatCount = HUGE_VALF;
[[self.worldImage layer] addAnimation:worldAnimation forKey:nil];

I don't know if I explained this well enough. Please tell me if you need more info. Thank you in advance!

Upvotes: 1

Views: 592

Answers (1)

ravron
ravron

Reputation: 11211

Your issue here is that the mask property of UIView is attached to that UIView - they can't move separately. Technically, it's actually attached to the view's underlying layer, but whatever.

If you want the image to appear as if it's passing in front of a circular window (so that you can see it as it goes by) you'll need to add it as a subview of the view with the mask. So, you might do something like this:

UIView *maskView = [[UIView alloc] init];

// ...position maskView...

maskView.layer.cornerRadius = 90;
maskView.clipsToBounds = YES;

self.worldImage = [[UIImageView alloc] init];
self.worldImage.frame = self.worldImageView.frame;
self.worldImage.image = [UIImage imageNamed:@"continents.png"];
[maskView addSubview:self.worldImage];

[self.view addSubview:maskView];

// ...animate worldImage back and forth...

Note that instead of using a CAShapeLayer, I simply put rounded corners on maskView; since you want a circular mask, it's a much simpler trick. Also, when animating worldImage, consider using one of UIView's block-based animation methods – they're a lot easier to handle for simple stuff like this.

Upvotes: 2

Related Questions