Animating CALayer of UIView to round corners

Question

I'm trying to animate the rounding of the corners of my view. The cornerRadius property is listed as animatible, but I can't seem to get it to work. I actually can't get any of the other properties to animate either, but the corners are what I'm interested in. Here's my code, and it's pretty darn simple:

[CATransaction begin];
[CATransaction setValue: [NSNumber numberWithFloat: 2.0f] forKey:kCATransactionAnimationDuration];

self.myView.layer.cornerRadius = 50.0f;

[CATransaction commit];

What am I missing here guys? The corners become rounded, but it's instantaneous instead of taking 2 seconds.

picciano · Accepted Answer · 2011-05-04T18:59:17.987

10

CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
anim1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
anim1.fromValue = [NSNumber numberWithFloat:0.0f];
anim1.toValue = [NSNumber numberWithFloat:50.0f];
anim1.duration = 2.0;
[self.myView.layer addAnimation:anim1 forKey:@"cornerRadius"];

edited May 04 '11 at 18:59

answered May 04 '11 at 18:00

picciano

22,341
9
69
82

where is this code located? in viewDidLoad? or viewWillAppear? or viewDidAppear? – picciano May 04 '11 at 18:20
It's the action of a button press. – Micah Hainline May 04 '11 at 18:21
see above for new, improved answer – picciano May 04 '11 at 18:59

KlimczakM · Answer 2 · 2019-07-09T06:55:42.510

Swift 4.2/5:

let anim1 = CABasicAnimation(keyPath: "cornerRadius")
anim1.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
anim1.fromValue = 0
anim1.toValue = 50
anim1.duration = 2.0
layer.add(anim1, forKey: "cornerRadius")

Swift 3/4.0:

let anim1 = CABasicAnimation(keyPath: "cornerRadius")
anim1.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
anim1.fromValue = 0
anim1.toValue = 50
anim1.duration = 2.0
myView.layer.add(anim1, forKey: "cornerRadius")

Update:

As Mark noticed, it's cleaner to use #keyPath to describe the property to be animated:

let anim1 = CABasicAnimation(keyPath: #keyPath(CALayer.cornerRadius))

#keyPath(CALayer.cornerRadius) would be slightly better. – Mark Bridges May 12 '17 at 11:42 — Mark Bridges, May 12 '17 at 11:42

score 1 · Answer 3 · answered Apr 19 '18 at 01:38

1

Seems like you're overthinking it. I was able to get by without using CoreAnimation. Here's what I did:

UIView.animate(withDuration: animationDuration) {
    self.myView.layer.cornerRadius = 10.0
}

answered Apr 19 '18 at 01:38

toddg

2,863
2
18
33

Animating CALayer of UIView to round corners

3 Answers3