iOS 使用UIBezierPath与CABasicAnimation绘制图形

最新推荐文章于 2020-09-30 17:24:57 发布

TyroneWing

最新推荐文章于 2020-09-30 17:24:57 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： iOS 文章标签： ios 图形 UIBezierPath CABasicAnimation

本文链接：https://blog.youkuaiyun.com/TyroneWing/article/details/50483843

iOS 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何在iOS中使用UIBezierPath和CABasicAnimation来绘制动态图形，包括柱状图的实现细节，通过strokeStart和strokeEnd属性控制动画效果。文章提到了四种不同的动画效果，并提供了关键代码示例，解释了相关参数的意义和弧度计算方式。

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

由于项目需要，最近接触了一些绘图的知识，现在记录下来学习过程。

首先看一下效果图：

UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。

首先来看左边柱状图的实现：

1.创建和使用一个path对象的过程是分开的。创建path步骤：

（1）创建一个Bezier path对象。

（2）使用方法moveToPoint:去设置初始线段的起点。

（3）添加line或者curve去定义一个或者多个subpaths。

（4）改变UIBezierPath对象跟绘图相关的属性。

    UIBezierPath *progressline = [UIBezierPath bezierPath];
    [progressline moveToPoint:CGPointMake(self.frame.size.width/2.0, self.frame.size.height+self.frame.size.width/2.0)];
    [progressline addLineToPoint:CGPointMake(self.frame.size.width/2.0, (1 - percent) * self.frame.size.height+self.frame.size.width/2.0)];
    [progressline setLineCapStyle:kCGLineCapSquare];
    _barLayer.path = progressline.CGPath;

2.CAShapeLayer的strokeStart和strokeEnd属性

1 keyPath = strokeStart 动画的fromValue = 0，toValue = 1

表示从路径的0位置画到1 怎么画是按照清除开始的位置也就是清除0 一直清除到1 效果就是一条路径慢慢的消失

2 keyPath = strokeStart 动画的fromValue = 1，toValue = 0

表示从路径的1位置画到0 怎么画是按照清除开始的位置也就是1 这样开始的路径是空的（即都被清除掉了）一直清除到0 效果就是一条路径被反方向画出来

3 keyPath = strokeEnd 动画的fromValue = 0，toValue = 1

表示这里我们分3个点说明动画的顺序 strokeEnd从结尾开始清除首先整条路径先清除后2/3，接着清除1/3 效果就是正方向画出路径

4keyPath = strokeEnd 动画的fromValue = 1，toValue = 0

效果就是反方向路径慢慢消失

注释：动画的0-1（fromValue = 0，toValue = 1）或1-0 （fromValue = 1，toValue = 0）表示执行的方向和路径的范围。

代码如下：

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 1.5;
    pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    pathAnimation.autoreverses = NO;
    [_barLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
    _barLayer.strokeEnd = 2.0;

在.m文件中重写setPerent：方法，当改变了百分比，重绘制路线并且执行动画，就可以达到上图左边柱状图的效果

接下来看看右边百分比图的实现

画圆弧使用的是方法：

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise

看下各个参数的意义：

center：圆心的坐标

radius：半径

startAngle：起始的弧度

endAngle：圆弧结束的弧度

clockwise：YES为顺时针，No为逆时针

这里需要注意的是：弧度是从三点钟方向开始计算的，随意这里使用了一个宏定义设置弧度开始是从12点钟方向

<span style="font-size:12px;">#define DEGREES_DefaultStart(degrees)  ((M_PI * (degrees+270))/180)</span>

1.首先画一个底部黑色的圆环

代码如下：

-(void)drawBackCircle{

    UIBezierPath *edgePath = [UIBezierPath bezierPath];
    [edgePath addArcWithCenter:CGPointMake(self.frame.size.width*0.5, self.frame.size.height * 0.5) radius:self.frame.size.width * 0.5 startAngle:0 endAngle:2*M_PI clockwise:YES];
    if(!self.animtionLayer){
        self.edgeLayer = [CAShapeLayer layer];
        self.edgeLayer.path = edgePath.CGPath;
        self.edgeLayer.fillColor = self.backgroundColor.CGColor;
        self.edgeLayer.strokeColor = RGBA(240, 240, 240, 1).CGColor;
        self.edgeLayer.lineWidth = self.lineWidth;
        self.edgeLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
        [self.layer addSublayer:self.edgeLayer];
    }
}

2.画百分比弧度并且加上动画

/**
 *  画百分比圆弧
 */
-(void)addPercentCircle{
    
    UIBezierPath *animationPath = [UIBezierPath bezierPath];
    [animationPath addArcWithCenter:CGPointMake(self.frame.size.width*0.5, self.frame.size.height * 0.5) radius:self.frame.size.width * 0.5 startAngle:DEGREES_DefaultStart(0) endAngle:self.endDegree clockwise:YES];
    
    self.animtionLayer.path = animationPath.CGPath;
    if(!self.animtionLayer){
        self.animtionLayer = [CAShapeLayer layer];
        self.animtionLayer.fillColor = self.backgroundColor.CGColor;
        self.animtionLayer.strokeColor = self.cirleColor.CGColor;
        self.animtionLayer.lineWidth = self.lineWidth;
        self.animtionLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
        [self.layer addSublayer:self.animtionLayer];
    }
    self.animtionLayer.path = animationPath.CGPath;
    
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = self.animationTime;
    pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    pathAnimation.fromValue = [NSNumber numberWithFloat:0];
    pathAnimation.toValue = [NSNumber numberWithFloat:1];
    pathAnimation.autoreverses = NO;
    [self.animtionLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
}

3.最后在drawRect: 方法中将百分比数字画在圆心上

CGSize percentTextSize = [_percentText boundingRectWithSize:self.frame.size options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
[_percentText drawAtPoint:CGPointMake((self.frame.size.width - percentTextSize.width)/2, (self.frame.size.height - percentTextSize.height)/2) withAttributes:attrs];

总结：这是第一次使用UIBezierPath和CABasicAnimation去绘制view，还有很多不足，希望各位多多指教！
代码链接：https://github.com/TyroneWing/CircleView