电量显示 水波纹动画
效果图 实现过程虽然low 了些 但是比较简单易懂
看一下图层，，可知实现方法比较简单
@property (nonatomic,strong)UIView *circleView; // 环形显示view
@property (nonatomic,strong)UIView *dianliangView; // 第一层水波view
@property (nonatomic,strong)UIView *dianliangView2; // 第二层水波view
/** 圆CAShapeLayer */
@property(nonatomic,strong)CAShapeLayer *ovalShapeLayer;
@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 = [UIColorcolorWithRed:0.25green:0.39blue:0.68alpha:1.00];
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