(转)[IOS]如何动态画圆

(转)[IOS]如何动态画圆

先放上我的代码：新建一个CircleView，继承UIView

#import "CircleView.h"#define ScreenWidth [[UIScreen mainScreen] bounds].size.width#define ScreenHeight [[UIScreen mainScreen] bounds].size.height#define circle_btn_width ScreenWidth/6.3#define circle_radius (ScreenWidth/2 - circle_btn_width + 10)@interface CircleView()@property (nonatomic) UIBezierPath *circle;@property (nonatomic) CAShapeLayer *shapeLayer;@property (nonatomic) NSTimer *timer;@property (nonatomic) UIView *circleView;@end@implementation CircleView- (instancetype)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) { _circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, circle_radius*2, circle_radius*2)]; CAShapeLayer *shape = [CAShapeLayer new]; shape.frame = CGRectMake(0, 50, circle_radius*2, circle_radius*2); shape.position = self.center; shape.fillColor = [UIColor clearColor].CGColor; shape.lineWidth = 2.f; shape.strokeColor = [UIColor grayColor].CGColor; shape.strokeStart = 0.f; shape.strokeEnd = 1.f; shape.path = _circle.CGPath; [self.layer addSublayer:shape]; _shapeLayer = [CAShapeLayer layer]; _shapeLayer.frame = CGRectMake(0, 0, circle_radius*2, circle_radius*2); _shapeLayer.position = self.center; _shapeLayer.fillColor = [UIColor clearColor].CGColor; _shapeLayer.lineWidth = 2.f; _shapeLayer.strokeColor = [UIColor redColor].CGColor; _shapeLayer.strokeStart = 0.f; _shapeLayer.strokeEnd = 0.f; _shapeLayer.path = _circle.CGPath; [self.layer addSublayer:_shapeLayer]; CGAffineTransform transform = CGAffineTransformIdentity; self.transform = CGAffineTransformRotate(transform, -M_PI/2); _timer = [NSTimer scheduledTimerWithTimeInterval:1.f target:self selector:@selector(animate) userInfo:nil repeats:YES]; } return self;}-(void)animate{ _shapeLayer.strokeEnd += 0.1;}

调用：

CircleView *circleView = [[CircleView alloc]initWithFrame:CGRectMake(0, 0, circle_radius*2, circle_radius*2)];circleView.center = self.view.center;[self.view addSubview:circleView];

原理是下文：

UIBezierPath可以绘制矢量路径，而CAShapeLayer是Layer的子类，可以在屏幕进行绘制，本文主要思想是：CAShapeLayer按照UIBezierPath的矢量路径进行绘制。

效果图如图：

方法如下：

@interface ViewController (){ CAShapeLayer *shapeLayer; NSTimer *timer; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //第一步，通过UIBezierPath设置圆形的矢量路径 UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)]; //第二步，用CAShapeLayer沿着第一步的路径画一个完整的环（颜色灰色，起始点0，终结点1） CAShapeLayer *bgLayer = [CAShapeLayer layer]; bgLayer.frame = CGRectMake(0, 0, 200, 200);//设置Frame bgLayer.position = self.view.center;//居中显示 bgLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色=透明色 bgLayer.lineWidth = 2.f;//线条大小 bgLayer.strokeColor = [UIColor grayColor].CGColor;//线条颜色 bgLayer.strokeStart = 0.f;//路径开始位置 bgLayer.strokeEnd = 1.f;//路径结束位置 bgLayer.path = circle.CGPath;//设置bgLayer的绘制路径为circle的路径 [self.view.layer addSublayer:bgLayer];//添加到屏幕上 //第三步，用CAShapeLayer沿着第一步的路径画一个红色的环形进度条，但是起始点=终结点=0，所以开始不可见 shapeLayer = [CAShapeLayer layer]; shapeLayer.frame = CGRectMake(0, 0, 200, 200); shapeLayer.position = self.view.center; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.lineWidth = 2.f; shapeLayer.strokeColor = [UIColor redColor].CGColor; shapeLayer.strokeStart = 0; shapeLayer.strokeEnd = 0; shapeLayer.path = circle.CGPath; [self.view.layer addSublayer:shapeLayer]; //第四步，用一个定时器进行测试，每一秒，进度加10% timer = [NSTimer scheduledTimerWithTimeInterval:1.f target:self selector:@selector(animate) userInfo:nil repeats:YES]; } -(void)animate{ shapeLayer.strokeEnd += 0.1; }

我们可以对以上代码封装为一个CircleView，继承自View，封装后代码如下：

CircleView.h文件

#import @interface CircleView : UIView @property(assign,nonatomic)CGFloat startValue; @property(assign,nonatomic)CGFloat lineWidth; @property(assign,nonatomic)CGFloat value; @property(strong,nonatomic)UIColor *lineColr; @end

CircleView.m文件:

#import "CircleView.h" @interface CircleView() @property(strong,nonatomic)UIBezierPath *path; @property(strong,nonatomic)CAShapeLayer *shapeLayer; @property(strong,nonatomic)CAShapeLayer *bgLayer; @end @implementation CircleView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { _path = [UIBezierPath bezierPathWithOvalInRect:self.bounds]; _bgLayer = [CAShapeLayer layer]; _bgLayer.frame = self.bounds; _bgLayer.fillColor = [UIColor clearColor].CGColor; _bgLayer.lineWidth = 2.f; _bgLayer.strokeColor = [UIColor grayColor].CGColor; _bgLayer.strokeStart = 0.f; _bgLayer.strokeEnd = 1.f; _bgLayer.path = _path.CGPath; [self.layer addSublayer:_bgLayer]; _shapeLayer = [CAShapeLayer layer]; _shapeLayer.frame = self.bounds; _shapeLayer.fillColor = [UIColor clearColor].CGColor; _shapeLayer.lineWidth = 2.f; _shapeLayer.lineCap = kCALineCapRound; _shapeLayer.strokeColor = [UIColor redColor].CGColor; _shapeLayer.strokeStart = 0.f; _shapeLayer.strokeEnd = 0.f; _shapeLayer.path = _path.CGPath; [self.layer addSublayer:_shapeLayer]; } return self; } @synthesize value = _value; -(void)setValue:(CGFloat)value{ _value = value; _shapeLayer.strokeEnd = value; } -(CGFloat)value{ return _value; } @synthesize lineColr = _lineColr; -(void)setLineColr:(UIColor *)lineColr{ _lineColr = lineColr; _shapeLayer.strokeColor = lineColr.CGColor; } -(UIColor*)lineColr{ return _lineColr; } @synthesize lineWidth = _lineWidth; -(void)setLineWidth:(CGFloat)lineWidth{ _lineWidth = lineWidth; _shapeLayer.lineWidth = lineWidth; _bgLayer.lineWidth = lineWidth; } -(CGFloat)lineWidth{ return _lineWidth; } @end

在需要使用的ViewContrller中使用以下代码调用即可:

CircleView *view = [[CircleView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)]; [self.view addSubview:view]; view.center = self.view.center; [view setLineWidth:6.f]; [view setLineColr:[UIColor redColor]];

另外默认的坐标如下图（图来自处，其中一个思路是将整个View逆时针旋转90度即可，在CircleView.m的initWithFrame中添加以下代码即可：

CGAffineTransform transform = CGAffineTransformIdentity; self.transform = CGAffineTransformRotate(transform, -M_PI / 2);

注意：变型只能对UIView使用，对CAShapeLayer没有效果

参考：

1.iOS开发贝塞尔曲线UIBezierPath（后记）

​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。