I am having some trouble to understand why an animation isn't working like expected. What I am doing is this:
Create a
UIBezierPath
with an arc to move a Label along this path and animate the paths stroke.//Start Point is -.pi /2 to let the Arc start at the top. //self.progress = Value between 0.0 and 1.0 let path : UIBezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: self.bounds.width * 0.5, y: self.bounds.height * 0.5), radius: self.bounds.width * 0.5, startAngle: -.pi / 2, endAngle: (2 * self.progress * .pi) - (.pi / 2), clockwise: true) return path
Add this path to a
CAShapeLayer
circlePathLayer.frame = bounds circlePathLayer.path = self.path.cgPath circlePathLayer.strokeStart = 0 circlePathLayer.strokeEnd = 1
Animate the strokeEnd property with a
CABasicAnimation
let animation = CABasicAnimation(keyPath: "strokeEnd") animation.repeatCount = HUGE animation.fromValue = 0.0 animation.toValue = 1.0 animation.duration = self.animationDuration animation.isRemovedOnCompletion = false animation.fillMode = kCAFillModeBoth
Animate the position property of my label with a
CAKeyFrameAnimation
let animationScore = CAKeyframeAnimation(keyPath: "position") //some things I tried to fix //animationScore.timingFunctions = [CAMediaTimingFunction(controlPoints: 0.250, 0.250, 0.750, 0.750)] //animationScore.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear) animationScore.path = self.path.cgPath animationScore.duration = self.animationDuration animationScore.isRemovedOnCompletion = false animationScore.fillMode = kCAFillModeBoth animationScore.repeatCount = HUGE
Add my animations to layer and label
self.circlePathLayer.add(animation, forKey: nil) self.scoreLabel.layer.add(animationScore, forKey: nil)
My Problem: For ProgressValues greater than 0.75 my label is not moving in linear speed. Values greater than 0.75 mean that my arc is greater than PI. For values less than 0.75 my animation works fine and label and strokeend have the same speed and are on top of each other.
GIF :
Please ignore the 100% in the Label in this gif my progress was at a value of 0.76.
You see my Label slows down after three quarters of my circle.
I hope someone can help me. Many thanks