Quartz 2D 简单使用2--绘制水波纹进度

绘制水波纹

在GitHub上看到这个进度加载HcdProcessView
源码阅读着不太直观，索性自己站在巨人的肩膀上尝试着写一个，同时也温故下上下文绘制，效果如下：
Demo地址Drawing

图片

思路：

• 新建UIView 并切圆获取backGroupView;
• 绘制正余弦波纹并拼接扇形路径
• 动态改变φ相位和h波形偏移量

Y = Asin（ωX+φ）+ h;

φ（初相位）：决定波形与X轴位置关系或横向移动距离（左加右减）;

ω：决定周期（最小正周期T=2π/|ω|）;

A：决定峰值（即纵向拉伸压缩的倍数）;此处设为默认值10

h：表示波形在Y轴的位置关系或纵向移动距离（上加下减）

核心代码

- (void)drawRipple:(CGContextRef)context {
    offset+=0.1;//（相位）
    CGContextSetLineWidth(context, 5.f);
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGPoint startP = CGPointMake(backPoint.x-backRadius, hValue);
    [path moveToPoint:startP];
    //sin
    for (CGFloat x =backPoint.x-backRadius; x<backPoint.x+backRadius; x++) {
        CGFloat y = sinf(x/180*M_PI+offset)*10+hValue;
        [path addLineToPoint:CGPointMake(x, y)];
    }
    [path addArcWithCenter:backPoint radius:backRadius startAngle:0 endAngle:M_PI clockwise:1];
    [path closePath];
    CGContextAddPath(context, path.CGPath);
    CGContextSetFillColorWithColor(context, KUIColorFromRGB(0xFFAEB9).CGColor);
    CGContextFillPath(context);
    
    //cos
    UIBezierPath *path1 = [UIBezierPath bezierPath];
    CGPoint startP1 = CGPointMake(backPoint.x-backRadius, hValue);
    [path1 moveToPoint:startP1];
    for (CGFloat x =backPoint.x-backRadius; x<backPoint.x+backRadius; x++) {
        CGFloat y = cosf(x/180*M_PI+offset)*10+hValue;
        [path1 addLineToPoint:CGPointMake(x, y)];
        
    }
    [path1 addArcWithCenter:backPoint radius:backRadius startAngle:0 endAngle:M_PI clockwise:1];
    [path1 closePath];
    CGContextSetFillColorWithColor(context, KUIColorFromRGB(0xA020F0).CGColor);
    CGContextAddPath(context, path1.CGPath);
    CGContextFillPath(context);
    
}
- (void)setRipplePercent:(CGFloat)ripplePercent {
    _ripplePercent = ripplePercent;//进度
    hValue = (backRadius+backPoint.y)-2*backRadius * ripplePercent;//波形偏移
    [self setNeedsDisplay];
}

好记性不如烂笔头。

END

微博@迪达拉君
GithubZhaoBinLe