iOS: Animating a circle slice into a wider one

Viewed 934

Core-Animation treats angles as described in this image: (image from http://btk.tillnagel.com/tutorials/rotation-translation-matrix.html)

EDIT: Adding an animated gif to explain better what I'm needing:

enter image description hereenter image description here

I need to animate a slice to grow wider, starting at 300:315 degrees, and ending 300:060.

To create each slice I'm using this function:

extension CGFloat {
    func toRadians() -> CGFloat {
        return self * CGFloat(Double.pi) / 180.0
    }
}
func createSlice(angle1:CGFloat, angle2:CGFloat) -> UIBezierPath! {
    let path: UIBezierPath = UIBezierPath()
    let width: CGFloat = self.frame.size.width/2
    let height: CGFloat = self.frame.size.height/2
    let centerToOrigin: CGFloat = sqrt((height)*(height)+(width)*(width));
    let ctr: CGPoint = CGPoint(x: width, y: height)
    path.move(to: ctr)
    path.addArc( withCenter: ctr,
                 radius: centerToOrigin,
                 startAngle: CGFloat(angle1).toRadians(),
                 endAngle: CGFloat(angle2).toRadians(),
                 clockwise: true
    )
    path.close()
    return path
}

I can now create the two slices and a sublayer with the smaller one, but I can't find how to proceed from this point:

func doStuff() {
    path1 = self.createSlice(angle1: 300,angle2: 315)
    path2 = self.createSlice(angle1: 300,angle2: 60)

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path1.cgPath
    shapeLayer.fillColor = UIColor.cyan.cgColor
    self.layer.addSublayer(shapeLayer)

I would highly appreciate any help here!

3 Answers
Related