Animate drawing a pie shape in Swift

Question

I'm trying to animate a "pie" circle shape in code to start with a full circle and then end with an empty circle, each step of the way smoothly animating out 1 piece of the "pie" at a time, like so:

I create the shape like so:

func drawOval() {

    let newOvalPath = UIBezierPath()
    let ovalRect = CGRect(x: 0, y: 0, width: 100, height: 100)

    newOvalPath.addArcWithCenter(CGPoint(x: ovalRect.midX, y: ovalRect.midY), radius: ovalRect.width / 2, startAngle: -10 * CGFloat(M_PI)/180, endAngle: -90 * CGFloat(M_PI)/180, clockwise: true)
    newOvalPath.addLineToPoint(CGPoint(x: ovalRect.midX, y: ovalRect.midY))
    newOvalPath.closePath()

    MyStyleKit.instance.ovalPath = newOvalPath

}

...

import UIKit

class MyStyleKit {
static let instance = MyStyleKit()

private var _ovalPath: UIBezierPath?

var ovalPath: UIBezierPath? {
    get {
        return _ovalPath
    } set {
        _ovalPath = newValue
    }
}

func drawCircle() {

    let color = UIColor(red: 0.930, green: 0.043, blue: 0.043, alpha: 1.000)

    if let ovalPath = self.ovalPath {

        color.setFill()
        ovalPath.fill()
    }
}

I'm then trying to animate the transition based on an NSTimer, and for each second this function is called:

func updateOval() {

    startAngle += 30

    let newOvalPath = UIBezierPath()
    let ovalRect = CGRect(x: 0, y: 0, width: 100, height: 100)

    newOvalPath.addArcWithCenter(CGPoint(x: ovalRect.midX, y: ovalRect.midY), radius: ovalRect.width / 2, startAngle: startAngle * CGFloat(M_PI)/180, endAngle: -90 * CGFloat(M_PI)/180, clockwise: true)
    newOvalPath.addLineToPoint(CGPoint(x: ovalRect.midX, y: ovalRect.midY))
    newOvalPath.closePath()

    MyStyleKit.instance.ovalPath = newOvalPath
    MyStyleKit.instance.drawCircle()
    self.drawView.setNeedsDisplay()

}

The problem is that the circle doesn't animate, it just abruptly changes from one angle to the next. How do I animate this smoothly from one position to the next?

Answer 1

As I can see you change your angle by 30 degrees each second. That's why you don't get smooth animation. Try refresh your view each millisecond by 1/30 degrees and you'll get a much more smooth animation