UIView animateWithDuration doesn't animate cornerRadius variation

Question

I'm trying to animate the change of the cornerRadius of a UIView instance layer, but the variation of the cornerRadius takes place immediately.

Here's the code:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 100, 100)];
view.layer.masksToBounds = YES;
view.layer.cornerRadius = 10.0;
[UIView animateWithDuration:1.0 animations:^{
    
    [view.layer.cornerRadius = 0.0;
    
}];

Thanks everybody who is going to give me any tips.

EDIT:

I managed to animate this property using Core Animation, using a CABasicAnimation.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.fromValue = [NSNumber numberWithFloat:10.0f];
animation.toValue = [NSNumber numberWithFloat:0.0f];
animation.duration = 1.0;
[viewToAnimate.layer addAnimation:animation forKey:@"cornerRadius"];
[animation.layer setCornerRadius:0.0];

Try this, to make your animation to stick to new values: `animation.removedOnCompletion = NO;` `animation.fillMode = kCAFillModeForwards;` — Mohammad Abdurraafay, Dec 18 '11 at 15:36
@MohammadAbdurraafay No, please don't. That is the wrong way of making an animation "stick". — David Rönnqvist, Jul 23 '13 at 08:38
@DavidRönnqvist Why shouldn't `animation.removedOnCompletion = NO;` be used? You give no alternative suggestions either here or in your answer. — Leon Storey, Sep 17 '13 at 14:27
@user1763532 Let's try that again: [my answer here](http://stackoverflow.com/a/17435092/608157) explains some problems with `removeOnCompletion = NO` and gives one alternate solution. — David Rönnqvist, Sep 17 '13 at 15:03
Possible duplicate of [Circular (round) UIView resizing with AutoLayout... how to animate cornerRadius during the resize animation?](http://stackoverflow.com/questions/35713244/circular-round-uiview-resizing-with-autolayout-how-to-animate-cornerradius) — rob mayoff, Apr 29 '16 at 16:02
@robmayoff The other one may be a duplicate as it was asked only two months ago, whereas this was asked 4 years ago. — Francesco Puglisi, May 03 '16 at 08:08
It doesn't matter which one is older. It matters which one has a working answer. (If age mattered, stackoverflow wouldn't offer the option to close this one as a duplicate of that one.) — rob mayoff, May 15 '16 at 05:25

score 90 · Accepted Answer · edited Jun 20 '20 at 09:12

tl;dr: Corner radius is not animatable in animateWithDuration:animations:.

What the documentation says about view animations.

As the section on Animations in the "View Programming Guide for iOS" says

Both UIKit and Core Animation provide support for animations, but the level of support provided by each technology varies. In UIKit, animations are performed using UIView objects

The full list of properties that you can animate using either the older

[UIView beginAnimations:context:];
[UIView setAnimationDuration:];
// Change properties here...
[UIView commitAnimations];

or the newer

[UIView animateWithDuration:animations:];

(that you are using) are:

frame
bounds
center
transform (CGAffineTransform, not the CATransform3D)
alpha
backgroundColor
contentStretch

As you can see, cornerRadius is not in the list.

Some confusion

UIView animations is really only meant for animating view properties. What confuses people is that you can also animate the same properties on the layer inside the UIView animation block, i.e. the frame, bounds, position, opacity, backgroundColor. So people see layer animations inside animateWithDuration and believe that they can animate any view property in there.

The same section goes on to say:

In places where you want to perform more sophisticated animations, or animations not supported by the UIView class, you can use Core Animation and the view’s underlying layer to create the animation. Because view and layer objects are intricately linked together, changes to a view’s layer affect the view itself.

A few lines down you can read the list of Core Animation animatable properties where you see this one:

The layer’s border (including whether the layer’s corners are rounded)

So to animate the cornerRadius you need to use Core Animation as you've already said in your updated question (and answer). I just added tried to explain why its so.

Some extra clarification

When people read the documentations that says that animateWithDuration is the recommended way of animating it is easy to believe that it is trying to replace CABasicAnimation, CAAnimationGroup, CAKeyframeAnimation, etc. but its really not. Its replacing the beginAnimations:context: and commitAnimations that you seen above.

Good answer. Props for pointing out all the documentation as well. — SpacyRicochet, Sep 09 '13 at 10:27

score 25 · Answer 2 · edited Nov 29 '19 at 13:58

25

I use this extension to animate change of corner radius:

extension UIView
{
    func animateCornerRadius(from: CGFloat, to: CGFloat, duration: CFTimeInterval)
    {
        CATransaction.begin()
        let animation = CABasicAnimation(keyPath: "cornerRadius")
        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
        animation.fromValue = from
        animation.toValue = to
        animation.duration = duration
        CATransaction.setCompletionBlock { [weak self] in
            self?.layer.cornerRadius = to
        }
        layer.add(animation, forKey: "cornerRadius")
        CATransaction.commit()
    }
}

edited Nov 29 '19 at 13:58

Francesco Puglisi

2,140
2
18
26

answered Jan 17 '16 at 19:10

ChikabuZ

10,031
5
63
86

3

Worked really well. You don't really need the from field since it should really always be `layer.cornerRadius`. – Wyetro Jan 08 '17 at 09:01
Thank you, worked well inside my UIView.animate block, ie combining the movement of a UIView with a change in its cornerRadius – xaphod Apr 17 '17 at 00:44
1

It's animatable as of iOS 11 https://useyourloaf.com/blog/masked-and-animated-corners/ – aehlke Dec 15 '19 at 20:03

score 15 · Answer 3 · answered Jun 24 '11 at 08:44

15

A corner radius variation can be animated but the only way to do so is to use a CABasicAnimation. Hope this helps somebody out there.

answered Jun 24 '11 at 08:44

Francesco Puglisi

2,140
2
18
26

score 13 · Answer 4 · edited Dec 25 '15 at 14:27

13

You can implement UIView animation as here: http://maniacdev.com/2013/02/ios-uiview-category-allowing-you-to-set-up-customizable-animation-properties

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
animation.duration = DURATION;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.toValue = @(NEW_CORNER_RADIUS);
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
[view.layer addAnimation:animation forKey:@"setCornerRadius:"];

edited Dec 25 '15 at 14:27

voiger

781
9
19

answered Feb 12 '14 at 07:59

akaDuality

384
5
6

2

Since iOS 11 cornerRadius is animatable property – akaDuality Aug 31 '17 at 10:00

edwardmp · Answer 5 · 2018-07-03T16:19:03.913

13

Starting in iOS 10 you can actually animate cornerRadius:

UIViewPropertyAnimator(duration: 3.0, curve: .easeIn) {
    square.layer.cornerRadius = 20
}.startAnimation()

edited Jul 03 '18 at 16:19

answered May 31 '18 at 22:36

edwardmp

6,339
5
50
77

2

Its available from iOS 10+. – infiniteLoop Jun 23 '18 at 19:13

score 2 · Answer 6 · answered May 11 '11 at 01:57

2

Doesn't look like that's one of the animatable properties.

See here for the full list:

http://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/AnimatingViews/AnimatingViews.html

answered May 11 '11 at 01:57

Chris

39,719
45
189
235

1

Well... if you use the old approach for animations, it will work... But if you try to use the approach suggested by Apple, than it doesn't animate. – Francesco Puglisi May 11 '11 at 13:31
1

@singingAtom animateWithDuration: and CABasicAnimations is actually not the same thing so there is no new or old approach. animateWithDuration is not a part of Core Animation and can only animate view properties, (cornerRadius is a layer property). The real **old approach** that animateWithDuration replaces is [UIView beginAnimations:context:] and [UIView commitAnimation] which work exactly the same way as the new approach. Apple suggests using animateWithDuration: for view properties and continues on to say that you should use Core Animation for more advanced animations. – David Rönnqvist May 20 '12 at 13:44

score 1 · Answer 7 · edited May 23 '17 at 11:47

1

You can make this property animatable in +[UIView animateWithDuration:] by implementing -[actionForLayer:forKey] in your view class. See this question for an example of how.

edited May 23 '17 at 11:47

Community

1
1

answered Jun 05 '12 at 17:49

Simon

25,468
44
152
266

score 0 · Answer 8 · answered May 24 '19 at 12:03

CornerRadius property is animatable

working code is below

//layer init

let imageLayer = CALayer() 
imageLayer.frame = CGRect(x: 0, y: 0.0, width: tenPercent, height: tenPercent)
imageLayer.contents = imageNew.cgImage
imageLayer.masksToBounds = true

// animation init

let animationCornerRadius = CABasicAnimation(keyPath: "cornerRadius")
animationCornerRadius.beginTime =  0.01
animationCornerRadius.duration = CFTimeInterval(5)
animationCornerRadius.fromValue = 1
animationCornerRadius.toValue = tenPercent / 2
animationCornerRadius.fillMode = .forwards
animationCornerRadius.isRemovedOnCompletion = false
imageLayer.add(animationCornerRadius , forKey: "cornerRadius")

UIView animateWithDuration doesn't animate cornerRadius variation

8 Answers8

What the documentation says about view animations.

Some confusion

Some extra clarification

Linked

Related