贝塞尔曲线UIBezierPath画波纹进度条

最新推荐文章于 2020-12-19 20:54:03 发布

原创最新推荐文章于 2020-12-19 20:54:03 发布 · 853 阅读

1 ·

CC 4.0 BY-SA版权

iOS 专栏收录该内容

70 篇文章

订阅专栏

该博客介绍了如何利用贝塞尔曲线在iOS应用中创建一个波纹效果的进度条，提供了源码链接供读者深入研究。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码链接地址i点击打开链接

通过贝塞尔曲线画，波纹进度提示

核心代码：

CAShapeLayer *shapLayer = [CAShapeLayer layer];
    self.shaplayer = shapLayer;
    shapLayer.path = [self layerPath].CGPath;
    [shapLayer setFillColor:[UIColor colorWithRed:86/255.0f green:202/255.0f blue:139/255.0f alpha:0.5].CGColor];
    [shapLayer setStrokeColor:[UIColor colorWithRed:86/255.0f green:202/255.0f blue:139/255.0f alpha:0.5].CGColor];
    [self.layer addSublayer:shapLayer];
    
    self.shaplayer2 = [CAShapeLayer layer];
    self.shaplayer2.path = [self layer2Path].CGPath;
    [self.shaplayer2 setFillColor:[UIColor colorWithRed:86/255.0f green:202/255.0f blue:139/255.0f alpha:0.5].CGColor];
    [self.shaplayer2 setStrokeColor:[UIColor colorWithRed:86/255.0f green:202/255.0f blue:139/255.0f alpha:0.5].CGColor];
    [self.layer addSublayer:self.shaplayer2];

-(UIBezierPath *)layerPath{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, self.frame.size.height)];
    CGFloat y = 0.0f;
    for (int i = 0; i < self.frame.size.width; i++) {
        
        y = 4*sin(i*M_PI/180 - self.translateX/M_PI)+ self.frame.size.height*self.translateY;
        
        NSLog(@"%f",y);
        if (y<-2) {
            [self stopDisplayLink];
            [path addLineToPoint:CGPointMake(i, 0)];
            self.dataLabel.text = [NSString stringWithFormat:@"100%%"];
        }else{
            self.dataLabel.text = [NSString stringWithFormat:@"%.0f%%",(1-y/200.0)*100];
            [path addLineToPoint:CGPointMake(i, y)];
        }
        
    }
    [path addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height)];
    [path addLineToPoint:CGPointMake(0, self.frame.size.height)];
    [path addLineToPoint:CGPointMake(0, self.frame.size.height)];
    [path closePath];
    return path;
}

-(void)reLoadPath{
    self.translateX += 0.1;
    self.translateY -=0.001;
    self.shaplayer.path = [self layerPath].CGPath;
    self.shaplayer2.path = [self layer2Path].CGPath;
}

具体请看源码。