iOS

如果做一个展示进度的刻度盘

在不断填坑中前进。。

Posted by 三十一 on August 18, 2017

如果做一个展示进度的刻度盘

先上效果图:

1,如何绘制弧形间隔的刻度线。

首先是如何绘制一个连续的弧形的线条,这个很简单:

    UIBezierPath *tickPath = [UIBezierPath bezierPathWithArcCenter:cneter radius:radius - 12 startAngle:startAngle endAngle:endAngle clockwise:YES];
    CAShapeLayer *perLayer = [CAShapeLayer layer];
    perLayer.strokeColor = strokeColor.CGColor;;
    perLayer.fillColor = [UIColor clearColor].CGColor;
    perLayer.allowsEdgeAntialiasing=YES;
    perLayer.contentsScale = [UIScreen mainScreen].scale;
    perLayer.lineWidth   = 0.6;
    perLayer.path = tickPath.CGPath;
    [self.layer addSublayer:perLayer];

其实带有间隔的刻度线原理是跟这个一致的,我们只需要想着每个分割的刻度是一个连续的圆弧线,只不过它的 startAngleendAngle 差值很小。然后外面其实的一段段的绘制一个个 CAShapeLayer 的弧线。

具体的代码就是:

    CGPoint cneter = self.center;
    CGFloat radius = self.radius;
    CGFloat perAngle = (endAngle - startAngle)/scaleLineCount;
    UIColor *strokeColor = self.normalColor;
    //绘制最外围刻度列表
    for (NSInteger i = 0; i<= scaleLineCount; i++) {
        CGFloat startAngel = (startAngle+ perAngle * i);
        CGFloat endAngel   = startAngel + perAngle/5;
        UIBezierPath *tickPath = [UIBezierPath bezierPathWithArcCenter:cneter radius:radius startAngle:startAngel endAngle:endAngel clockwise:YES];
        CAShapeLayer *perLayer = [CAShapeLayer layer];
        perLayer.strokeColor = strokeColor.CGColor;;
        perLayer.allowsEdgeAntialiasing=YES;
        perLayer.contentsScale = [UIScreen mainScreen].scale;
        perLayer.lineWidth   = scaleLineWidth;
        perLayer.path = tickPath.CGPath;
        [self.layer addSublayer:perLayer];
        [self.layerViewsArray addObject:perLayer];

    }

其中 scaleLineCount 是要分成多少刻度。

2,如何给进度加上动画

动画就简单粗暴了,一个个修改 CAShapeLayer 的背景色。

CAShapeLayer *perLayer = self.layerViewsArray[self.index];
perLayer.strokeColor = self.hightColor.CGColor;;
[self.layerHeightViewsArray addObject:perLayer];

3,加个动画怎么了


demo 已上传 SYPanView