效果圖  實現過程雖然low 了些 但是比較簡單易懂 

看一下圖層，，可知實現方法比較簡單

@property (nonatomic,strong)UIView *circleView; // 環形顯示view

@property (nonatomic,strong)UIView *dianliangView; // 第一層水波view

@property (nonatomic,strong)UIView *dianliangView2; // 第二層水波view

/** 圓CAShapeLayer */

@property(nonatomic,strong)CAShapeLayer

@property(nonatomic,strong)UISlider *slider;

@property (nonatomic,strong)NSTimer *waterTimer;

@property (nonatomic,strong)NSTimer *waterTimer2;

@property (nonatomic,strong)UILabel *dianliangLbel;

- (void)viewDidLoad {

    [superviewDidLoad];

self.view.backgroundColor

waterHeight = (WIDTH-140);

/// 電量滑動虛線圓View=============

self.circleView = [[UIViewalloc]initWithFrame:CGRectMake(WIDTH/2-(WIDTH-100)/2,100,WIDTH-100,WIDTH-100)];

    [self.viewaddSubview:self.circleView];

self.circleView.layer.cornerRadius = (WIDTH-100)/2

self.circleView.layer.masksToBounds = YES;

self.circleView.backgroundColor = [UIColorclearColor];

self.circleView.transform = CGAffineTransformMakeRotation(-M_PI_2);

//  第一層淺白色的虛線圓

CAShapeLayer *ovalLayer = [CAShapeLayerlayer];

    ovalLayer.strokeColor = [UIColorcolorWithRed:0.64green:0.71blue:0.87alpha:1.00].CGColor;

    ovalLayer.fillColor = [UIColorclearColor].CGColor;

    ovalLayer.lineWidth =10;

    ovalLayer.lineDashPattern  =@[@2,@6];

    ovalLayer.path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(5,5,2 * (WIDTH-100)/2-10,2 * (WIDTH-100)/2-10)].CGPath;

    [self.circleView.layeraddSublayer:ovalLayer];

// 第二層黃色的虛線圓電量多少的

self.ovalShapeLayer = [CAShapeLayerlayer];

self.ovalShapeLayer.strokeColor = [UIColoryellowColor].CGColor;

self.ovalShapeLayer.fillColor = [UIColorclearColor].CGColor;

self.ovalShapeLayer.lineWidth = 10;

self.ovalShapeLayer.lineDashPattern  = @[@2,@6];

CGFloat refreshRadius = (WIDTH-100)/2;

self.ovalShapeLayer.path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(5,5,2 * refreshRadius-10,2 * refreshRadius-10)].CGPath;

self.ovalShapeLayer.strokeEnd = 0;

    [self.circleView.layeraddSublayer:self.ovalShapeLayer];

// 白色實線的小圓圈

CAShapeLayer *ocircleLayer = [CAShapeLayerlayer];

    ocircleLayer.strokeColor = [UIColorcolorWithRed:0.64green:0.71blue:0.87alpha:1.00].CGColor;

    ocircleLayer.fillColor = [UIColorclearColor].CGColor;

    ocircleLayer.lineWidth =1;

    ocircleLayer.path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(15,15,2 * (WIDTH-100)/2-30,2 * (WIDTH-100)/2-30)].CGPath;

    [self.circleView.layeraddSublayer:ocircleLayer];

///  滑動slider ==========================

self.slider = [[UISlideralloc]initWithFrame:CGRectMake(100,HEIGHT-100,WIDTH-200,20)];

    [self.viewaddSubview:self.slider];

    [self.slideraddTarget:selfaction:@selector(sliderAction:)forControlEvents:UIControlEventValueChanged];

///

UIView *backView = [[UIViewalloc]initWithFrame:CGRectMake(WIDTH/2-(WIDTH-100)/2 + 20, 100 +20,WIDTH-140,WIDTH-140)];

    [self.viewaddSubview:backView];

    backView.layer.cornerRadius = (WIDTH-140)/2;

    backView.layer.masksToBounds =YES;

    backView.backgroundColor = [UIColorcolorWithRed:0.26green:0.34blue:0.50alpha:1.00];

/// 第一層水波紋view ===========================

self.dianliangView = [[UIViewalloc]initWithFrame:CGRectMake(WIDTH/2-(WIDTH-100)/2 + 20, 100 +20,WIDTH-140,WIDTH-140)];

    [self.viewaddSubview:self.dianliangView];

self.dianliangView.layer.cornerRadius = (WIDTH-140)/2;

self.dianliangView.layer.masksToBounds = YES;

self.dianliangView.backgroundColor = [UIColorcolorWithRed:0.34green:0.40blue:0.71alpha:0.80];

/// 第二層水波紋 view =======================

self.dianliangView2 = [[UIViewalloc]initWithFrame:CGRectMake(WIDTH/2-(WIDTH-100)/2 + 20, 100 +20,WIDTH-140,WIDTH-140)];

    [self.viewaddSubview:self.dianliangView2];

self.dianliangView2.layer.cornerRadius = (WIDTH-140)/2;

self.dianliangView2.layer.masksToBounds = YES;

self.dianliangView2.backgroundColor = [UIColorcolorWithRed:0.32green:0.52blue:0.82alpha:0.60];

///

self.dianliangLbel = [[UILabelalloc]initWithFrame:CGRectMake(WIDTH/2-(WIDTH-100)/2 + 20, 100 +20 + (WIDTH-140)/2-30,WIDTH-140,60)];

    [self.viewaddSubview:self.dianliangLbel];

self.dianliangLbel.font = [UIFont systemFontOfSize:50];

self.dianliangLbel.textAlignment = NSTextAlignmentCenter;

self.dianliangLbel.textColor = [UIColorwhiteColor];

self.waterTimer = [NSTimerscheduledTimerWithTimeInterval:0.08target:selfselector:@selector(waterAction)userInfo:nilrepeats:YES];

self.waterTimer2 = [NSTimerscheduledTimerWithTimeInterval:0.10target:selfselector:@selector(waterAction2)userInfo:nilrepeats:YES];

}

- (void)waterAction{

CGMutablePathRef wavePath =CGPathCreateMutable();

CGPathMoveToPoint(wavePath,nil,0,-WaterMaxHeight*0.5);

float y =0;

_horizontal +=0.15;

for (float x =0; x <=self.dianliangView.frame.size.width; x++) {

//波峰*sin(x * M_PI /self.dianliangView.frame.size.width * 峰的數量 +移動距離)

        y = 7*sin(x *M_PI /self.dianliangView.frame.size.width * 2 - _horizontal)// 向右移動;

CGPathAddLineToPoint(wavePath,nil, x, y+waterHeight);

    }

CGPathAddLineToPoint(wavePath,nil,self.dianliangView.frame.size.width , WaterMaxHeight*0.5);

CGPathAddLineToPoint(wavePath,nil,self.dianliangView.frame.size.width,WaterMaxHeight);

CGPathAddLineToPoint(wavePath,nil,0, WaterMaxHeight);

    [self.dianliangViewsetShape:wavePath];

}

- (void)waterAction2{

CGMutablePathRef wavePath2 =CGPathCreateMutable();

CGPathMoveToPoint(wavePath2,nil,0,-WaterMaxHeight*0.5);

float y2 =0;

_horizontal2 +=0.1;

for (float x2 =0; x2 <=self.dianliangView2.frame.size.width; x2++) {

//波峰* sin(x * M_PI /self.dianliangView2.frame.size.width * 峰的數量 +移動距離)

        y2 = -5*cos(x2 *M_PI /self.dianliangView2.frame.size.width * 2 + _horizontal2) /// 向左移動;

CGPathAddLineToPoint(wavePath2,nil, x2, y2+waterHeight);

    }

CGPathAddLineToPoint(wavePath2,nil,self.dianliangView2.frame.size.width , WaterMaxHeight*0.5);

CGPathAddLineToPoint(wavePath2,nil,self.dianliangView2.frame.size.width,WaterMaxHeight);

CGPathAddLineToPoint(wavePath2,nil,0, WaterMaxHeight);

    [self.dianliangView2setShape:wavePath2]; // 這句程式碼需要使用UIView+Shape.h 檔案

}

- (void)sliderAction:(UISlider *)slider{

self.ovalShapeLayer.strokeEnd = slider.value;

if (slider.value >=0 || slider.value <=1){

waterHeight = (1-slider.value)*(WIDTH-140);

self.dianliangLbel.text = [NSStringstringWithFormat:@"%.0f%@",slider.value*100,@"%"];

    }else{

NSLog(@"progress value is error");

    }

}

連結: https://pan.baidu.com/s/1o7TLuqA 密碼: dsfi