如何在不移动按钮的情况下增加 UIButton 图像的高度

Question

我已将 UIButton 添加到故事板，然后将我的图像添加到按钮。我想要做的是，当您点击按钮时，高度会略微增加，然后按钮的高度会降低大约四分之一。

@IBAction func StopsClick(sender: UIView) {
    //Get the y coordinates of Image
    let origin = sender.bounds.origin.y

    //This decreases the height of Image but the image moved. I want the image to remain stationary and only the top of the image to increase in height.
    UIView.animateWithDuration(0.5) {
        sender.bounds = CGRectMake(0, origin, sender.bounds.width, sender.bounds.height * 1.2)
    }

    UIView.animateWithDuration(1.0) {
        sender.bounds = CGRectMake(0, orgin, sender.bounds.width, sender.bounds.height * 0.4)
    }
}

Answer 1

您应该能够在使用变换后获得您想要的效果。

我会做以下事情：

从身份转换开始。将变换的原点向下移动到图像的底部。根据需要增加变换的 scale.y。将变换的原点移回图像的中心

将该变换应用于动画中的按钮。然后将其动画化回恒等变换。

如果您不移动变换而只缩放它，它将从中心向各个方向生长。（或者如果你只增加 scale.y 则只上下）

编辑：

代码可能如下所示：

let halfHeight = button.bounds.height / 2

//Make the center of the grow animation be the bottom center of the button
var transform = CGAffineTransformMakeTranslation(0, -halfHeight)

//Animate the button to 120% of it's normal height.
tranform = CGAffineTransformScale( transform, 1.0, 1.2)
tranform = CGAffineTransformTranslate( transform, 0, halfHeight)
UIView.animateWithDuration(0.5)
{
  button.transform = transform
}

以上代码将按钮设置为 120% 高度的动画，并保留在那里。

您可以使用 animateWithDuration 的较长变体之一，该变体带有使动画自动反转的选项。我把它留给你作为练习。

编辑#2：

我编写了一些代码来制作一个三步动画：

func animateButton(step: Int)
{
  let localStep = step - 1
  
  let halfHeight = aButton.bounds.height / 2
  
  var transform: CGAffineTransform
  switch step
  {
  case 2:
    //Make the center of the grow animation be the bottom center of the button
    transform = CGAffineTransformMakeTranslation(0, -halfHeight)
    
    //Animate the button to 120% of it's normal height.
    transform = CGAffineTransformScale( transform, 1.0, 1.2)
    transform = CGAffineTransformTranslate( transform, 0, halfHeight)
    UIView.animateWithDuration(0.5, animations:
      {
        aButton.transform = transform
      },
      completion:
      {
        (finshed) in
        animateButton(step)
    })
  case 1:
    //In the second step, shrink the height down to .25 of normal
    transform = CGAffineTransformMakeTranslation(0, -halfHeight)
    
    //Animate the button to 120% of it's normal height.
    transform = CGAffineTransformScale( transform, 1.0, 0.25)
    transform = CGAffineTransformTranslate( transform, 0, halfHeight)
    UIView.animateWithDuration(0.5, animations:
      {
        aButton.transform = transform
      },
      completion:
      {
        (finshed) in
        animateButton(step)
    })
  case 0:
    //in the final step, animate the button back to full height.
    UIView.animateWithDuration(0.5)
      {
        aButton.transform = CGAffineTransformIdentity
      }
  default:
    break
  }
}

你可以用

调用它

animateButton(3)

使用枚举作为步数会更简洁，它可以使用一些范围检查来确保输入值是 3、2 或 1，但你明白了...

如何在不移动按钮的情况下增加 UIButton 图像的高度

How to increase height of UIButton image without moving button

uibutton

uiview

swift

编辑：

编辑#2：