Issue with CAShapeLayer Animation iOS7

jarora

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.

Desired Effect

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

Distorted Effect 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;
}
GCBenson

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 :)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Issue with CAShapeLayer Animation iOS7

From Dev

Issue Resuming UIVIew Animation: ios7?

From Dev

iOS Animation: CADisplayLink vs CAShapeLayer

From Dev

Localstorage issue with ios7

From Dev

Change CAShapeLayer without Animation

From Dev

CAShapeLayer Not Updating in Animation

From Dev

Adjacent CAShapeLayer Antialiasing Issue

From Dev

CAShapeLayer rendering issue

From Dev

emulate iOS7 controller push animation

From Dev

NSLayoutConstraint animation duration in iOS7

From Dev

animation similar to opening app in ios7

From Dev

Simple animation not working on iOS7

From Dev

Issue with Swipe Gesture Control in iOS7

From Dev

Cursor visibility issue in ios7

From Dev

iOS7: UITapGestureRecognizer reuse issue

From Dev

IOs7 multiple storyboard localization issue

From Dev

issue with ios7 tabbar controller

From Dev

Image Background Issue in IOS7

From Dev

Date format issue in ios7

From Dev

NSString to NSDate issue IOS7

From Dev

IOs7 multiple storyboard localization issue

From Dev

Cursor visibility issue in ios7

From Dev

UIBezierPath & CAShapeLayer initial animation jump

From Dev

UIBezierPath & CAShapeLayer initial animation jump

From Dev

iOS 7 - Navigation Controller Toolbar issue with setToolbarHidden: animation

From Dev

iOS 7 UITableView didSelectRowAtIndexPath pushViewController programmatically, Animation issue

From Dev

iOS 7 - Navigation Controller Toolbar issue with setToolbarHidden: animation

From Dev

Issue in iOS7, fine in iOS6

From Dev

problems with animation when deleting the last row of a TableView in ios7