iOS仿支付宝芝麻信用仪表盘效果

仿支付宝芝麻信用仪表盘效果

一、主要思路

• 1.圆环上绿点的旋转 

• 2.分数值及提示语的变化 

• 3.背景色的变化

二、程序实现

一. 自定义ZLDashboardView仪表盘文件:

 根据跃动数字, 确定百分比,  现在的跳动数字 ----> 背景颜色变化

.h 文件里公开跃动数字刷新方法:

1 2 3 4 5 6

@property (nonatomic, copy)  void (^TimerBlock)(NSInteger); /**   *  跃动数字刷新   *   */ - ( void )refreshJumpNOFromNO:(NSString *)startNO toNO:(NSString *)toNO;

.m 文件

1. 自定义Lift cycle

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

#pragma mark - Life cycle - (instancetype)initWithFrame:(CGRect)frame {          self = [super initWithFrame:frame];          if  (self) {                  self.backgroundColor = [UIColor clearColor];                  self.circelRadius = self.frame.size.width - 10.f;                  self.lineWidth = 2.f;                  self.startAngle = -200.f;                  self.endAngle = 20.f;                  // 尺寸需根据图片进行调整          self.bgImageView.frame = CGRectMake(6, 6, self.circelRadius, self.circelRadius * 2 / 3);          self.bgImageView.backgroundColor = [UIColor clearColor];          [self addSubview:self.bgImageView];                 // 添加圆框          [self setupCircleBg];                  // 光标          [self setupMarkerImageView];                  // 添加跃动数字 及 提示语          [self setupJumpNOView];      }          return  self; }

2.添加圆框

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

- ( void )setupCircleBg {          // 圆形路径      UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.width / 2, self.height / 2)                                                          radius:(self.circelRadius - self.lineWidth) / 2                                                      startAngle:degreesToRadians(self.startAngle)                                                        endAngle:degreesToRadians(self.endAngle)                                                       clockwise:YES];          // 底色      self.bottomLayer = [CAShapeLayer layer];          self.bottomLayer.frame = self.bounds;          self.bottomLayer.fillColor = [[UIColor clearColor] CGColor];          self.bottomLayer.strokeColor = [[UIColor  colorWithRed:206.f / 256.f green:241.f / 256.f blue:227.f alpha:1.f] CGColor];          self.bottomLayer.opacity = 0.5;          self.bottomLayer.lineCap = kCALineCapRound;          self.bottomLayer.lineWidth = self.lineWidth;          self.bottomLayer.path = [path CGPath];      [self.layer addSublayer:self.bottomLayer]; // 240 是用整个弧度的角度之和 |-200| + 20 = 220 //    [self createAnimationWithStartAngle:degreesToRadians(self.startAngle) //                               endAngle:degreesToRadians(self.startAngle + 220 * 1)];      }

3.设置光标

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

- ( void )setupMarkerImageView {          if  (_markerImageView) {                  return ;      }      _markerImageView = [[UIImageView alloc] init];      _markerImageView.backgroundColor = [UIColor clearColor];      _markerImageView.layer.backgroundColor = [UIColor greenColor].CGColor;      _markerImageView.layer.shadowColor = [UIColor whiteColor].CGColor;      _markerImageView.layer.shadowOffset = CGSizeMake(0, 0);      _markerImageView.layer.shadowRadius = kMarkerRadius*0.5;      _markerImageView.layer.shadowOpacity = 1;      _markerImageView.layer.masksToBounds = NO;          self.markerImageView.layer.cornerRadius = self.markerImageView.frame.size.height / 2;      [self addSubview:self.markerImageView];      _markerImageView.frame = CGRectMake(-100, self.height, kMarkerRadius, kMarkerRadius); }