Animating UIImageView with mask (Core Animations with masks) - ios

Question

I have one UIImage in UIImageView (object on image). It needs to be animated to the right, but this animation needs to be masked with this circle mask.
My current code is:
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddArc(path, NULL, 44, 44, 21, 0, 2 * M_PI, NO);
CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
[shapeLayer setPath:path];
[shapeLayer setFillColor:[[UIColor blackColor] CGColor]];
[shapeLayer setBounds:CGRectMake(0, 0, 44, 44)];
[shapeLayer setPosition:CGPointMake(0, 0)];
UIImageView *loadingShape = [[UIImageView alloc] initWithFrame:CGRectMake(6.5, 7.5, 89, 40)];
[loadingShape setImage:[UIImage imageNamed:#"object_image.png"]];
[self addSubview:loadingShape];
// Set the mask for the image view's layer
[[loadingShape layer] setMask:shapeLayer];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
[UIView setAnimationDuration:0.3];
[UIView setAnimationRepeatCount:10];
[loadingShape setFrame:CGRectMake(0, 7.5, 89, 40)];
[UIView commitAnimations];
But this animates my whole UIImageView masked. I need mask to be static, just object behind to be animated.
What is the best solution to make this?

Answer 1

The mask layer shapeLayer acts as though it is a child of the other layer [loadingShape layer]. When the parent layer moves, the child moves with it.
In addition to your current animation, you will have to animate shapeLayer, in the opposite direction.
Edit: The animation established by -[UIView beginAnimations:context:] does not automatically apply to a bare CALayer, so set up the animation manually.
CGPoint p = /* you decide the new position of the shapeLayer */;
CABasicAnimation* anim = [[CABasicAnimation alloc] init];
anim.toValue = [NSValue valueWithCGPoint:p];
anim.keyPath = #"position";
anim.timingFunction = [CAMediaTimingFunction functionWithName:#"easeOut"];
anim.duration = 0.3;
anim.repeatCount = 10;
[shapeLayer.mask addAnimation:anim forKey:nil];
[anim release];

Answer 2

Thanks to Kurt, I refined a little bit my code and got what I wanter :)
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddArc(path, NULL, 44, 44, 21, 0, 2 * M_PI, NO);
CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
[shapeLayer setPath:path];
[shapeLayer setFillColor:[[UIColor blackColor] CGColor]];
[shapeLayer setBounds:CGRectMake(0, 0, 44, 44)];
[shapeLayer setPosition:CGPointMake(0, 0)];
UIView *loadingView = [[UIView alloc] initWithFrame:CGRectMake(6.5, 7.5, 44, 44)];
UIImageView *loadingShape = [[UIImageView alloc] initWithFrame:CGRectMake(0, 18, 89, 40)];
[loadingShape setImage:[UIImage imageNamed:#"object_image.png"]];
[[loadingView layer] setMask:shapeLayer];
[loadingView addSubview:loadingShape];
[self addSubview:loadingView];
// Set the mask for the image view's layer
CABasicAnimation* anim = [[CABasicAnimation alloc] init];
anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 18)];
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(15, 18)];
anim.keyPath = #"position";
anim.timingFunction = [CAMediaTimingFunction functionWithName:#"linear"];
anim.duration = 0.3;
anim.repeatCount = 100000;
[[loadingShape layer] addAnimation:anim forKey:nil];