一次水波进度条的编程实现iOS
一、水波浪的效果，随着进度接近100%，水将慢慢的灌满整个容器。效果图如下：
xiaoguo.gif
二、动画分析
1、容器，使用图层裁剪，将正方形图层裁剪成圆，设置图层border，略过。
2、水波纹效果，首先先要将波浪线画出来，利用正弦曲线：为y=Asin(ωx+φ)+k 百科链接;
3、波浪动画，方案1采用核心动画对图层进行平移。方案2根据正弦曲线改变x的值将曲线绘画出来，由于方案2极大耗费cpu，故采用第一种方案，下面将讲解方案1，方案二的代码下面也会贴出。
三、实现过程
1、使用贝塞尔路径和正弦曲线结合画出波浪曲线；
image.png
创建CAShapeLayer
CAShapeLayer *layer1 = [CAShapeLayer layer];
layer1.bounds = contentView.bounds;
layer1.position = CGPointMake(0, 0);
layer1.anchorPoint = CGPointZero;
layer1.path = [self frontLayerPath];
layer1.fillColor = [UIColor colorWithRed:34/255.0 green:116/255.0 blue:210/255.0 alpha:1].CGColor;
[contentView.layer addSublayer:layer1];
_frontWaveLayer = layer1;
获取贝塞尔路径
- (CGPathRef)frontLayerPath {
CGFloat w = 100;
CGFloat h = 100;
UIBezierPath *bezierFristWave = [UIBezierPath bezierPath];
CGFloat waveHeight = 5 ;
CGMutablePathRef pathRef = CGPathCreateMutable();
CGFloat startOffY = waveHeight * sinf(0 * M_PI * 2 / w);
CGFloat orignOffY = 0.0;
CGPathMoveToPoint(pathRef, NULL, 0, startOffY);
[bezierFristWave moveToPoint:CGPointMake(0, startOffY)];
for (CGFloat i = 0.f; i <= w * 2; i++) {
orignOffY = waveHeight * sinf(2 * M_PI /w * i) ;
[bezierFristWave addLineToPoint:CGPointMake(i, orignOffY)];
}
[bezierFristWave addLineToPoint:CGPointMake(w * 2, orignOffY)];
[bezierFristWave addLineToPoint:CGPointMake(w * 2, h)];
[bezierFristWave addLineToPoint:CGPointMake(0, h)];
[bezierFristWave addLineToPoint:CGPointMake(0, startOffY)];
[bezierFristWave closePath];
return bezierFristWave.CGPath;
}
sinf()计算弧度函数；sin()计算角度
3、执行平移动画,利用一个小技巧，执行动画时，如果曲线长度刚好与底部灰色视图宽度相等，那么动画将会不连续，所以设置曲线长度为底部灰色视图宽度的两倍。
pingyi.gif
创建动画代码
- (IBAction)startFrontAnimation:(id)sender {
CGFloat w = 100;
// 说明这个动画对象要对CALayer的position属性执行动画
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
anim.duration = 2;
anim.fromValue = @(0);
anim.toValue =@(-w);
anim.repeatCount = MAXFLOAT;
anim.fillMode = kCAFillModeForwards;
[self.frontWaveLayer addAnimation:anim forKey:@"translation.x"];
}
将父视图进行裁剪超出bounds的图层，执行cut
- (IBAction)cutLayer {
self.contentView.layer.masksToBounds = YES;
}
bolang.gif
将底部灰色视图画出
shuangtuceng.gif
4、根据进度控制图层的position.y的位置
//改变进度值 就是改变position.y的位置
[self.frontWaveLayer setValue:@(10) forKeyPath:@"position.y"];
最终效果
shuangtuceng.gif
小坑：通过进度设置图层的position的时候，动画就不能对position进行动画，否则会冲突的。
代码在这里
欢迎大家指正。
