在Swift 3中制作路径动画

Question

以下代码创建一个红色的270度环形。

let result = Measurement(value: 270, unit: UnitAngle.degrees)
        .converted(to: .radians).value


let circlePath = UIBezierPath(arcCenter: CGPoint(x: 200,y: 200), radius: CGFloat(90), startAngle: CGFloat(0), endAngle:CGFloat(result), clockwise: true)


let shapeLayer = CAShapeLayer()
shapeLayer.path = circlePath.cgPath

    //change the fill color
    shapeLayer.fillColor = UIColor.clear.cgColor
    //you can change the stroke color
    shapeLayer.strokeColor = UIColor.red.cgColor
    //you can change the line width
    shapeLayer.lineWidth = 30.0

    view.layer.addSublayer(shapeLayer)

我该如何使用Swift 3制作路径绘制动画？谢谢。

- Johny D Good

---

你没有说明想要哪种动画效果。你是想改变颜色时进行动画吗？还是移动环形图？或者是将环形图的弧线从0度到270度进行绘制动画？ - Duncan C

绘制弧形的动画化。 - Johny D Good

看看安迪·唐泽利的答案。他解释了该怎么做。 - Duncan C

未来，在您发布问题之前，请从陌生人的角度回顾一下您的问题。您是否清楚地描述了您要做什么以及在实现该目标时遇到的具体问题？如果出现错误，您是否提供了完整的错误文本以及发生错误的行？ - Duncan C

Answer 1

CAShapeLayer有strokeStart和strokeEnd属性，用于定义要绘制的路径的哪一部分。它们的默认值分别为0.0和1.0，因为通常情况下您需要绘制整个路径。

您可以使用CABasicAnimation来动画更改这些值，方法是指定"strokeEnd"或"strokeStart"值键，如下所示:

let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.fromValue = 0.0
pathAnimation.toValue = 1.0
pathAnimation.duration = 1.0   // time in seconds.
shapeLayer.add(pathAnimation, forKey: "strokeEnd")

- Andy Donzelli