最近工程中用到一個漸變色進(jìn)度條驹闰，先看效果圖：
circle.gif
用OC寫的實(shí)現(xiàn)方法如下：
@interface CustomCircelLayer : CALayer
@property (nonatomic,assign)CGFloat marketValue;
- (void)custom_setValue:(CGFloat)value;
@end
@implementation CustomCircelLayer
- (void)custom_setValue:(CGFloat)value {
self.marketValue = value;
[self setNeedsDisplay];
}
- (void)drawInContext:(CGContextRef)ctx {
CGContextSetLineWidth(ctx, 6);//畫線粗細(xì)
CGContextSetLineCap(ctx, kCGLineCapRound);//設(shè)置畫線末端圓角
CGContextSetFillColorWithColor(ctx, [UIColor blackColor].CGColor);
CGFloat originX = self.bounds.size.width / 2;
CGFloat originY = self.bounds.size.height / 2;
CGFloat radius = MIN(originX, originY) - 10.0;
CGContextAddArc(ctx, self.bounds.size.width / 2, self.bounds.size.height / 2, radius, M_PI_2, M_PI * 2.5 * (6 * self.marketValue), 0);//繪制圓弧
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
//漸變色數(shù)組
NSArray *colorArray = @[(id)[UIColor colorWithRed:147.0/255.0 green:182.0/255.0 blue:46.0/255.0 alpha:1].CGColor,
(id)[UIColor colorWithRed:173.0/255.0 green:152.0/255.0 blue:50.0/255.0 alpha:1].CGColor,
(id)[UIColor colorWithRed:226.0/255.0 green:91.0/255.0 blue:52.0/255.0 alpha:1].CGColor,
(id)[UIColor colorWithRed:255.0/255.0 green:51.0/255.0 blue:1.0/255.0 alpha:1].CGColor,
(id)[UIColor colorWithRed:226.0/255.0 green:38.0/255.0 blue:8.0/255.0 alpha:1].CGColor,
];
//各個漸變色所占比例
CGFloat locations[5] = {0.0,0.25,0.55,0.7,1.0};
NSArray *colorArr = colorArray;
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colorArr, locations);
CGColorSpaceRelease(colorSpace);
colorSpace = NULL;
CGContextReplacePathWithStrokedPath(ctx);
CGContextClip(ctx);
CGContextDrawLinearGradient(ctx, gradient, CGPointMake(0, self.bounds.size.height / 2), CGPointMake(self.bounds.size.width, self.bounds.size.height / 2), 0);//繪制漸變色
CGGradientRelease(gradient);
}
創(chuàng)建一個view帕涌，添加自定義layer：
self.customLayer = [CustomCircelLayer layer];
self.customLayer.position = CGPointMake(frame.size.width * 0.5, frame.size.height * 0.5);
self.customLayer.bounds = CGRectMake(0, 0, frame.size.width, frame.size.height);
[self.layer addSublayer:self.customLayer];
再為進(jìn)度條添加個動畫：
- (void)setCirclePercent:(CGFloat)percent {
if (self.timer) {
[self.timer invalidate];
self.timer = nil;
}
__block CGFloat ori = 0.0;
__block CGFloat countPercent = percent;
__weak CircleView *weakSelf = self;
self.timer= [NSTimer timerWithTimeInterval:0.05 repeats:YES block:^(NSTimer * _Nonnull timer) {
if (ori >= countPercent) {
[timer invalidate];
timer = nil;
return ;
}
ori += 0.03;
[weakSelf.customLayer custom_setValue:ori];
}];
NSRunLoop *currentLoop = [NSRunLoop currentRunLoop];
[currentLoop addTimer:self.timer forMode:NSRunLoopCommonModes];
[self.timer fire];
}
這樣就完成了：
oc-circle.png
橋豆麻袋
好像和設(shè)計(jì)圖有色差...
注釋掉上述代碼中的：
// CGContextReplacePathWithStrokedPath(ctx);//檢索一個路徑秒裕，只繪制該路徑的描邊
// CGContextClip(ctx);
運(yùn)行效果如下：
oc-circle01.png
可見埂息，這種實(shí)現(xiàn)方式良蒸，是繪制了一個矩形疑俭，然后根據(jù)我們設(shè)置的圓弧路徑粮呢，繪制出圓弧，顏色漸變其實(shí)是矩形從左到右的漸變钞艇。對于漸變色漸變的程度啄寡，比例要求不高，或者只有初始和結(jié)束色值的樣式來說已然足夠哩照。
接下來換Swift來做一個完美實(shí)現(xiàn)挺物。
首先，需要設(shè)計(jì)師提供一張漸變色圖：
circle-BG.png
創(chuàng)建一個imageview加載圖片飘弧，再創(chuàng)建一個變量识藤，用于設(shè)置進(jìn)度。
lazy var colorImage: UIImageView = {
let imageView = UIImageView(image: UIImage.init(named: "circle-BG"))
imageView.frame = self.bounds
return imageView
}()
var percent :CGFloat?
在draw方法中繪制次伶。（相關(guān)屬性名稱和上述OC寫法類似痴昧，應(yīng)該都能看明白，就沒多標(biāo)注釋了冠王，但是實(shí)現(xiàn)的思路是完全不一樣的）
override func draw(_ rect: CGRect) {
let path = UIBezierPath.init(arcCenter:CGPoint(x: self.bounds.size.width * 0.5, y: self.bounds.size.height * 0.5), radius: self.bounds.size.width * 0.5 - 5, startAngle: CGFloat.pi * 0.5, endAngle: CGFloat.pi * 2.5, clockwise: true)
let shapeLayer = CAShapeLayer()
shapeLayer.bounds = self.bounds
shapeLayer.lineCap = CAShapeLayerLineCap.round
shapeLayer.position = CGPoint(x: self.bounds.size.width * 0.5, y: self.bounds.size.height * 0.5)
shapeLayer.path = path.cgPath
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.white.cgColor
shapeLayer.lineWidth = 6.0
self.layer.mask = shapeLayer//關(guān)鍵步驟
/**
設(shè)置進(jìn)度條動畫
*/
let ani = CABasicAnimation(keyPath: "strokeEnd")
ani.duration = 2
ani.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut)
ani.fromValue = 0
ani.toValue = self.percent ?? 0
ani.fillMode = CAMediaTimingFillMode.forwards
ani.isRemovedOnCompletion = false
shapeLayer.add(ani, forKey: nil)
}
OK赶撰，完成。
使用過程有什么問題歡迎各位指出～
