UIView圆形蒙版动画

Question

I have an abstract strange shaped UIView. And I need to display a smooth appearance animation.

I assume I should apply that animation to the mask above that view. The mask is going to be circle shaped. So user will see the 1'2'3'4' sequence. How can I implement that? I suppose I should apply some affine transformation to the mask view. In that case, what should be the original shape of the mask? A vertical line?

Answer 1

A simple example,suppose I have a 100*100 imageview ,

Note:to make it simple,I use hard code numbers

 CAShapeLayer * maskLayer = [CAShapeLayer layer];
maskLayer.bounds = CGRectMake(0, 0, 100, 100);
maskLayer.position = CGPointMake(50, 50);
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50.0, 50.0) radius:50 startAngle:0 endAngle:M_PI *2 clockwise:true];
maskLayer.path = path.CGPath;
maskLayer.fillColor = [UIColor clearColor].CGColor;
maskLayer.strokeColor = [UIColor blackColor].CGColor;
maskLayer.strokeEnd = 0.0;
maskLayer.lineWidth = 100;
self.imageview.layer.mask = maskLayer;

CABasicAnimation * animation = [CABasicAnimation animation];
animation.keyPath = @"strokeEnd";
animation.toValue = @(1.0);
animation.duration = 2.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;

[maskLayer addAnimation:animation forKey:@"keyFrame"];