Tometoyou Tometoyou - 2 years ago 107
Swift Question

CAShapeLayer stroke animated with CADisplayLink not completed

I have set up a

that calls the following
function to draw a circle path animation in 10 seconds:

func drawCircle() {
currentDuration = currentDuration + displayLink.duration
circleLayer.strokeEnd = min(CGFloat(currentDuration/maxDuration), 1)

if (currentDuration >= maxDuration) {

func stopCircleAnimation() {
let pausedTime = circleLayer.convertTime(CACurrentMediaTime(), fromLayer: nil)
circleLayer.speed = 0
circleLayer.timeOffset = pausedTime

is the elapsed time, and
is equal to 10. This works fine, except when
currentDuration >= maxDuration
. Even though the strokeEnd is set to 1, it never fully completes the circle. Why is this??


I think it could have something to do with the
property of the
. If I set it to a higher amount, e.g. 10, then the circle is completely closed.

Answer Source

This is due to the fact that setting the strokeEnd of your CAShapeLayer generates an implicit animation to the new value. You then set the layer's speed to zero before this animation is complete, therefore 'pausing' the animation, so that it appears 'incomplete'.

While you can work around by disabling implicit animations through setDisableActions – you should probably be considering if using a CADisplayLink is really appropriate here. Core Animation is designed to generate and run animations for you in the first place by generating its own intermediate steps, so why not achieve the same result with an explicit or implicit animation of your layer's strokeEnd?

Here's an example of how you could do this with an implicit animation:


// if you really want a linear timing function – generally makes the animation look ugly
CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear))

circleLayer.strokeEnd = 1

Or if you want it as an explicit animation:

let anim = CABasicAnimation(keyPath: "strokeEnd")
anim.fromValue = 0
anim.toValue = 1
anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
anim.duration = 10
circleLayer.addAnimation(anim, forKey: "strokeEndAnim")

// update model layer value
circleLayer.strokeEnd = 1
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download