前言
最近看了下SVProgressHUD源码，看到了关于实现网络请求加载中的旋转渐变圆环动画，自己也尝试实现了一下，在实现过程中发现CALayer的mask属性有一些“奇怪”，起初以为是有什么属性没设置正确，然后去查了一下相关资料，发现mask具有一些特殊性，mask属性也非常强大，灵活运用可以实现很多动画和显示效果。本文最终实现旋转渐变圆环动画，并针对CALayer的mask属性的特殊性进行讲解。
1-3、模仿SVProgressHUD实现旋转渐变圆环动画实现过程，
4、mask属性测试
5、旋转渐变圆环另一种实现方法(方便进一步理解mask)
1.通过CAShapeLayer和UIBezierPath实现圆环效果
self.strokeColor = [UIColor orangeColor];
self.strokeThickness = 3;
self.radius = 20;
//背景视图
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 400, 200, 200)];
view.backgroundColor = [UIColor blueColor];
[self.view addSubview:view];
//圆环
CGPoint arcCenter = CGPointMake(self.radius+self.strokeThickness/2+5, self.radius+self.strokeThickness/2+5);
UIBezierPath* smoothedPath = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:self.radius startAngle:(CGFloat) (M_PI*3/2) endAngle:(CGFloat) (M_PI*4/2 + M_PI*3/2) clockwise:YES];
_indefiniteAnimatedLayer2 = [CAShapeLayer layer];
_indefiniteAnimatedLayer2.contentsScale = [[UIScreen mainScreen] scale];
_indefiniteAnimatedLayer2.frame = CGRectMake(0.0f, 0.0f, arcCenter.x*2, arcCenter.y*2);
_indefiniteAnimatedLayer2.fillColor = [UIColor clearColor].CGColor;
_indefiniteAnimatedLayer2.strokeColor = self.strokeColor.CGColor;
_indefiniteAnimatedLayer2.lineWidth = self.strokeThickness;
_indefiniteAnimatedLayer2.lineCap = kCALineCapRound;
_indefiniteAnimatedLayer2.lineJoin = kCALineJoinBevel;
_indefiniteAnimatedLayer2.path = smoothedPath.CGPath;
CGFloat widthDiff = CGRectGetWidth(view.bounds) - CGRectGetWidth(_indefiniteAnimatedLayer2.bounds);
CGFloat heightDiff = CGRectGetHeight(view.bounds) - CGRectGetHeight(_indefiniteAnimatedLayer2.bounds);
_indefiniteAnimatedLayer2.position = CGPointMake(CGRectGetWidth(view.bounds) - CGRectGetWidth(_indefiniteAnimatedLayer2.bounds) / 2 - widthDiff / 2, CGRectGetHeight(view.bounds) - CGRectGetHeight(_indefiniteAnimatedLayer2.bounds) / 2 - heightDiff / 2);
[view.layer addSublayer:self.indefiniteAnimatedLayer2];
通过CAShapeLayer和UIBezierPath实现圆环效果
2.CAGradientLayer实现渐变
SVProgressHUD的渐变是用的一张PNG图片，这里我改用CAGradientLayer来实现类似的效果
SVProgressHUD使用的png渐变图片
CAGradientLayer实现效果
CALayer *maskLayer = [CALayer layer];
// maskLayer.contents = (__bridge id)[[UIImage imageNamed:@"angle-mask"] CGImage];
maskLayer.frame = _indefiniteAnimatedLayer2.bounds;
_indefiniteAnimatedLayer2.mask = maskLayer;//设置mask 遮罩图层
//向maskLayer图层添加渐变图层
CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
gradientLayer1.frame = CGRectMake(0, 0, maskLayer.frame.size.width, maskLayer.frame.size.height/2);
gradientLayer1.startPoint = CGPointMake(0, 0);
gradientLayer1.endPoint = CGPointMake(1, 0);
[gradientLayer1 setColors:@[(__bridge id)[UIColor whiteColor].CGColor,(__bridge id)[UIColor colorWithWhite:1.0 alpha:0.5].CGColor]];
CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
gradientLayer2.frame = CGRectMake(0, maskLayer.frame.size.height/2, maskLayer.frame.size.width, maskLayer.frame.size.height/2);
gradientLayer2.startPoint = CGPointMake(1, 1);
gradientLayer2.endPoint = CGPointMake(0, 1);
[gradientLayer2 setColors:@[(__bridge id)[UIColor colorWithWhite:1.0 alpha:0.5].CGColor,(__bridge id)[UIColor colorWithWhite:1.0 alpha:0].CGColor]];
[maskLayer addSublayer:gradientLayer1];
[maskLayer addSublayer:gradientLayer2];
效果如下图：
添加mask后的效果
3.可以看到圆环渐变效果已经实现了，接下来就是需要使用CABasicAnimation来实现旋转动画,并将背景视图改为白色
NSTimeInterval animationDuration = 2;
CAMediaTimingFunction *linearCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
animation.fromValue = (id) 0;
animation.toValue = @(M_PI*2);
animation.duration = animationDuration;
animation.timingFunction = linearCurve;
animation.removedOnCompletion = NO;
animation.repeatCount = INFINITY;
animation.fillMode = kCAFillModeForwards;
animation.autoreverses = NO;
[_indefiniteAnimatedLayer2.mask addAnimation:animation forKey:@"rotate"];
最终效果
4.以上是实现旋转渐变圆环的全部步骤，但是本文还要着重研究的是CALayer的mask属性
首先mask是CALayer的一个属性，它本身也是一个CALayer类，但是mask比较特殊。当一个CALayer当做mask遮罩层时，那么这个CALayer的color属性就没有效果了；影响显示效果的透明度。其中backgroundCorlor可以设置透明度，而contents赋值为图片时，图片也是要区分有无透明通道。
比如layer1.mask = layer2,那么layer2就是遮罩图层，layer1就是被遮罩图层。
当layer2为透明(透明度为0)时，遮罩区域将不会显示出来；
当layer2为不透明(透明度为1)时，遮罩区域将会显示出来；
而当layer2为半透明(透明度为(0-1))时，遮罩区域也将会是半透明。
了解了这些后，就可以知道为什么上面的圆环会有渐变色了。在CAGradientLayer的colors属性中添加的颜色是：
[gradientLayer1 setColors:@[(__bridge id)[UIColor whiteColor].CGColor,(__bridge id)[UIColor colorWithWhite:1.0 alpha:0.5].CGColor]];
[gradientLayer2 setColors:@[(__bridge id)[UIColor colorWithWhite:1.0 alpha:0.5].CGColor,(__bridge id)[UIColor colorWithWhite:1.0 alpha:0].CGColor]];
这里我们将颜色改为红色，运行结果发现颜色没有任何改变。
[gradientLayer1 setColors:@[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor colorWithRed:1 green:0 blue:0 alpha:0.5].CGColor]];
[gradientLayer2 setColors:@[(__bridge id)[UIColor colorWithRed:1 green:0 blue:0 alpha:0.5].CGColor,(__bridge id)[UIColor colorWithRed:1 green:0 blue:0 alpha:0].CGColor]];
然后再将颜色改成如下：
[gradientLayer1 setColors:@[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor greenColor].CGColor]];
[gradientLayer2 setColors:@[(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor blueColor].CGColor]];
发现会变成如下图中的一个圆环，之所以会这样，就是因为上面虽然设置了颜色，但是透明度都是1，会将遮罩区域显示出来。
mask颜色透明度改变后
5.顺便给出另外一种实现渐变圆环方法，和上面的方法类似，只是图层层级不同。
第一种方法是将圆环图层添加到背景视图，渐变图层作为圆环图层的mask遮罩层；
第二种方法是将渐变图层添加到背景视图，然后将圆环图层作为背景视图的mask遮罩图层。
self.strokeColor = [UIColor redColor];
self.strokeThickness = 3;
self.radius = 20;
//背景视图
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
view.backgroundColor = [UIColor orangeColor];
[self.view addSubview:view];
//圆环
CGPoint arcCenter = CGPointMake(self.radius+self.strokeThickness/2+5, self.radius+self.strokeThickness/2+5);
UIBezierPath* smoothedPath = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:self.radius startAngle:(CGFloat) (M_PI*3/2) endAngle:(CGFloat) (M_PI*4/2 + M_PI*3/2) clockwise:YES];
_indefiniteAnimatedLayer = [CAShapeLayer layer];
_indefiniteAnimatedLayer.contentsScale = [[UIScreen mainScreen] scale];
_indefiniteAnimatedLayer.frame = CGRectMake(0.0f, 0.0f, arcCenter.x*2, arcCenter.y*2);
_indefiniteAnimatedLayer.fillColor = [UIColor clearColor].CGColor;
_indefiniteAnimatedLayer.strokeColor = self.strokeColor.CGColor;
_indefiniteAnimatedLayer.lineWidth = self.strokeThickness;
_indefiniteAnimatedLayer.lineCap = kCALineCapRound;
_indefiniteAnimatedLayer.lineJoin = kCALineJoinBevel;
_indefiniteAnimatedLayer.path = smoothedPath.CGPath;
CGFloat widthDiff = CGRectGetWidth(view.bounds) - CGRectGetWidth(_indefiniteAnimatedLayer.bounds);
CGFloat heightDiff = CGRectGetHeight(view.bounds) - CGRectGetHeight(_indefiniteAnimatedLayer.bounds);
_indefiniteAnimatedLayer.position = CGPointMake(CGRectGetWidth(view.bounds) - CGRectGetWidth(_indefiniteAnimatedLayer.bounds) / 2 - widthDiff / 2, CGRectGetHeight(view.bounds) - CGRectGetHeight(_indefiniteAnimatedLayer.bounds) / 2 - heightDiff / 2);
//maskLayer作为渐变图层的父图层，view.layer的子图层
CALayer *maskLayer = [CALayer layer];
// maskLayer.contents = (__bridge id)[[UIImage imageNamed:@"angle-mask"] CGImage];
maskLayer.frame = self.indefiniteAnimatedLayer.bounds;
maskLayer.position = self.indefiniteAnimatedLayer.position;
[view.layer addSublayer:maskLayer];
//向maskLayer图层添加渐变图层
CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
gradientLayer1.frame = CGRectMake(0, 0, maskLayer.frame.size.width, maskLayer.frame.size.height/2);
gradientLayer1.startPoint = CGPointMake(0, 0);
gradientLayer1.endPoint = CGPointMake(1, 0);
[gradientLayer1 setColors:@[(__bridge id)[UIColor orangeColor].CGColor,(__bridge id)[UIColor colorWithWhite:1.0 alpha:0.5].CGColor]];
CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
gradientLayer2.frame = CGRectMake(0, maskLayer.frame.size.height/2, maskLayer.frame.size.width, maskLayer.frame.size.height/2);
gradientLayer2.startPoint = CGPointMake(1, 1);
gradientLayer2.endPoint = CGPointMake(0, 1);
[gradientLayer2 setColors:@[(__bridge id)[UIColor colorWithWhite:1.0 alpha:0.5].CGColor,(__bridge id)[UIColor whiteColor].CGColor]];
[maskLayer addSublayer:gradientLayer1];
[maskLayer addSublayer:gradientLayer2];
//圆环图层作为遮罩图层
view.layer.mask = self.indefiniteAnimatedLayer;
NSTimeInterval animationDuration = 2;
CAMediaTimingFunction *linearCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
animation.fromValue = (id) 0;
animation.toValue = @(M_PI*2);
animation.duration = animationDuration;
animation.timingFunction = linearCurve;
animation.removedOnCompletion = NO;
animation.repeatCount = INFINITY;
animation.fillMode = kCAFillModeForwards;
animation.autoreverses = NO;
[maskLayer addAnimation:animation forKey:@"rotate"];
网友评论