iOS 使用UIBezierPath与CABasicAnimation绘制图形

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

TyroneWing

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

阅读量2.2k

点赞数 2

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

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

版权

这篇博客介绍了如何在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