Issue with CAShapeLayer Animation iOS7

Question

I have been struggling with an animation effect on iOS7 (8, 9 it works fine) that involves contracting a rounded rect to become a circle. To get an effect like this.

But i am getting some distortion when trying to contract the circle on iOS7.

My view controller is pretty simple

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.fillColor = [UIColor blackColor].CGColor;
    layer.frame = CGRectMake(100, 100, 100, 100);
    layer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 50) cornerRadius:25].CGPath;
    self.myLayer = layer;
    [self.view.layer addSublayer:layer];

}


- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"path"];
    animation.values = @[
                         (id)[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 50) cornerRadius:25].CGPath,
                         (id)[UIBezierPath bezierPathWithRoundedRect:CGRectMake(5, 0, 90, 50) cornerRadius:25].CGPath,
                         (id)[UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 0, 80, 50) cornerRadius:25].CGPath,
                         (id)[UIBezierPath bezierPathWithRoundedRect:CGRectMake(15, 0, 70, 50) cornerRadius:25].CGPath,
                         (id)[UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 0, 60, 50) cornerRadius:25].CGPath,
                         (id)[UIBezierPath bezierPathWithRoundedRect:CGRectMake(25, 0, 50, 50) cornerRadius:25].CGPath,
                         ];

    animation.keyTimes = @[@(0),
                           @(0.18),
                           @(0.36),
                           @(0.54),
                           @(0.72),
                           @(1),
                           ];

    animation.duration = 10;
    animation.fillMode = kCAFillModeForwards;
    [self.myLayer addAnimation:animation forKey:nil];
    self.myLayer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(25, 0, 50, 50) cornerRadius:25].CGPath;
}

score 2 · Accepted Answer · answered Nov 11 '15 at 12:05

This seems to be a bug with iOS 7. Check out this link:

http://www.paintcodeapp.com/blogpost/code-for-ios-7-rounded-rectangles

There is a category method at the bottom of the post which fixes the issue. I tested it out with your code and it seems to work! I had to make one small change, which was to replace

CGFloat limitedRadius = MIN(radius, limit);

with

CGFloat limitedRadius = radius;

This allowed the corner radius to become big enough to create a circle. Probably worth investigating why the corner radius was limited in the first place, but I'll leave that for you :)

Thanks man! Saved me loads of time. Though the explanation regarding why it was happening in first place and why you had to remove the limit is still a little a blur. — jarora, Nov 11 '15 at 13:20

Issue with CAShapeLayer Animation iOS7

1 Answers1