年初做了個(gè)類似支付寶儀表盤浪慌，
看了很多demo都不太符合要求，就自己動(dòng)手做了一個(gè)追他。
希望能給個(gè)star?
github地址：github.com/TildaWatts/EzraRoundView.git
中間還是有點(diǎn)坑，不過效果可以。
動(dòng)效全部使用的CALayer畫的直秆，可以節(jié)省性能，不用考慮線程鞭盟。
需求是這樣的：雙層動(dòng)效圾结。 外圈底層顏色從由左向右，由紅到黃漸變 齿诉，由上到下筝野，透明度逐漸變淺。
IMG_4749.GIF
@property (nonatomic,assign) CGFloat percent;//期望進(jìn)度
@property (nonatomic, assign) CGFloat maximum;//滿進(jìn)度
其中這個(gè)地方可能需要解釋一下粤剧，這個(gè)底色漸變的CAGradientLayer的方法遗座，研究了很久，基本搞清楚了俊扳，先看代碼
//外圓底色（漸變）
- (CAGradientLayer *)draProgressBottomGradieLayer
{
_progressBottomGradieLayer = [CAGradientLayer layer];
_progressBottomGradieLayer.frame = self.bounds;
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
//上
CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
gradientLayer1.frame = CGRectMake(0, 0, width, height);
gradientLayer1.colors = @[(__bridge id)[UIColor colorWithHexString:@"FF4C4C"].CGColor,
(__bridge id)[UIColor colorWithHexString:@"FFB94A"].CGColor];
gradientLayer1.startPoint = CGPointMake(0, 0);
gradientLayer1.endPoint = CGPointMake(1, 0);
//左下
CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
gradientLayer2.frame = CGRectMake(0, height/2.0, width/2.0, height/2.0);
gradientLayer2.colors = @[(__bridge id)[UIColor colorWithHexString:@"FF4C4C"].CGColor,
(__bridge id)[UIColor colorWithHexString:@"FFFFFF" alpha:1].CGColor];
gradientLayer2.startPoint = CGPointMake(0, 0);
gradientLayer2.endPoint = CGPointMake(0, 1);
//右下
CAGradientLayer *gradientLayer3 = [CAGradientLayer layer];
gradientLayer3.frame = CGRectMake(width/2.0, height/2.0, width/2.0, height/2.0);
gradientLayer3.colors = @[(__bridge id)[UIColor colorWithHexString:@"FFB94A"].CGColor,
(__bridge id)[UIColor colorWithHexString:@"FFFFFF" alpha:1].CGColor];
gradientLayer3.startPoint = CGPointMake(0, 0);
gradientLayer3.endPoint = CGPointMake(0, 1);
[_progressBottomGradieLayer addSublayer:gradientLayer1];
[_progressBottomGradieLayer addSublayer:gradientLayer2];
[_progressBottomGradieLayer addSublayer:gradientLayer3];
[gradientLayer1 setLocations:@[@0.35,@0.75]];
[gradientLayer3 setLocations:@[@0.2,@0.75]];
[gradientLayer2 setLocations:@[@0.2,@0.75]];
return _progressBottomGradieLayer;
}
image.png
再看這個(gè)示意圖途蒋，抱歉有點(diǎn)粗糙。
底色是個(gè)正方形分成3分 馋记，1/2 ,1/4,1/4
先確定尺寸 即 CAGradientLayer xxx.frame = CGRectMake(...);
startPoint和endPoint是需要漸變的方向号坡，坐標(biāo)最大值1即是滿值懊烤，如圖
image.png
確定好了漸變方向，需要確定漸變位置宽堆，即漸變位置的百分比
[gradientLayerX setLocations:@[@0.35,@0.75]];
大概就是這樣了腌紧，如果對(duì)您有幫助，希望點(diǎn)下喜歡和star
