近日我們?cè)O(shè)計(jì)小姐姐重新設(shè)計(jì)了一款 進(jìn)度條，然后最近也不是很忙，那就特此記錄下這次的過(guò)程咯

要的就是圖中 進(jìn)度條的效果

• 漸變色
• 緊急樣式
• 動(dòng)畫(huà)

一、漸變色 無(wú)疑是 用 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;
}

/**
 *  進(jìn)度條漸變顏色數(shù)組，顏色個(gè)數(shù)>=2
    默認(rèn)是：@[(__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];
        // 起始點(diǎn)
        [aPath moveToPoint:CGPointMake(xStart, 0)];
        // 畫(huà)線
        [aPath addLineToPoint:CGPointMake(xStart + width * 0.25, height)]; // 第一點(diǎn)
        [aPath addLineToPoint:CGPointMake(xStart + width * 0.75, height)]; // 第二點(diǎn)
        [aPath addLineToPoint:CGPointMake(xStart + width * 0.50, 0)]; // 第三點(diǎn)
        //通過(guò)調(diào)用closePath方法得到的
        [aPath closePath];
        xStart += 1.5 * width;
        layer.path = aPath.CGPath;
        layer.fillColor = [UIColor colorWithWhite:0 alpha:0.2].CGColor;
        [self.gradientLayer addSublayer:layer];
    }
}

三、動(dòng)畫(huà)用 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"];
    }
}

感覺(jué)好久沒(méi)畫(huà)圖了，小嘗試下，熟練下

最終樣式

End : 完整代碼在如下：GBGradientProgressView