iOS得分动态显示图

一、前言与背景

环形图在显示得分高低（占比）有着很直观的效果，本篇文章在环形图的基础上介绍了一种得分动态显示效果的实现。demo的重点是讲述思路，要做到大而全的产品级，能，但违背了初衷。所以有需要的读者请在理解的基础上，根据自身项目的需要进行完善。另外：本篇不依赖任何第三方的代码，尤其适合对动画有兴趣和需求的初级读者分析学习。
首先，看下效果图

得分静态效果图@2x.png

二、需求分析与思路

分析：要实现这个效果，可分三步：
1.绘制一个给定半径和圆心的灰色背景圆环；
2.绘制一个彩色渐变的弧形；
3.绘制数值等文本内容

三、实现

首先创建一个继承自UIView的子类XRScoreView，所有的绘制都是在其内部实现，并开放一些接口供外部对象使用。
类声明和外部接口：

@interface XRScoreView : UIView

@property (nonatomic, assign) BOOL showAnimation;
@property (nonatomic, assign) CGFloat animationDuration;

@property (nonatomic, assign) CGFloat maxScore;
@property (nonatomic, assign) CGFloat score;

- (void)strokePath;

@end

类内部属性：

@interface XRScoreView ()

@property (nonatomic, assign) CGFloat radius;
@property (nonatomic, assign) CGPoint centerPoint;

@property (nonatomic, strong) UILabel *scoreValueLabel;
@property (nonatomic, assign) CGFloat currentScore;

@end

关键词解释：半径、圆心、是否展示动画效果、动画时长、最大分数、要展示的分数、数值文本label。

1.绘制一个给定半径和圆心的灰色背景圆环

这是最基础也是最容易实现的部分,使用 CAShapeLaye配合UIBezierPath即可在layer层完成绘制。

- (void)drawBackGrayCircle {
    UIBezierPath *circlePath = [[UIBezierPath alloc] init];
    [circlePath addArcWithCenter:self.centerPoint radius:self.radius startAngle:-M_PI_2 endAngle:2*M_PI clockwise:YES];
    
    CAShapeLayer *circleLayer = [[CAShapeLayer alloc] init];
    circleLayer.lineWidth = 10;
    circleLayer.fillColor = nil;
    circleLayer.strokeColor = [UIColor colorWithRed:244/255.0 green:244/255.0 blue:244/255.0 alpha:1].CGColor;
    circleLayer.path = circlePath.CGPath;
    
    [self.layer addSublayer:circleLayer];
}

2.绘制一个彩色渐变的弧形

这一步难度较大，分2个小步骤实现：1）.绘制一个纯色的弧形；2）.绘制一个渐变的弧形。本书书写时，代码还没整合完，先介绍到步骤1）。知识点：弧线封闭端lineCap使用kCALineCapRound枚举，弧形的线宽要略大于背景圆环。if (self.showAnimation){}用户加载动画，后面讲述。

- (void)drawCircle {
    UIBezierPath *circlePath = [[UIBezierPath alloc] init];
    CGFloat endAngle = self.score/self.maxScore * 2 * M_PI - M_PI_2;
    [circlePath addArcWithCenter:self.centerPoint radius:self.radius startAngle:-M_PI_2 endAngle:endAngle clockwise:YES];

    CAShapeLayer *circleLayer = [[CAShapeLayer alloc] init];
    circleLayer.lineWidth = 14;
    circleLayer.fillColor = nil;
    circleLayer.strokeColor = [UIColor redColor].CGColor;
    circleLayer.path = circlePath.CGPath;
    circleLayer.lineCap = kCALineCapRound;
    
    if (self.showAnimation) {
        CABasicAnimation *clockAnimation = [self animationWithDuration:self.animationDuration];
        [circleLayer addAnimation:clockAnimation forKey:nil];
    }
    
    [self.layer addSublayer:circleLayer];
}

3.绘制数值等文本内容

这一步属于基础的UIView的内容，重点是如何动态的显示最新、或不断上升到给定的数值。本文使用CADisplayLink类实现这个效果。CADisplayLink刷新频率与屏幕刷新频率一致，不会有任何卡顿的异常。

- (void)loadNoteInfo {
    self.scoreValueLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.radius, 50)];
    self.scoreValueLabel.font = [UIFont systemFontOfSize:36];
    self.scoreValueLabel.textColor = [UIColor blackColor];
    self.scoreValueLabel.textAlignment = NSTextAlignmentCenter;
    self.scoreValueLabel.center = self.centerPoint;
    [self addSubview:self.scoreValueLabel];
    
    if (self.showAnimation) {
        CADisplayLink *displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateScore:)];
        [displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
    }else {
        self.scoreValueLabel.text = [NSString stringWithFormat:@"%.1f",self.score];
    }
}

4.动画的实现

一个是数值的动态刷新、一个是彩色弧形的动画。

- (void)updateScore:(CADisplayLink *)displayLink {
    self.currentScore += 1.0;
    
    if (self.currentScore >= self.score) {
        [displayLink invalidate];
        self.scoreValueLabel.text = [NSString stringWithFormat:@"%.1f",self.score];
    }else {
        self.scoreValueLabel.text = [NSString stringWithFormat:@"%.1f",self.currentScore];
    }
}

- (CABasicAnimation *)animationWithDuration:(CGFloat)duraton {
    CABasicAnimation * fillAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    fillAnimation.duration = duraton;
    fillAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    fillAnimation.fillMode = kCAFillModeForwards;
    fillAnimation.removedOnCompletion = NO;
    fillAnimation.fromValue = @(0.f);
    fillAnimation.toValue = @(1.f);
    return fillAnimation;
}

5.内部调用逻辑

重写、初始化相关变量默认值、抽象出外部方法strokePath

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.radius = 100;
        self.centerPoint = CGPointMake(frame.size.width/2.0, frame.size.height/2.0);
        self.showAnimation = YES;
        self.animationDuration = 1.0f;
        self.maxScore = 100;
        self.score = 60;
    }
    return self;
}

- (void)strokePath {
    [self removeAllSubLayers];
    
    [self drawBackGrayCircle];
    [self drawCircle];
    [self loadNoteInfo];
}

6.外部使用

创建一个视图控制器，导入头文件，添加视图属性变量，简单的赋值即可。

#import "XRScoreViewController.h"
#import "XRScoreView.h"

@interface XRScoreViewController ()

@property (nonatomic, strong) XRScoreView *scoreView;

@end

@implementation XRScoreViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor whiteColor];

    self.scoreView = [[XRScoreView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];
    self.scoreView.center = self.view.center;
    self.scoreView.animationDuration = 0.5f;
    [self.view addSubview:self.scoreView];
    
    self.scoreView.score = 70;
    [self.scoreView strokePath];
}

四、运行动态效果图

得分显示动画.gif

五、GitHub下载地址欢迎点赞。