Swift－贝赛尔曲线画扇形、弧线、圆形、多边形——UIBezierPath实现App下载时的动画效果

标签：

上篇文章提到了使用贝赛尔曲线实现画图板（传送门），顿时就对贝赛尔曲线兴趣大增有木有。

之所以接触贝赛尔曲线，多亏了师父。周五下班前师父给我留了个任务，让我周末回家研究研究 iPhone 手机下载 App 时的效果是怎么实现的（不知道效果的童鞋请看下图）

如果所示，下载 App 的过程效果，就是 App 图标中间有一个顺时针旋转的圆圈。当一圈走完时 App 就下载完成了。

刚给我交代这个任务的时候，顿时感觉好难有木有。。。（主要是因为那个时候我还不知道贝赛尔曲线）

抛开一切复杂内容不谈，我们今天只来说说怎么让一个圆像这样走完一圈。其实就是利用贝赛尔曲线画扇形。但在介绍怎么画扇形之前，我们先从基础开始，逐步了解 UIBezierPath。

（PS：本文内容虽然有点长，但是并不难，不要害怕，看完就能使用UIBezierPath做一些基本的操作了。在文章的最后我们讲重头戏：实现App下载时的动画效果。）

我们分直线段和曲线段两种来讲。

先来回顾一下上文（没看过也没关系）。上篇文章我们讲了怎么实现画图板，其实本质上是用直线段来实现：记录触摸的初始坐标和滑动的坐标，在二者之间连一条直线段。主要方法就是 moveToPoint: 和 addLineToPoint:

有的童鞋可能会问，那为什么能画出曲线啊？

其实不是的。你画了一条曲线可能用了0.1秒（假设），但实际上却是我每隔0.0000000001秒（假设）画了一条直线段，这样大量的微小的直线段连接起来，最后宏观上看上去就像是曲线了，但本质上、从微观角度看，它是非常多的小直线段。

额上面这段话并不重要，看不懂也没事，咱们继续说本文的重点。

知道怎么画直线了，那么正方形、矩形、多边形就都好办了。

我们先来举个多边形（比如五边形）的栗子。用现有的知识想一下，怎么实现？

很简单，只要有五个顶点的坐标，用直线段连起来就行了：

override func drawRect(rect: CGRect) { // 五边形
    let color = UIColor.redColor()
    color.set() // 设置线条颜色
    
    let aPath = UIBezierPath()
    
    aPath.lineWidth = 5.0 // 线条宽度
    aPath.lineCapStyle = .Round // 线条拐角
    aPath.lineJoinStyle = .Round // 终点处理
    
    // Set the starting point of the shape.
    aPath.moveToPoint(CGPointMake(100, 10))
    
    // Draw the lines
    aPath.addLineToPoint(CGPointMake(200, 40))
    aPath.addLineToPoint(CGPointMake(160, 140))
    aPath.addLineToPoint(CGPointMake(40, 140))
    aPath.addLineToPoint(CGPointMake(10, 40))
    aPath.closePath() // 最后一条线通过调用closePath方法得到
    
    aPath.stroke() // Draws line 根据坐标点连线，不填充
//    aPath.fill() // Draws line 根据坐标点连线，填充
}

画最后一条线有个简单的办法，那就是调用 closePath 方法，就会自动连上终点到起点间的线，形成一个封闭的图形。

上文我们已经使用过了 stroke()，也就是连线。那么最后一句 fill() 又是干嘛的？stroke() 只是连线，不会填充。如果想要填充效果的话，就使用 fill() 来实现：

如上图所示。左图为 stroke() 的效果，右图为 fill() 的效果。

（ps：需要重绘时不要直接调用 drawRect: 方法，调用 setNeedsDisplay 系统就会自动调用 drawRect: 方法了）

是不是很简单。想一下矩形、正方形怎么画？以画五边形的方法类推，有了四个顶点的坐标连线就行了。

嗯，这样可以。但其实有个更简单的方法，使用 UIBezierPath 类的 init(rect:CGRect) 方法。

如果传入的宽高相等，画出来的就是正方形，否则就是长方形（废话）

// 矩形
override func drawRect(rect: CGRect) {
    let color = UIColor.redColor()
    color.set() // 设置线条颜色
    
    let aPath = UIBezierPath(rect: CGRectMake(40, 40, 100, 50)) // 长方形
//    let aPath = UIBezierPath(rect: CGRectMake(40, 40, 100, 100)) // 正方形
    
    aPath.lineWidth = 5.0 // 线条宽度
    aPath.lineCapStyle = .Round // 线条拐角
    aPath.lineJoinStyle = .Round // 终点处理
    
    aPath.stroke() // Draws line 根据坐标点连线，不填充
//    aPath.fill() // Draws line 根据坐标点连线，填充
}

OK，直线段就讲的差不多了，下面我们来讲讲曲线段。

怎么画一个圆／椭圆？使用 UIBezierPath 的 init(ovalInRect rect:CGRect) 方法即可。

这是什么意思呢？我们传入一个矩形的 frame，则会画出这个矩形的内切圆。

如果矩形是一个正方形，那么画出的就是内切圆。如果矩形是个长方形，那么画出的就是内切椭圆。

// 圆、椭圆
override func drawRect(rect: CGRect) {
    let color = UIColor.redColor()
    color.set() // 设置线条颜色
    
    // 根据传人的矩形画出内切圆／椭圆
//    let aPath = UIBezierPath(ovalInRect: CGRectMake(40, 40, 100, 100)) // 如果传入的是正方形，画出的就是内切圆
    let aPath = UIBezierPath(ovalInRect: CGRectMake(40, 40, 100, 160)) // 如果传入的是长方形，画出的就是内切椭圆
    
    aPath.lineWidth = 5.0 // 线条宽度
    
    aPath.stroke() // Draws line 根据坐标点连线，不填充
//    aPath.fill() // Draws line 根据坐标点连线，填充
}

注意，传入的矩形的 frame 只是为了画出它的内切圆，矩形是不会画出来的。

唔，快要到重点了。在画扇形前先来说说怎么画弧线。这两可不一样哦。

如图所示，这是一个四分之一圆的弧线。它是怎么实现的呢？使用 UIBezierPath 类的 init(arcCenter center:CGPoint, radius:CGFloat, startAngle:CGFloat, endAngle:CGFloat, clockwise:Bool) 方法。

参数很多，分别来说下：center 是圆心坐标，radius 是半径长度，startAngle 是起始点，endAngle 是终点，clockwise 是 true 则为顺时针，为 false 则是逆时针。

我们来看一下官方文档：

注意到了吗？0 是右边那个点，不是上面那个点。

代码如下，以四分一圆的弧线为例：

// 弧线
override func drawRect(rect: CGRect) {
    let color = UIColor.redColor()
    color.set() // 设置线条颜色
    
    let aPath = UIBezierPath(arcCenter: CGPointMake(150, 150), radius: 75,
            startAngle: 0, endAngle: (CGFloat)(90*M_PI/180), clockwise: true)
    
    aPath.lineWidth = 5.0 // 线条宽度
    
    aPath.stroke() // Draws line 根据坐标点连线，不填充
//    aPath.fill() // Draws line 根据坐标点连线，填充
}

并不是。我们来看一下把上述代码改成 fill() 的效果：

是不是很出乎意料。的确是填充了，但不是填充到圆心，效果和我们想要的不一样。

那扇形怎么画啊？

其实还是用 fill()，只不过我们需要先在终点和圆心之间连一条线，然后在圆心和起点之间连一条线，然后在使用 fill() 填充。

代码如下，最后一条线（圆心到起点）我们同样使用 closePath 来实现：

// 扇形
override func drawRect(rect: CGRect) {
    let color = UIColor.redColor()
    color.set() // 设置线条颜色
    
    let aPath = UIBezierPath(arcCenter: CGPointMake(150, 150), radius: 75,
            startAngle: 0, endAngle: (CGFloat)(90*M_PI/180), clockwise: true)
    aPath.addLineToPoint(CGPointMake(150, 150))
    aPath.closePath()
    aPath.lineWidth = 5.0 // 线条宽度
    
//    aPath.stroke() // Draws line 根据坐标点连线，不填充
    aPath.fill() // Draws line 根据坐标点连线，填充
}

Perfect！现在再想想文章开头提到的下载 App 时的效果，是不是就有思路了。

我们把 startAngle 设为正上方那个点，然后下载完成了多少，我们就画多大的扇形，把 endAngle 改为已下载完成的部分。

比如下载完成了10%，那我们就画一个十分之一的扇形。下载完了一半，那我们就画一个半圆。

当然这只是简单一说，具体实现起来还有其它细节。不过有了思路以后，我相信是可以实现的。

下面我们来举一个简单的栗子。假设某个应用总共用了两秒下载完，而且每 0.1 秒下载二十分之一（当然这只是假设）。

这样我们就可以每隔 0.1 秒画一个二十分之一的扇形，两秒后整个圆就全部画完了。上代码：

// 实现 App 下载时的效果
var beginAngle = M_PI*3/2 // 起点
var finishAngle = M_PI*3/2+M_PI*2/20 // 终点

override func drawRect(rect: CGRect) {
    let color = UIColor.whiteColor()
    color.set() // 设置线条颜色
    
    let aPath = UIBezierPath(arcCenter: CGPointMake(150, 150), radius: 75, startAngle: (CGFloat)(beginAngle), endAngle: (CGFloat)(finishAngle), clockwise: true)
    aPath.addLineToPoint(CGPointMake(150, 150))
    aPath.closePath()
    aPath.lineWidth = 5.0 // 线条宽度
    aPath.fill() // Draws line 根据坐标点连线，填充
    
    finishAngle += M_PI/20 // 更新终点
}

然后就是每隔 0.1 秒执行一次，2秒后画完，停止执行。上代码：

class ViewController: UIViewController {
    let myView = MyView.init(frame: CGRectZero) //我们自定义的view
    var timer: NSTimer! // 计时器
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        myView.frame = view.bounds
        view.addSubview(myView)
        
        // 每隔 0.1 秒执行一次
        timer = NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, 
                selector: Selector("reDrawView"), userInfo: nil, repeats: true)
    }
    
    func reDrawView() {
        myView.setNeedsDisplay() // 重绘界面
        // 画完一圈后停止
        if myView.finishAngle > myView.beginAngle+M_PI*2 {
            timer.invalidate() // 停止计时器
        }
    }
}

有的童鞋可能会说，可是你这个不是半透明的，App下载时的圆圈是半透明的啊！

好办，只需要把 fill() 改成 fillWithBlendMode(.Normal, alpha: 0.5) 就行了，那样画出来的线就会是半透明的了。

Good job！真正实现时，我们就根据下载的进度，修改终点即可。当然，这些都只是我的个人想法，如果有更好的做法欢迎讨论。

完整的demo请见我的GitHub：https://github.com/963239327/UIBezierPathDemo 别忘了点右上角的 star 哦～

Swift－贝赛尔曲线画扇形、弧线、圆形、多边形——UIBezierPath实现App下载时的动画效果

标签：

原文地址：http://blog.csdn.net/qq_18425655/article/details/51345615