Animate UIView and keep corner radius as a circle

Question

I have a circle UIView :

  con=[[UIView alloc] initWithFrame:CGRectMake(self.frame.size.width-size-delta, y , size, size)];
    con.layer.borderColor=[UIColor whiteColor].CGColor;
    con.layer.borderWidth=1.0;
    con.backgroundColor=[UIColor clearColor];
    con.layer.cornerRadius=con.frame.size.width/2.0;
    con.clipsToBounds=YES;
    [self addSubview:con];

Later i would like to change its size to a bigger one , but when i do that, at the start of the animation you see some rect shape , and than it changes back to circle.

I would like a flat animation where it keeps staying as a circle when its frame is being changing.

   CGRect frm=startConfrm; //original frame of the circle

    frm.size.width*=2;
    frm.size.height*=2;
     frm.origin.y=self.frame.size.height/2.0-frm.size.height/2.0;

    [UIView animateWithDuration:1.5
                          delay:0.0
                        options: UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                         con.frame=frm;
                         con.layer.cornerRadius=con.frame.size.width/2.0;
                      }
                     completion:^(BOOL finished){   }];

Answer 1

If you only want to scale your view size, then you can use below code.

[UIView animateWithDuration:2.0 animations:^{

con.transform = CGAffineTransformMakeScale(2, 2); // it will scale as double size

}completion:^(BOOL finished) {
 // do whatever at animation completion
      }
}];

To reset view back to normal size,

con.transform = CGAffineTransformIdentity;

Reference: https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CGAffineTransform/index.html#//apple_ref/c/func/CGAffineTransformMakeScale

Answer 2

To make a view "grow" into place, don't animate the frame. Animate the transform.

Load your subview from the nib. Set its transform to a scale of 0:

view.transform = CGAffineTransformMakeScale(1,1);

Then add it to your superview.

Inside the animation block, set the transform to identity:

view.transform = CGAffineTransformIdentity;

And the view will grow to normal size. You may need to fiddle with the anchor point to make it grow from the right point.

You can also change the frame within the block, but to move a view only I prefer to change the center property, you shouldn't try to set the frame if you also have a transform.

Hope it helps you !!

EDIT: Replace your animation block code with the following code:

[UIView animateWithDuration:1.5
                          delay:0.0
                        options: UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                         CGAffineTransform newTransform;
                         newTransform = CGAffineTransformMakeScale(0, 0);
                         con.transform = CGAffineTransformScale(newTransform,2,2);
                     }
                     completion:^(BOOL finished){   }];