如何在圆形UIView周围制作弯曲的进度条？

Question

我想制作一个循环的进度条,例如,如何设置其大小调整和属性(形状,颜色,宽度等)的动画.

我试图围绕圆形透明视图.

从哪儿开始？

有没有人有示例代码？

Answer 1

学习是无可替代的,但是一点帮助永远不会错过,所以这里有代码片段,可以完成任务.

这个概念是使用CAShapeLayer和UIBezierPath,进步只是设置UIBezierPath的strokeEnd属性.您需要声明CAShapeLayer并设置其属性.我们称之为progressLayer.(我不打算提供完整的代码,简单的方向和样品供你放在一起.)

    // setup progress layer
    // N.B borderWidth is a float representing a value used as a margin. 
    // pathwidth is the width of the progress path
    // obviously progressBounds is a CGRect specifying the Layer's Bounds
    [self.progressLayer setFrame:progressBounds];
    UIBezierPath *progressPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds)) radius:(bounds.size.height - self.borderWidth - self.pathWidth   ) / 2 startAngle: (5* -M_PI / 12)  endAngle: (2.0 * M_PI - 7 * M_PI /12)   clockwise:YES];
     self.progressLayer.strokeColor = [UIColor whiteColor].CGColor;
     self.progressLayer.lineWidth = 6.0f ;
     self.progressLayer.path = progressPath.CGPath;
     self.progressLayer.anchorPoint = CGPointMake(0.5f, 0.5f);
     self.progressLayer.fillColor = [UIColor clearColor].CGColor;
     self.progressLayer.position = CGPointMake(self.layer.frame.size.width / 2 - self.borderWidth / 2, self.layer.frame.size.height / 2 - self.borderWidth/2);
    [self.progressLayer setStrokeEnd:0.0f];

您显然需要将progressLayer添加到您的视图hierarchie

然后你需要一个简单的动画来推进吧!

    // updateInterval is a float specifying the duration of the animation.
    // progress is a float storing the, well, progress. 
    // newProgress is a float 

    [self.progressLayer setStrokeEnd:newProgress];
    CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnimation.duration = updateInterval;
    [strokeEndAnimation setFillMode:kCAFillModeForwards];
    strokeEndAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    strokeEndAnimation.removedOnCompletion = NO;
    strokeEndAnimation.fromValue = [NSNumber numberWithFloat:self.progress];
    strokeEndAnimation.toValue = [NSNumber numberWithFloat:newProgress];
    self.progress = newProgress;
    [self.progressLayer addAnimation:strokeEndAnimation forKey:@"progressStatus"];

在上图中,未进行的路径只不过是progressLayer后面的第二个完全描边层

哦,最后一点,你会发现圆圈顺时针方向前进.如果你花时间了解这里发生了什么,你将弄清楚如何设置进度Anti Clockwise.

祝好运 ...