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

Posted 2023-03-21

【中文标题】如何在iOS中实现矩形UIButton到圆形的漂亮动画？

【英文标题】：How to implement nice animation for rectangle UIButton to circle shape in iOS?

【发布时间】：2015-09-11 05:27:15

【问题描述】：

当我点击“登录”按钮时，我需要制作我的矩形登录按钮 Login Screenshot 动画并将其形状更改为圆形，如下面的链接 Login Button after i click

我在 *** 中看到了这段代码，但它没有按我想要的方式工作

    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)


                     ];

【参考方案1】：

试试这个，

Demo Animation

代码：

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

                                          ];


                     ];

输出：

【讨论】：

下载demo代码，按钮宽度布局，

Demo动画下载学习

好的，我明白了。它的工作也很感谢，但我可以稍微延迟一下看看从矩形到圆形的过渡。我试图改变你在代码中给出的动画延迟，但不影响那个时间

延迟1.0，点击按钮后1.0开始动画，第二次延迟0.0，因为动画继续，不需要延迟所以放0.0，

我已经对您的代码进行了一些更改，现在它的工作很酷，请检查更新的代码

【参考方案2】：

这个怎么样？

 [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 秒的动画之后，我得到了这个

【讨论】：

不幸的是，您的代码也无法正常工作s13.postimg.org/6y6t2y5rr/image.png

现在应该可以工作了，我把角半径写错了高度，它将是宽度。

我编辑了从高度到宽度/2的角半径，它对我来说非常好，因为你可以看到截图

【参考方案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;
    ];