Does the way CALayer generate its contents Affect its scale animation? - ios

Question

#interface CircleRevealLayer : CALayer
#end
#implementation CircleRevealLayer
- (instancetype)init
{
if (self = [super init]) {
[self setNeedsDisplay];
[self displayIfNeeded];
}
return self;
}
- (void)display
{
self.contents = (__bridge id)([self maskImage].CGImage);
self.contentsGravity = kCAGravityCenter;
}
- (UIImage *)maskImage
{
static UIImage *mask = nil;
if (!mask) {
UIGraphicsBeginImageContext(CGSizeMake(SCREEN_WIDTH, SCREEN_HEIGHT));
UIBezierPath* bezierPath = UIBezierPath.bezierPath;
[bezierPath moveToPoint: CGPointMake(209.5, 368)];
[bezierPath addCurveToPoint: CGPointMake(207, 370.5) controlPoint1: CGPointMake(208.12, 368) controlPoint2: CGPointMake(207, 369.12)];
[bezierPath addCurveToPoint: CGPointMake(209.5, 373) controlPoint1: CGPointMake(207, 371.88) controlPoint2: CGPointMake(208.12, 373)];
[bezierPath addCurveToPoint: CGPointMake(212, 370.5) controlPoint1: CGPointMake(210.88, 373) controlPoint2: CGPointMake(212, 371.88)];
[bezierPath addCurveToPoint: CGPointMake(210.98, 368.49) controlPoint1: CGPointMake(212, 369.67) controlPoint2: CGPointMake(211.6, 368.94)];
[bezierPath addCurveToPoint: CGPointMake(209.5, 368) controlPoint1: CGPointMake(210.57, 368.18) controlPoint2: CGPointMake(210.05, 368)];
[bezierPath closePath];
[bezierPath moveToPoint: CGPointMake(411, 0)];
[bezierPath addCurveToPoint: CGPointMake(411, 736) controlPoint1: CGPointMake(411, 0) controlPoint2: CGPointMake(411, 736)];
[bezierPath addLineToPoint: CGPointMake(-3, 736)];
[bezierPath addLineToPoint: CGPointMake(-3, 0)];
[bezierPath addLineToPoint: CGPointMake(411, 0)];
[bezierPath addLineToPoint: CGPointMake(411, 0)];
[bezierPath closePath];
[UIColor.grayColor setFill];
[bezierPath fill];
mask = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//mask = [UIImage imageNamed:#"mask.PNG"];
}
return mask;
}
#end
#interface CircleRevealView : UIView
#end
#implementation CircleRevealView
+ (Class)layerClass{
return [CircleRevealLayer class];
}
#end
then, I create it like this:
_maskView = [[CircleRevealView alloc] initWithFrame:self.view.bounds];
_maskView.frame = self.view.bounds;
and add a scale animation:
POPSpringAnimation *springAnimation = [POPSpringAnimation animation];
springAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewScaleXY];
springAnimation.toValue=[NSValue valueWithCGPoint:CGPointMake(80, 80)];
springAnimation.velocity=[NSValue valueWithCGPoint:CGPointMake(1, 1)]; // change of value units per second
springAnimation.springBounciness=20; // value between 0-20 default at 4
springAnimation.springSpeed=3;
springAnimation.name=#"scaleXY1";
springAnimation.delegate=self;
[_maskView pop_addAnimation:springAnimation forKey:#"scaleXY1"];
the mask.PNG is just a white image with a hole in the center.
when I use UIBezierPath to draw the contents and assign it to the layer, the scale animation seems to happen from the top-left corner of the layer;
but if I instead use a image , the scale animation seems to happen from the center of it.
what I want is to generate dynamic contents with Core Graphics and scale the layer like when I use mask.PNG
update:
UIBezierPath
mask.PNG
the mask.PNG is generated from the UIBezierPath code, with the PaintCode.