如何在 iOS 中實現矩形 UIButton 到圓形的漂亮動畫？

Question

當我點擊“登錄”按鈕時，我需要制作我的矩形登錄按鈕登錄屏幕截圖以進行動畫處理並將其形狀更改為如下所示的圓形鏈接登錄按鈕單擊后

我在 stackoverflow 中看到過這段代碼，但它沒有按照我想要的方式工作

    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;

請幫忙

感謝您回答這個問題。

這是最終的代碼

[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

這個怎么樣？

 [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;

    }];

這就是我得到的

在 1 秒動畫后，我得到了這個

Answer 2

嘗試這個，

演示動畫

代碼：

- (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!");

                                          }];


                     }];

}

輸出 ：

Answer 3

如果你想得到圈子，只需按照簡單的方法

-(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;
    ];
  }
}