如何将矩形圆角 UIButton 缩小为圆形 UIButton？

Question

借助于此，我能够缩小 UIButton，但最后我希望 UIButton 获得 rounded.Please 帮助我在注册按钮中获得所需的动画。代码片段是：按照 link : https://www.dropbox.com/s/rh4tdub3zabxp2j/shot.gif?dl=0

self.buttonShrink = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
self.buttonShrink.duration = .2f;
self.buttonShrink.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.9,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.8,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.7,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.6,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.5,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.4,1,1)],[NSValue valueWithCATransform3D:CATransform3DMakeScale(.3,1,1)]];
self.buttonShrink.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
self.sampleButton.transform = CGAffineTransformMakeScale(0,0);
self.sampleButton.alpha = 1;
[self.sampleButton.layer addAnimation:self.buttonShrink forKey:@"buttonScale"];
[self.sampleButton setUserInteractionEnabled:NO];

Answer 1

我从来没有用它来缩小，但因为你正在使用按钮层，所以你为什么不能使用它 cornerRadius。我不确定建议是否可行？？

Answer 2

我做了一些修补并得到了相当不错的结果。

编辑：

我刚刚将一个名为 MorphingButton (link) 的演示项目上传到 GitHub，它生成了下面的动画：

这是我所做的：

我在 IB 中创建了一个普通的 iOS 8 按钮（根本没有轮廓）并连接了一个插座和一个动作。

我添加了高度和宽度限制。

我添加了代码来设置按钮图层的 borderColor、borderWidth 和 cornerRadius，使其具有圆角外观。这需要进行一些调整才能使其看起来像一个真正的圆角矩形按钮。

在按钮的 IBAction 中，在将其设为圆形和设为矩形之间来回切换。

要使按钮变圆：

使用 UIView animateWithDuration 方法调用来设置按钮的高度约束到它的宽度约束（使其成为正方形）并调用 layoutWithNeeded()
使用 aCABasicAnimation 将按钮图层的角半径设置为 1/2 按钮宽度。

要使按钮成为矩形：

使用 UIView animateWithDuration 方法调用来设置按钮的它的起始高度限制的高度限制
使用 aCABasicAnimation 将按钮图层的角半径设置为 10（这对于圆角矩形按钮来说看起来很不错。）

IBAction 和 viewDidLoad 代码在 Objective-C 中看起来像这样：

- (void)viewDidLoad
{
  oldHeight = buttonHeightConstraint.constant;
  buttonIsRound = FALSE;
  [super viewDidLoad];
  animationDuration = 0.5;
}

- (IBAction)handleButton:(id)sender
{
  CGFloat newHeight;
  CGFloat newCornerRadius;
  NSLog(@"Entering %s", __PRETTY_FUNCTION__);
  
  if (buttonIsRound)
  {
    //If the button is currently round,
    //go back to the old height/corner radius
    newHeight = oldHeight;
    newCornerRadius = 10;
  }
  else
  {
    //It isn't round now,
    //so make it's height and width the same
    //and set the corner radius to 1/2 the width
    newHeight = buttonWidthConstraint.constant;
    newCornerRadius = buttonWidthConstraint.constant/2;
  }
  
  [UIView animateWithDuration:  animationDuration
                   animations:^
   {
     buttonHeightConstraint.constant = newHeight;
     [button layoutIfNeeded];
   }];
  CABasicAnimation *cornerAnimation = [[CABasicAnimation alloc] init];
  cornerAnimation.keyPath = @"cornerRadius";
  cornerAnimation.fromValue = @(button.layer.cornerRadius);
  cornerAnimation.toValue = @(newCornerRadius);
  cornerAnimation.duration = animationDuration;
  [button.layer addAnimation: cornerAnimation forKey: @"woof"];
  button.layer.cornerRadius = newCornerRadius;
  buttonIsRound = !buttonIsRound;
}

按钮的 Swift IBAction 代码如下所示：

@IBAction func handleButton(sender: AnyObject)
{
  if !buttonIsRound
  {
    UIView.animateWithDuration(animationDuration)
      {
        self.buttonHeightConstraint.constant = self.buttonWidthConstraint.constant
        self.button.layoutIfNeeded()
        self.buttonIsRound = true
    }
    let cornerAnimation = CABasicAnimation(keyPath: "cornerRadius")
    cornerAnimation.fromValue = button.layer.cornerRadius
    cornerAnimation.toValue = self.buttonWidthConstraint.constant / 2.0
    cornerAnimation.duration = animationDuration
    button.layer.addAnimation(cornerAnimation, forKey: "woof")
    button.layer.cornerRadius = self.buttonWidthConstraint.constant / 2.0
  }
  else
  {
    UIView.animateWithDuration(animationDuration)
      {
        self.buttonHeightConstraint.constant = self.oldHeight
        self.button.layoutIfNeeded()
        self.buttonIsRound = false
    }
    let cornerAnimation = CABasicAnimation(keyPath: "cornerRadius")
    cornerAnimation.fromValue = self.buttonWidthConstraint.constant / 2.0
    cornerAnimation.toValue = 10
    cornerAnimation.duration = animationDuration
    button.layer.addAnimation(cornerAnimation, forKey: "woof")
    button.layer.cornerRadius = 10
  }
}

如何将矩形圆角 UIButton 缩小为圆形 UIButton？

How to shrink a rectangular round cornered UIButton to a circular UIButton?

iphone

core-animation

objective-c

uibutton

编辑：

要使按钮变圆：

要使按钮成为矩形：