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

Question

借助于此，我能够缩小UIButton但是我希望UIButton能够得到圆润。请帮我在注册按钮中获得所需的动画。代码段是： 请点击链接：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

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

编辑：

我刚刚向GitHub上传了一个名为MorphingButton（链接）的演示项目，该项目生成以下动画：

这就是我的所作所为：

我在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
  }
}

Answer 2

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