iOS 仪表盘动效

年初做了个类似支付宝仪表盘，
看了很多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