折線圖效果

一：折線動畫

CAShapeLayer *lineLayer = [CAShapeLayer layer];
    lineLayer.path = linePath.CGPath;
    lineLayer.strokeColor = self.lineColor.CGColor;
    lineLayer.fillColor = [UIColor clearColor].CGColor;
    lineLayer.lineWidth = self.lineWidth;
    lineLayer.lineCap = kCALineCapRound;
    lineLayer.lineJoin = kCALineJoinRound;
    lineLayer.contentsScale = [UIScreen mainScreen].scale;
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 1.f;   // 持續(xù)時間
    animation.fromValue = @(0); // 從 0 開始
    animation.toValue = @(1);
    animation.delegate = self;
    [lineLayer addAnimation:animation forKey:@""];
    
    [self.layer addSublayer:lineLayer];

二：填充色隨線條動畫進行填充（用遮罩實現(xiàn)）

  UIBezierPath *colorPath = [UIBezierPath bezierPath];
        colorPath.lineWidth = 1.f;
        [colorPath moveToPoint:startPoint];
        if (self.addCurve) {
            //曲線路徑
            [colorPath addBezierThroughPoints2:pointArr];
        } else {
           //直線路徑
            [colorPath addNormalBezierThroughPoints:pointArr];
        }
        [colorPath addLineToPoint:CGPointMake(endPoint.x, maxMidY)];
        [colorPath addLineToPoint:CGPointMake(startPoint.x, maxMidY)];
        [colorPath addLineToPoint:CGPointMake(startPoint.x, startPoint.y)];
        
        //遮罩層
        CAShapeLayer *shadeLayer = [CAShapeLayer layer];
        shadeLayer.path = colorPath.CGPath;
        shadeLayer.fillColor = [UIColor greenColor].CGColor;
        
        //漸變圖層
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.frame = shadeLayer.frame;
        gradientLayer.startPoint = CGPointMake(0, 0);
        gradientLayer.endPoint = CGPointMake(0, 1);
        gradientLayer.cornerRadius = 5;
        gradientLayer.masksToBounds = YES;
        gradientLayer.colors = self.colorArr;
        
        CALayer *baseLayer = [CALayer layer];
        [baseLayer addSublayer:gradientLayer];
        [baseLayer setMask:shadeLayer];
        
        CABasicAnimation *anmi1 = [CABasicAnimation animation];
        anmi1.keyPath = @"bounds";
        anmi1.duration = 0.8f;
        anmi1.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 0, 2*self.size.height)];
        anmi1.byValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 2*endPoint.x, 2*self.size.height)];
//        anmi1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        anmi1.fillMode = kCAFillModeForwards;
        anmi1.autoreverses = NO;
        anmi1.removedOnCompletion = NO;
        [gradientLayer addAnimation:anmi1 forKey:@"bounds"];
        
        [self.layer addSublayer:baseLayer];