年初做了个类似支付宝仪表盘，
看了很多demo都不太符合要求，就自己动手做了一个。
希望能给个star☺
github地址：github.com/TildaWatts/EzraRoundView.git
中间还是有点坑，不过效果可以。
动效全部使用的CALayer画的，可以节省性能，不用考虑线程。
需求是这样的：双层动效。 外圈底层颜色从由左向右，由红到黄渐变 ，由上到下，透明度逐渐变浅。
IMG_4749.GIF
@property (nonatomic,assign) CGFloat percent;//期望进度
@property (nonatomic, assign) CGFloat maximum;//满进度
其中这个地方可能需要解释一下，这个底色渐变的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
再看这个示意图，抱歉有点粗糙。
底色是个正方形分成3分 ，1/2 ,1/4,1/4
先确定尺寸 即 CAGradientLayer xxx.frame = CGRectMake(...);
startPoint和endPoint是需要渐变的方向，坐标最大值1即是满值，如图
image.png
确定好了渐变方向，需要确定渐变位置，即渐变位置的百分比
[gradientLayerX setLocations:@[@0.35,@0.75]];
大概就是这样了，如果对您有帮助，希望点下喜欢和star
