Home/ Questions/Q 7591363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T20:38:00+00:00

I am running into an issue when I create an explicit animation to change

  • 0

I am running into an issue when I create an explicit animation to change the value of a CAShapeLayer’s path from an ellipse to a rect.

In my canvas controller I setup a basic CAShapeLayer and add it to the root view’s layer:

CAShapeLayer *aLayer;
aLayer = [CAShapeLayer layer];
aLayer.frame = CGRectMake(100, 100, 100, 100);
aLayer.path = CGPathCreateWithEllipseInRect(aLayer.frame, nil);
aLayer.lineWidth = 10.0f;
aLayer.strokeColor = [UIColor blackColor].CGColor;
aLayer.fillColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:aLayer];

Then, when I animate the path I get a strange glitch / flicker in the last few frames of the animation when the shape becomes a rect, and in the first few frames when it animates away from being a rect. The animation is set up as follows:

CGPathRef newPath = CGPathCreateWithRect(aLayer.frame, nil);
[CATransaction lock];
[CATransaction begin];
[CATransaction setAnimationDuration:5.0f];
CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"path"];
ba.autoreverses = YES;
ba.fillMode = kCAFillModeForwards;
ba.repeatCount = HUGE_VALF;
ba.fromValue = (id)aLayer.path;
ba.toValue = (__bridge id)newPath;
[aLayer addAnimation:ba forKey:@"animatePath"];
[CATransaction commit];
[CATransaction unlock];

I have tried many different things like locking / unlocking the CATransaction, playing with various fill modes, etc…

Here’s an image of the glitch:
http://www.postfl.com/outgoing/renderingglitch.png

A video of what I am experiencing can be found here:
http://vimeo.com/37720876

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Unfortunately this is a limitation of the otherwise awesome animatable path property of CAShapeLayers.

    Basically it tries to interpolate between the two paths. It hits trouble when the destination path and start path have a different number of control points – and curves and straight edges will have this problem.

    You can try to minimise the effect by drawing your ellipse as 4 curves instead of a single ellipse, but it still isn’t quite right. I haven’t found a way to go smoothly from curves to polygons.

    You may be able to get most of the way there, then transfer to a fade animation for the last part – this won’t look as nice, though.

    • 0