效果图
xxx.gif
动画分为两个部分 一是线条的绘制部分,另外一个是最前面的光标的沿着圆弧的移动
1.添加控件和绘制线条,控件有两个 一是显示信用图片所需要的imageView,另一个是最前面的高亮光标用UIView即可
//展示信用等级的图片
-(UIImageView *)mainImageView{
if (_mainImageView == nil) {
_mainImageView = [[UIImageView alloc]initWithFrame:CGRectMake(5, 5, self.radius, self.radius * 2 / 3)];
[self addSubview:_mainImageView];
}
return _mainImageView;
}
//光标
- (UIView *)markerView {
if (nil == _markerView) {
_markerView = [[UIView alloc] init];
_markerView.backgroundColor = RGB(32, 178, 170);
_markerView.alpha = 0.7;
_markerView.layer.shadowColor = RGB(32, 178, 170).CGColor;
_markerView.layer.shadowOffset = CGSizeMake(0, 0);
_markerView.layer.shadowRadius = 3.f;
_markerView.layer.shadowOpacity = 1;
[self addSubview:_markerView];
}
return _markerView;
}
绘制线条.分为底线和动线 底线是一种颜色绘制,移动的线是渐变的,信用等级越高 线条越区域绿色.用UIBezierPath 绘制底线 用CAGradientLayer绘制渐变线
-(void)drawCicre{
//绘制底线
CGPoint circleCenter = CGPointMake(self.frame.size.width / 2, self.frame.size.width / 2);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:circleCenter radius:self.radius / 2 startAngle:DEGREES_TO_RADIANS(self.stareAngle) endAngle:DEGREES_TO_RADIANS(self.endAngle) clockwise:YES];
self.bottomShapeLayer = [CAShapeLayer layer];
self.bottomShapeLayer.fillColor = [[UIColor clearColor] CGColor];
self.bottomShapeLayer.strokeColor = [[UIColor colorWithRed:206.f / 256.f green:241.f / 256.f blue:227.f alpha:1.f] CGColor];
self.bottomShapeLayer.opacity = 1;
self.bottomShapeLayer.lineCap = kCALineCapRound;
self.bottomShapeLayer.lineWidth = self.lineWidth;
self.bottomShapeLayer.path = [path CGPath];
[self.layer addSublayer:self.bottomShapeLayer];
//绘制渐变线
self.progressLayer = [CAShapeLayer layer];
self.progressLayer.fillColor = [[UIColor clearColor] CGColor];
self.progressLayer.strokeColor = [[UIColor whiteColor] CGColor];
self.progressLayer.lineCap = kCALineCapRound;
self.progressLayer.lineWidth = self.lineWidth;
self.progressLayer.path = [path CGPath];
self.progressLayer.strokeEnd = 0;
[self.bottomShapeLayer setMask:self.progressLayer];
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.frame = self.bounds;
[self.gradientLayer setColors:[NSArray arrayWithObjects:
(id)[RGB(255, 99, 71) CGColor],
(id)[RGB(255, 236, 139) CGColor],
(id)[RGB(238, 238, 0) CGColor],
(id)[RGB(127, 255, 0) CGColor],
nil]];
[self.gradientLayer setLocations:@[@0.2, @0.5, @0.7, @1]];
[self.gradientLayer setStartPoint:CGPointMake(0, 0)];
[self.gradientLayer setEndPoint:CGPointMake(1, 0)];
[self.gradientLayer setMask:self.progressLayer];
[self.layer addSublayer:self.gradientLayer];
[self animationWithStartAngle:DEGREES_TO_RADIANS(self.stareAngle)
endAngle:DEGREES_TO_RADIANS(self.stareAngle + 220 * 0)];
}
2动画部分
1)光标的移动动画
- (void)animationWithStartAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle {
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = 2;
pathAnimation.repeatCount = 1;
// 设置动画路径
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddArc(path, NULL, self.frame.size.width / 2, self.frame.size.height / 2, (self.radius - 4 / 2) / 2, startAngle, endAngle, 0);
pathAnimation.path = path;
CGPathRelease(path);
self.markerView.frame = CGRectMake(-100, self.frame.size.height, 6, 6);
self.markerView.layer.cornerRadius = 3;
[self.markerView.layer addAnimation:pathAnimation forKey:@"move"];
}
2)线条绘制动画
- (void)circleAnimation {
[CATransaction begin];
[CATransaction setDisableActions:NO];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
[CATransaction setAnimationDuration:0];
self.progressLayer.strokeEnd = 0;
[CATransaction commit];
[CATransaction begin];
[CATransaction setDisableActions:NO];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
[CATransaction setAnimationDuration:2];
self.progressLayer.strokeEnd = _percent / 100.0;
[CATransaction commit];
}
