仪表盘绘制

先看下效果图：

仪表盘.gif

仪表盘UI界面可以分为两部分

1 - 表盘刻度：

刻度是一段段短线，我使用的是 UIBezierPath + CAShapeLayer 绘制而成。
每段线的坐标点计算用到了三角函数，很简单的正余弦函数。

2 - 绘制指针，实现指针旋转动画：

UIBezierPath + CAShapeLayer 绘制指针箭头
CABasicAnimation 实现指针旋转动画，要实现指针绕底部旋转，需要改变指针的锚点（anchorPoint属性）

代码解析

绘制表盘刻度短线

绘制刻度线.png

线的实现原理：

已知原点坐标、角度k、线长L，求：A点坐标和 B点坐标

坐标点计算.png

计算公式：

长度系数 radioL = 原点到B点的长度 / L

By = sin(k) * L * radioL

Bx = cos(k) * L * radioL

Ay = sin(k) * L

Ax = cos(k) * L

- (void)addLineWithIndex:(NSInteger ) index{
    CGFloat boldRadio = 0.86;//【大刻度 粗线】 线的起点到坐标原点的距离 / 线长
    CGFloat thinRadio = 0.95;//【小刻度 细线】 线的起点到坐标原点的距离 / 线长
    CGFloat L = self.frame.size.width * 0.5 - 10;
    CGFloat arc = 5*(index / 180.0 * M_PI);
    CGFloat sinA = sin(arc);
    CGFloat cosA = cos(arc);
    CGFloat startY = sinA * L * ((index%2)?thinRadio:boldRadio);
    CGFloat startX = cosA * L * ((index%2)?thinRadio:boldRadio);
    CGFloat endY = sinA * L;
    CGFloat endX = cosA * L;
    CGPoint startPoint = CGPointMake(0.5 * self.frame.size.width - startX, 0.5 * self.frame.size.height - startY);
    CGPoint endPoint = CGPointMake(0.5 * self.frame.size.width - endX, 0.5 * self.frame.size.height - endY);
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:startPoint];
    [path addLineToPoint:endPoint];
    [path closePath];
    
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    shapeLayer.lineWidth = ((index%2)?1:3);//改变线粗
    shapeLayer.strokeColor = [UIColor colorWithRed:0.5 green:0.3 blue:index/36.0*1 alpha:1].CGColor;
    shapeLayer.path = path.CGPath;
    shapeLayer.lineCap = kCALineCapSquare;
    [self.layer addSublayer:shapeLayer];
    [self.shapeLayers addObject:shapeLayer];
}

调用2次

for (NSInteger i = 0; i < 2; i++) {
        [self addLineWithIndex:i];
    }

绘制两次线.png

要绘制整表盘，只需循环即可

- (void)draw{
    for (CAShapeLayer *layer in self.shapeLayers) {
        [layer removeFromSuperlayer];
    }
    [self.shapeLayers removeAllObjects];
    [self drawLine:0];
//    [self drawPointLayer];
}

- (void)drawLine:(NSInteger) index{
    __block NSInteger t = index;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.02 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self addLineWithIndex:index];
        t++;
        if (index < 36) {
            [self drawLine:t];
        }else{
        }
    });
}

- (void)addLineWithIndex:(NSInteger ) index{
    CGFloat boldRadio = 0.86;//【大刻度 粗线】 线的起点到坐标原点的距离 / 线长
    CGFloat thinRadio = 0.95;//【小刻度 细线】 线的起点到坐标原点的距离 / 线长
    CGFloat L = self.frame.size.width * 0.5 - 10;
    CGFloat arc = 5*(index / 180.0 * M_PI);
    CGFloat sinA = sin(arc);
    CGFloat cosA = cos(arc);
    CGFloat startY = sinA * L * ((index%2)?thinRadio:boldRadio);
    CGFloat startX = cosA * L * ((index%2)?thinRadio:boldRadio);
    CGFloat endY = sinA * L;
    CGFloat endX = cosA * L;
    CGPoint startPoint = CGPointMake(0.5 * self.frame.size.width - startX, 0.5 * self.frame.size.height - startY);
    CGPoint endPoint = CGPointMake(0.5 * self.frame.size.width - endX, 0.5 * self.frame.size.height - endY);
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:startPoint];
    [path addLineToPoint:endPoint];
    [path closePath];
    
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    shapeLayer.lineWidth = ((index%2)?1:3);
    shapeLayer.strokeColor = [UIColor colorWithRed:0.5 green:0.3 blue:index/36.0*1 alpha:1].CGColor;
    shapeLayer.path = path.CGPath;
    shapeLayer.lineCap = kCALineCapSquare;
    [self.layer addSublayer:shapeLayer];
    [self.shapeLayers addObject:shapeLayer];
}

表盘.png

绘制指针

- (void)drawPointLayer{
    _pointView = [[UIView alloc] initWithFrame:CGRectMake(self.frame.size.width * 0.5 - 5, 0, 10, self.frame.size.height)];
    _pointView.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:0];
    [self addSubview:_pointView];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path addArcWithCenter:CGPointMake(_pointView.frame.size.width * 0.5, _pointView.frame.size.height)
                    radius:10
                startAngle:0
                  endAngle:2 * M_PI
                 clockwise:YES];
    [path addLineToPoint:CGPointMake(_pointView.frame.size.width * 0.5, _pointView.frame.size.height * 0.5 + 35)];
    [path addLineToPoint:CGPointMake(_pointView.frame.size.width * 0.5 - 10, _pointView.frame.size.height)];
//    [path closePath];
    _pointLayer = [[CAShapeLayer alloc] init];
    _pointLayer.lineWidth = 3;
    _pointLayer.strokeColor = [UIColor whiteColor].CGColor;
    _pointLayer.path = path.CGPath;
    _pointLayer.lineCap = kCALineCapSquare;
    [_pointView.layer addSublayer:_pointLayer];
    _pointView.layer.anchorPoint = CGPointMake(0.5, 1);
    _arc = -0.5 * M_PI;
    self.pointView.transform = CGAffineTransformRotate(self.pointView.transform, _arc);
}

实现指针动画

- (void)setProgress:(CGFloat)progress{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    animation.duration = 1;
    animation.repeatCount = 1;
    animation.fromValue = [NSNumber numberWithFloat:_arc];
    _arc += (progress - _progress) * M_PI;
    animation.toValue = [NSNumber numberWithFloat:_arc];
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [_pointView.layer addAnimation:animation forKey:@"rotate-layer"];
    _progress = progress;
}

注意：这里动画实现不能用transform实现，因为transform实现旋转动画时，会抄近路，当旋转角度大于180°时，旋转效果就有问题了。

github地址：JCDashboardView