iOS 带渐变背景动画的折线统计图

-(void)createview{

    //绘制贝赛尔曲线

    NSArray *pointArray2 = @[[NSValue valueWithCGPoint:CGPointMake(30, 30)],[NSValue valueWithCGPoint:CGPointMake(60, 20)],[NSValue valueWithCGPoint:CGPointMake(90, 70)],[NSValue valueWithCGPoint:CGPointMake(120,10)]];

    UIBezierPath *path = [UIBezierPath bezierPath];

    path.lineWidth = 2;

    for(int i=0; i<[pointArray2 count]-1; i++){

        CGPoint firstPoint = [[pointArray2 objectAtIndex:i] CGPointValue];

        CGPoint secondPoint = [[pointArray2 objectAtIndex:i+1] CGPointValue];

        [path moveToPoint:firstPoint];

        

        //绘制曲线

        [path addCurveToPoint:secondPoint controlPoint1:CGPointMake((secondPoint.x-firstPoint.x)/2+firstPoint.x, firstPoint.y) controlPoint2:CGPointMake((secondPoint.x-firstPoint.x)/2+firstPoint.x, secondPoint.y)];

        [[UIColor blueColor] set];

    }

    path.lineCapStyle = kCGLineCapRound;

    [path strokeWithBlendMode:kCGBlendModeNormal alpha:1];

    [path stroke];

    

    //将path 放在layer上显示

    

    CAShapeLayer *layer = [CAShapeLayer layer];

    layer.backgroundColor = [UIColor clearColor].CGColor;

    layer.fillColor = [UIColor clearColor].CGColor;

    layer.path = path.CGPath;

    layer.strokeColor = [UIColor blueColor].CGColor;

    layer.lineWidth = 2;

    layer.strokeStart = 0.0;

    layer.strokeEnd = 1.0;

    [self.view.layer addSublayer:layer];

    

    //画曲线上的点

    for(int i=0; i<[pointArray2 count]; i++){

        [self drawPoint:[[pointArray2 objectAtIndex:i] CGPointValue]];

    }

    

    //绘制渐变图层layer

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];

    gradientLayer.colors = @[(__bridge id)YAYIColorAlpha(57, 183, 252, 0.3).CGColor, (__bridge id)YAYIColorAlpha(255, 255, 255, 0.0).CGColor];

    gradientLayer.locations = @[@.5,@1.0];

    gradientLayer.startPoint = CGPointMake(0, 0);

    gradientLayer.shadowPath = path.CGPath;

    gradientLayer.frame = CGRectMake(30, 0, 100, 100);

  

    

    //绘制封闭曲线路径，为下面截取渐变图层

    UIBezierPath *curveCopy = [path copy];

    [curveCopy moveToPoint:CGPointMake(30,80)];

    [curveCopy addLineToPoint:CGPointMake(30, 30)];

    [curveCopy addLineToPoint:CGPointMake(60, 20)];

    [curveCopy addLineToPoint:CGPointMake(90, 70)];

    [curveCopy addLineToPoint:CGPointMake(120, 10)];

    [curveCopy addLineToPoint:CGPointMake(120, 80)];

    

    //遮罩图层

    CAShapeLayer *shadeLayer2 = [CAShapeLayer layer];

    shadeLayer2.path = curveCopy.CGPath;

    CALayer *baseLayer = [CALayer layer];

    baseLayer.frame = CGRectMake(0, 0, 100, 100);

    [baseLayer addSublayer:gradientLayer];

    [baseLayer setMask:shadeLayer2];

    [self.view.layer addSublayer:baseLayer];

    

    //创建关键帧动画

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    

    animation.fromValue = @0;

    

    animation.toValue = @1;

    

    animation.repeatCount = 1;

    

    animation.duration = 5.f;

    

    [layer addAnimation:animation forKey:nil];

    

    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"endPoint.y"];

    

    animation1.fromValue = @0;

    

    animation1.toValue = @0.5;

    

    animation1.repeatCount = 1;

    

    animation1.duration = 4.6f;

    

    [gradientLayer addAnimation:animation1 forKey:nil];

}

- (void)drawPoint:(CGPoint)point {

    

    CALayer * pointLayer = [CALayer layer];

    pointLayer.bounds = CGRectMake(0, 0, 8, 8);

    pointLayer.cornerRadius = 4;

    pointLayer.position = point;

    pointLayer.backgroundColor = [UIColor whiteColor].CGColor;

    pointLayer.opaque = YES;

    [self.view.layer addSublayer:pointLayer];

    

    

    CALayer * pointLayer2 = [CALayer layer];

    pointLayer2.bounds = CGRectMake(0, 0, 6, 6);

    pointLayer2.cornerRadius = 3;

    pointLayer2.position = point;

    pointLayer2.backgroundColor = [UIColor redColor].CGColor;

    pointLayer2.opaque = YES;

    [self.view.layer addSublayer:pointLayer2];

}