[iOS]实现支付宝中芝麻信用曲线绘制的动画

效果图

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];
  }

详细源码地址
https://github.com/canyeyujin/zhimaAnimation