近日我们设计小姐姐重新设计了一款 进度条，然后最近也不是很忙，那就特此记录下这次的过程咯
要的就是图中 进度条的效果
- 渐变色
- 紧急样式
- 动画
一、渐变色 无疑是 用
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
