Search code examples
iosswiftxcodegeometrycabasicanimation

BasicAnimation, Swift

I defined a circle like this : 

let progressLayer = CAShapeLayer()
let ring = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2 , endAngle: 2 * CGFloat.pi , clockwise: true)

progressLayer.path = ring.cgPath
progressLayer.strokeColor = UIColor.green.cgColor
progressLayer.fillColor = UIColor.clear.cgColor
view.layer.addSublayer(progressLayer)

Then I defined an animation that fill the border of my circle with a color and duration like this:

let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
basicAnimation.toValue = 1
basicAnimation.duration = 60 //Seconds !
basicAnimation.fillMode = .forwards
progressLayer.add(basicAnimation, forKey: "blablabla")

What happened is that the animation comes to the end of the circle with a delay of 12 seconds! (The circle is filled but 12 seconds left) Why does this happened? Is it a trigonometry problem (startAngle endAngle)? I can't understand ...

Solution

  • There is an issue with the bezier path you are adding an extra quarter to the circle,

    So Circle is filled at (60 / 5) * 4 = 48 seconds and the other 12 seconds is overdrawing on an already filled quarter.

    Setting start Angle to 0 will fix the issue.

    let ring = UIBezierPath(arcCenter: center, radius: 100, startAngle: CGFloat(0) , endAngle: 2 * CGFloat.pi , clockwise: true)