iOS 折线图动画

折线图效果

一：折线动画

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;   // 持续时间
    animation.fromValue = @(0); // 从 0 开始
    animation.toValue = @(1);
    animation.delegate = self;
    [lineLayer addAnimation:animation forKey:@""];
    
    [self.layer addSublayer:lineLayer];

二：填充色随线条动画进行填充（用遮罩实现）

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