美文网首页动画
用Layer层蒙板实现圆形滚动条效果

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

作者: 秦砖 | 来源:发表于2016-11-22 10:17 被阅读28次
先行附上效果图 滚动效果

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];

相关文章

网友评论

    本文标题:用Layer层蒙板实现圆形滚动条效果

    本文链接:https://www.haomeiwen.com/subject/indvyttx.html