一、前言与背景
环形图在显示得分高低（占比）有着很直观的效果，本篇文章在环形图的基础上介绍了一种得分动态显示效果的实现。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
