如何在 iOS 中实现矩形 UIButton 到圆形的漂亮动画？

Question

When i clicked on "Login" button i need to make my rectangle login button Login Screenshot to animate and change it shape to circle like below link Login Button after i click

I have seen this code in stackoverflow but its not working the way i want

    CGFloat width = self.login.frame.size.width;
CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
morph.fromValue = @0;
morph.toValue = @(width/2);
morph.duration = 0.5;
[self.login.layer addAnimation:morph forKey:@"morph"];
self.login.layer.cornerRadius = width/2;

Please help

Thanks for answering this.

This is the final code

[UIView animateWithDuration:0.5
                          delay:0.0
                        options:UIViewAnimationCurveLinear
                     animations:^{
                         self.layoutWidth.constant = 70;
                         [self.view layoutIfNeeded];
                         self.btnLogin.clipsToBounds = YES;
                         self.btnLogin.layer.cornerRadius =self.btnLogin.bounds.size.height/2.0f;

                     }
                     completion:^(BOOL finished){


                     }];

Answer 1

How about this?

 [UIView animateWithDuration:1.0 animations:^{
        CGRect frame = btn.frame;
        CGPoint center = btn.center;
        frame.size.width = btn.frame.size.height;
        frame.size.height = btn.frame.size.height;

        btn.frame = frame;
        btn.center = center;
        btn.layer.cornerRadius = frame.size.width/2;
        btn.clipsToBounds = YES;

    }];

This is what i get

And after a 1 sec animation i get this

Answer 2

Try this,

Demo Animation

Code:

- (IBAction)clicklogin:(id)sender {

    [UIView animateWithDuration:0.1
                          delay:1.0
                        options:UIViewAnimationCurveLinear
                     animations:^{
                         self.layoutWidth.constant = 70;
                         [self.view layoutIfNeeded];

                     }
                     completion:^(BOOL finished){


                         NSLog(@"Done!");

                         [UIView animateWithDuration:0.1
                                               delay:0.0
                                             options:UIViewAnimationCurveLinear
                                          animations:^{
                                              self.btnLogin.clipsToBounds = YES;
                                              self.btnLogin.layer.cornerRadius =self.btnLogin.bounds.size.height/2.0f; //or use ( self.login.bounds.size.height/2);
                                              self.btnLogin.layer.borderColor=[UIColor redColor].CGColor;
                                              self.btnLogin.layer.borderWidth=2.0f;

                                              [self.view layoutIfNeeded];

                                          }
                                          completion:^(BOOL finished){


                                              NSLog(@"Done!");

                                          }];


                     }];

}

Output :

Answer 3

If you want to get circle,just follow simple way

-(IBAction)actionClick:(id)sender
{  
  [UIView animateWithDuration:0.7f
                 animations:^
  {
     [sender setAlpha:0.5f];
  }
                 completion:^(BOOL finished)
  {
     [sender setAlpha:1.0f];
     button.layer.cornerRadius = button.frame.size.width / 2;
     button.layer.borderColor=[UIColor redColor].CGColor;
     button.layer.borderWidth=2.0f;
    ];
  }
}