iOS Swift-动画绘制圆弧填充，而不是边框笔划

我试图实现从某个起始角度到某个结束角度的圆弧绘制。我正在尝试动画绘制的圆弧，但没有运气

我已经寻找了两个实现，但所有这些都是指绘制动画的圆的伯德

就像画一个派，但只有一种颜色。有一定的起始角和终止角。派的动画绘制

我喜欢的是有动画填充，而弧是动画从开始角度到结束角度

像圆弧是顺时针画的，在画的时候它填充了它的内部颜色

你知道我怎样才能在斯威夫特做到这一点吗

提前谢谢

编辑

这是我画的：

（灰色表示图形饼图覆盖的区域）

绘制饼图的代码

import Foundation
import UIKit

@IBDesignable class PieChart : UIView {

    @IBInspectable var percentage: CGFloat = 50 {
        didSet {
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var outerBorderWidth: CGFloat = 2 {
        didSet {
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var outerBorderColor: UIColor = UIColor.white {
        didSet {
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var percentageFilledColor: UIColor = UIColor.primary {
        didSet {
            self.setNeedsDisplay()
        }
    }

    let circleLayer = CAShapeLayer()

    override func draw(_ rect: CGRect) {
        drawPie(rect: rect, endPercent: percentage, color: UIColor.primary)
    }

    func drawPie(rect: CGRect, endPercent: CGFloat = 70, color: UIColor) {
        let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
        let radius = min(rect.width, rect.height) / 2

        let gpath = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: CGFloat(360.degreesToRadians), clockwise: true)
        UIColor.white.setFill()
        gpath.fill()

        let circlePath = UIBezierPath(arcCenter: center, radius: radius, startAngle: CGFloat(0), endAngle:CGFloat(360.degreesToRadians), clockwise: true)

        circleLayer.path = circlePath.cgPath

        circleLayer.fillColor = UIColor.clear.cgColor
        circleLayer.strokeColor = outerBorderColor.cgColor
        circleLayer.lineWidth = outerBorderWidth
        circleLayer.borderColor = outerBorderColor.cgColor

        self.layer.addSublayer(circleLayer)

        let π: CGFloat = 3.14

        let halfPi: CGFloat = π / 2

        let startPercent: CGFloat = 0.0

        let startAngle = (startPercent / 100 * π  * 2 - π ) + halfPi
        let endAngle = (endPercent / 100 * π  * 2 - π ) + halfPi

        let path = UIBezierPath()
        path.move(to: center)
        path.addArc(withCenter: center, radius: radius, startAngle: CGFloat(startAngle), endAngle: CGFloat(endAngle), clockwise: true)
        path.close()
        percentageFilledColor.setFill()
        path.fill()
    }
}

---

我已经用playway和swift创建了这个代码。这段代码将绘制一个饼图来设置填充颜色的动画。确保在Xcode上打开时间轴窗格，以查看动画是否正常工作。我找不到将path函数直接传递给CAAnimation的方法，因此我的解决方法是创建一个步骤列表，每个步骤都包含一个百分比阶段的路径。可以更改窒息动画的步骤

//: Playground - noun: a place where people can play

import UIKit
import XCPlayground

let STEPS_ANIMATION = 50

let initialPercentage : CGFloat = 0.10
let finalPercentage : CGFloat = 0.75


func buildPiePath(frame : CGRect, percentage : CGFloat) -> UIBezierPath {

    let newPath = UIBezierPath()

    let startPoint = CGPoint(x: frame.size.width, y: frame.height / 2.0)
    let centerPoint = CGPoint(x: frame.size.width / 2.0, y: frame.height / 2.0)
    let startAngle : CGFloat = 0
    let endAngle : CGFloat = percentage * 2 * CGFloat(M_PI)

    newPath.move(to: centerPoint)
    newPath.addLine(to: startPoint)
    newPath.addArc(withCenter: centerPoint,
                   radius: frame.size.width / 2.0,
                   startAngle: startAngle,
                   endAngle: endAngle,
                   clockwise: true)
    newPath.addLine(to: centerPoint)
    newPath.close()
    return newPath
}

func buildPiePathList(frame: CGRect,
                      startPercentage: CGFloat,
                      finalPercentage: CGFloat) -> [AnyObject] {

    var listValues = [AnyObject]()

    for index in 1...STEPS_ANIMATION {

        let delta = finalPercentage - startPercentage
        let currentPercentage = CGFloat(index) / CGFloat(STEPS_ANIMATION)

        let percentage =  CGFloat(startPercentage + (delta * currentPercentage))
        listValues.append(buildPiePath(frame: frame,
                                       percentage: percentage)
            .cgPath)

    }

    return listValues
}




// Container for pie chart

let container = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
container.backgroundColor = UIColor.gray
XCPShowView(identifier: "Container View", view: container)

let circleFrame = CGRect(x: 20, y: 20, width: 360, height: 360)



// Red background
let background = CAShapeLayer()
background.frame = circleFrame
background.fillColor = UIColor.red.cgColor
background.path = buildPiePath(frame: circleFrame, percentage: 1.0).cgPath

container.layer.addSublayer(background)




// Green foreground that animates
let foreground = CAShapeLayer()
foreground.frame = circleFrame
foreground.fillColor = UIColor.green.cgColor
foreground.path = buildPiePath(frame: circleFrame, percentage: initialPercentage).cgPath

container.layer.addSublayer(foreground)




// Filling animation
let fillAnimation = CAKeyframeAnimation(keyPath: "path")
fillAnimation.values = buildPiePathList(frame: circleFrame,
                                        startPercentage: initialPercentage,
                                        finalPercentage: finalPercentage)
fillAnimation.duration = 3
fillAnimation.calculationMode = kCAAnimationDiscrete
foreground.add(fillAnimation, forKey:nil)

---

创建UIView的子类，以便可以绘制特定程度的饼图。@ElTomato请参见编辑。PieChart需要一个具有结束角度值的初始值设定项，以便可以对其进行初始化。然后创建另一个类，用PieChart生成一个对象，并逐渐更改结束值。@ElTomato是的，我知道，我是这样写的。我的问题是，如果我可以使用CoreAnimation来制作填充过程的动画？或者我必须使用UIAnimate来逐渐设置填充动画？我都没有使用过。