How to change the rectangle shape to a circle shape with animation

Question

I have a label:

    self.logInLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 100)];
    self.logInLabel.backgroundColor = [UIColor clearColor];
    self.logInLabel.backgroundColor = Color_Circle_Outer;
    self.logInLabel.textColor = Color_Circle_Outer;
    self.logInLabel.textAlignment = NSTextAlignmentCenter;
    self.logInLabel.lineBreakMode = NSLineBreakByWordWrapping;
    self.logInLabel.numberOfLines = 1;
    self.logInLabel.font = [UIFont boldSystemFontOfSize:12*IPAD];
    self.logInLabel.text = @"Log In";
    [self addSubview:self.logInLabel];
    self.logInLabel.layer.cornerRadius   = self.frame.size.height/2.0;
    self.logInLabel.layer.borderColor    = Color_Circle_Outer.CGColor;
    self.logInLabel.layer.borderWidth    = 2*IPAD;
    self.logInLabel.layer.masksToBounds  = YES;

I want to change this shape to a Circle. I have tried:

    [UIView animateWithDuration:AnimationTime animations:^{
       self.logInLabel.layer.bounds = CGRectMake(0, 0, self.frame.size.height, self.frame.size.height);
    }];

But the shape changed immediately without animation, then the position change to center with animation. Then I tried with this:

    [UIView animateWithDuration:AnimationTime animations:^{
       self.logInLabel.bounds = CGRectMake(0, 0, self.logInLabel.frame.size.height, self.logInLabel.frame.size.height);
    }];

I have very ugly animation effect.

I do not care if this view is a label, I just want to implement changing a rectangle shape to a circle shape with an animation.

Thank you.

Setting the bounds (or the frame) of the label should do the job. What "ugly animation effects" are you experiencing? — Eiko, Jul 17 '15 at 11:17
http://stackoverflow.com/questions/5948167/uiview-animatewithduration-doesnt-animate-cornerradius-variation — iBhavin, Jul 17 '15 at 11:22

score 1 · Answer 1 · answered Jul 17 '15 at 11:23

1

It works only CABasicAnimation not the UIView animateWithDuration

    UIView *logInLabel = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    logInLabel.backgroundColor = [UIColor blackColor];
    logInLabel.layer.masksToBounds = YES;
    [self.view addSubview:logInLabel];

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

answered Jul 17 '15 at 11:23

Kordi

2,405
1
14
13

If you check my code carefully, cornerRadius always equal to logInLabel.frame.size.height/2.0. I just want to change the shape with animation, not changing cornerRadius. So I have to change the width equal to height to get a circle , result is correct, but i have bad animation. – Nijat2018 Jul 17 '15 at 12:23
You wanted to change a rectangle shape to a circle! And thats what the code is doing! So i dont get your complain! – Kordi Jul 17 '15 at 14:27
if width != height, do you think Rectangle can be a circle if only you set cornerRadius=height/2.0 . So I have to change the width equal to height to change a rectangle shape to a circle, my cornerRadius always equal to height/2.0. I do not have to do anything with it. Anyway I solved my problem on other ways which using CAShapeLayer. Thank you. – Nijat2018 Jul 17 '15 at 14:40
@Uyghur Boy. I'm facing similar problem. It would be great if you could post your solution as answer to this question and mark it accepted as well. – Maverick Jan 26 '17 at 08:15

score 0 · Answer 2 · answered Jul 17 '15 at 11:11

0

From your code remove the line :

self.logInLabel.layer.cornerRadius = self.logInLabel.frame.size.height / 2.0;

and put it in an animation block like this

You can set cornerRadius of your UILabel to get a circular view.

[UIView animateWithDuration:AnimationTime animations:^{
       self.logInLabel.layer.cornerRadius = self.logInLabel.frame.size.height / 2.0f;
    }];

However, the animation will not look very good and the final frame will not be an exact circle because the height and width of your UILabel are not in 1:1 proportion.

If you still don't get the animation try to check the value of AnimationTime variable.

answered Jul 17 '15 at 11:11

Vinay Jain

1,653
20
28

You can check my code, I have already change the frame to width:height = 1:1, the cornerRadius will not change. In this way i hope it change from rectangle(with cornerRadius) to a Circle. – Nijat2018 Jul 17 '15 at 11:17
This only effect the cornerRadius, not the size of Label. At the beginning I have size(200, 100) with cornerRadius(100/2.0), at the end I have size(100, 100) with cornerRadius(100/2.0). I am not changing cornerRadius, I am only changing the width = height which results a circle shape. Your code only works on changing cornerRadius. – Nijat2018 Jul 17 '15 at 12:40

score 0 · Answer 3 · answered Jul 17 '15 at 11:22

0

Look that might help you

[UIView animateWithDuration:0.4 animations:^{
        CGPoint center = self.logInLabel.center;
        self.logInLabel.layer.cornerRadius = self.logInLabel.frame.size.height/2;
        self.logInLabel.frame = CGRectMake(0, 0, self.logInLabel.frame.size.height, self.logInLabel.frame.size.height);
        self.logInLabel.center = center;
    }];

answered Jul 17 '15 at 11:22

Sunny Shah

12,990
9
50
86

The size change to circle immediately without any animation which has the same behaviour with mine code. Then the position is changing to center with animation. I want to change the shape with animation. – Nijat2018 Jul 17 '15 at 12:19

How to change the rectangle shape to a circle shape with animation

3 Answers3