一次水波进度条的编程实现iOS

一次水波进度条的编程实现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进行动画，否则会冲突的。
代码在这里
欢迎大家指正。