iOS 渐变色进度条 + 紧急样式

近日我们设计小姐姐重新设计了一款 进度条，然后最近也不是很忙，那就特此记录下这次的过程咯

要的就是图中 进度条的效果

• 渐变色
• 紧急样式
• 动画

一、渐变色 无疑是 用 CAGradientLayer

- (CAGradientLayer *)gradientLayer {
    if (!_gradientLayer) {
        _gradientLayer = [CAGradientLayer layer];
        _gradientLayer.bounds = CGRectMake(0, 0, self.frame.size.width * self.progress, self.frame.size.height);
        _gradientLayer.startPoint = CGPointMake(0, 0.5);
        _gradientLayer.endPoint = CGPointMake(1, 0);
        _gradientLayer.anchorPoint = CGPointMake(0, 0);
        _gradientLayer.colors = self.colorArr;
        _gradientLayer.cornerRadius = self.frame.size.height / 2.;
    }
    return _gradientLayer;
}

/**
 *  进度条渐变颜色数组，颜色个数>=2
    默认是：@[(__bridge id)[UIColor orangeColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor];
 */
@property (nonatomic, strong) NSArray *colorArr;

二、紧急样式 直接用 UIBezierPath

- (void)addStripesEmergency {
    CGRect rect = self.gradientLayer.frame;
    CGFloat xStart = rect.size.height/2.0, height = rect.size.height, width = rect.size.height;
    while (xStart < rect.size.width - rect.size.height/2.0) {
        CAShapeLayer *layer = [[CAShapeLayer alloc] init];
        // 初始化
        UIBezierPath* aPath = [UIBezierPath bezierPath];
        // 起始点
        [aPath moveToPoint:CGPointMake(xStart, 0)];
        // 画线
        [aPath addLineToPoint:CGPointMake(xStart + width * 0.25, height)]; // 第一点
        [aPath addLineToPoint:CGPointMake(xStart + width * 0.75, height)]; // 第二点
        [aPath addLineToPoint:CGPointMake(xStart + width * 0.50, 0)]; // 第三点
        //通过调用closePath方法得到的
        [aPath closePath];
        xStart += 1.5 * width;
        layer.path = aPath.CGPath;
        layer.fillColor = [UIColor colorWithWhite:0 alpha:0.2].CGColor;
        [self.gradientLayer addSublayer:layer];
    }
}

三、动画用 CABasicAnimation

- (CABasicAnimation *)basicAnimation {
    if (!_basicAnimation) {
        _basicAnimation = [CABasicAnimation animationWithKeyPath:@"bounds"];
        _basicAnimation.duration = 1.0;
        _basicAnimation.fillMode = kCAFillModeForwards;
        _basicAnimation.repeatCount = 1.0;
        _basicAnimation.delegate = self;
        _basicAnimation.removedOnCompletion = NO;
        _basicAnimation.fillMode = kCAFillModeForwards;
        _basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    }
    return _basicAnimation;
}

- (void)setAnimation:(BOOL)animation {
    if (animation) {
        self.basicAnimation.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 0, self.gradientLayer.frame.size.height)];
        self.basicAnimation.toValue = [NSValue valueWithCGRect:self.gradientLayer.frame];
        [self.gradientLayer addAnimation:self.basicAnimation forKey:@"gradientAnimaiton"];
    }
}

感觉好久没画图了，小尝试下，熟练下

最终样式

End : 完整代码在如下：GBGradientProgressView