用Layer层蒙板实现圆形滚动条效果

滚动效果

Mask

Mask又叫蒙板，顾名思义Mask就是layer上的一层layer，于普通的layer层不同的是，Mask Layer是不会显示在界面上的。它的主要功能是通过自身的alpha值来确定被它遮盖的layer层上的点是否显示。如果结果为不显示，那么屏幕上会有什么样的效果呢？难道会直接显示黑点吗？当然不会了，系统会将被遮盖layer的下一层layer点显示出来。这样就间接的形成了被遮盖层透明的效果。

实现方案

• BlackLayer：该层主要用于显示黑色环状的主体结构，位于整个三层Layer的最下层。
• RedLayer：该层是被遮盖层，它与BlackLayer层完全重叠，如果没有Mask层的遮盖的话，屏幕上实际显示的就应该是它了。
• MaskLayer：该层决定了RedLayer的显示区域，这里我们使用Bezier曲线将RedLayer显示出一个特定弧度的角。而圆周上其它弧度则显示的是BlackLayer。
• 动画：将RedLayer绕自身圆心旋转，这样就能形成进度条的旋转动画了。

实现代码

    CGRect cycleFrame = CGRectMake(50, 50, 100, 100);
    UIBezierPath* cyclePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
    
    CAShapeLayer* blackCycleLayer = [CAShapeLayer layer];
    [blackCycleLayer setFrame:cycleFrame];
    [blackCycleLayer setFillColor:[UIColor clearColor].CGColor];
    [blackCycleLayer setLineWidth:1.0f];
    [blackCycleLayer setStrokeColor:[UIColor blackColor].CGColor];
    [blackCycleLayer setPath:cyclePath.CGPath];
    [self.view.layer addSublayer:blackCycleLayer];
    
    CAShapeLayer* redCycleLayer = [CAShapeLayer layer];
    [redCycleLayer setFrame:cycleFrame];
    [redCycleLayer setFillColor:[UIColor clearColor].CGColor];
    [redCycleLayer setLineWidth:1.0f];
    [redCycleLayer setStrokeColor:[UIColor redColor].CGColor];
    [redCycleLayer setPath:cyclePath.CGPath];
    [self.view.layer addSublayer:redCycleLayer];

    CAShapeLayer* maskLayer = [CAShapeLayer layer];
    [maskLayer setFillColor:[UIColor yellowColor].CGColor];
    [maskLayer setLineWidth:1.0f];
    [maskLayer setStrokeColor:[UIColor blueColor].CGColor];
    UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:50 startAngle:0.0f endAngle:M_PI_4 clockwise:YES];
    [maskLayer setPath:path.CGPath];
    [redCycleLayer setMask:maskLayer];
    
    CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    [rotationAnimation setRepeatCount:HUGE_VALF];
    [rotationAnimation setDuration:2.0f];
    [rotationAnimation setToValue:@(2*M_PI)];
    [redCycleLayer addAnimation:rotationAnimation forKey:nil];