当一个 UIButton 被点击时，你如何让它变大，然后使用 Swift 3 回到以前/正常的大小？

Posted 2023-03-15

【中文标题】当一个 UIButton 被点击时，你如何让它变大，然后使用 Swift 3 回到以前/正常的大小？

【英文标题】：When a UIButton is tapped, how do you made it get bigger, then go back to the previous/normal size using Swift 3?

【发布时间】：2017-02-18 00:37:32

【问题描述】：

这是我当前的代码：

@IBAction func buttonTap(_ sender: Any) 
    if time >= 0 && gameStarted == true 
        score = score + 1
    

除了增加分数，我如何使用 Swift 3 让按钮变大然后恢复到正常大小？

【问题讨论】：

你的意思是你想要一个动画？这在业界被称为反弹。您是说单击按钮时想要“弹跳”吗？

反弹是我所需要的。

【参考方案1】：

如果您还没有，请为您的按钮创建一个插座，以便您可以访问它：

@IBOutlet weak var button: UIButton!

这是一个基本动画，它将按钮增加到原来大小的两倍，然后再放回去。将此代码放入您的 buttonTap 函数中。

注意，我将背景颜色设置为白色，然后是深灰色，然后又是白色，这样更容易看到发生了什么。这不是必需的。您可以根据需要调整速度和效果。

self.button.backgroundColor = UIColor.white

// save the original size and location of the button so we can restore it later    
let originalFrame = self.button.frame

// save the background color, too
let originalBackgroundColor = self.button.backgroundColor

UIView.animate(withDuration: 1.0, delay: 0, options: UIViewAnimationOptions.curveEaseInOut, animations: 

    // make the button grow to twice its original size
    self.button.frame.size.height = self.button.frame.size.height * 2
    self.button.frame.size.width = self.button.frame.size.width * 2

    // adjust the button's x,y coordinates so it appears to stay in place
    self.button.frame.origin.x = self.button.frame.origin.x - (self.button.frame.size.width / 4)
    self.button.frame.origin.y = self.button.frame.origin.y - (self.button.frame.size.height / 4)

    // change the background color so it's easier to see what's happening - not required
    self.button.backgroundColor = UIColor.darkGray

)  (finished: Bool) in
    // after the previous animation finishes, restore the button to its original state
    UIView.animate(withDuration: 1.0, animations: 
        self.button.frame = originalFrame
        self.button.backgroundColor = originalBackgroundColor
    )    

编辑：@Tim 建议使用animateKeyframes 对动画进行排序的更好方法。以下是您的操作方法，将调用替换为UIView.animate（效果相同）：

UIView.animateKeyframes(withDuration: 2.0, delay: 0, options: UIViewKeyframeAnimationOptions.calculationModeLinear, animations: 

    // make the button grow and become dark gray
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5) 
        self.button.frame.size.height = self.button.frame.size.height * 2
        self.button.frame.size.width = self.button.frame.size.width * 2

        self.button.frame.origin.x = self.button.frame.origin.x - (self.button.frame.size.width / 4)
        self.button.frame.origin.y = self.button.frame.origin.y - (self.button.frame.size.height / 4)

        self.button.backgroundColor = UIColor.darkGray
    

    // restore the button to original size and color
    UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) 
        self.button.frame = originalFrame
        self.button.backgroundColor = originalBackgroundColor
    
, completion: nil)

【讨论】：

请记住，如果您在动画中需要两个以上的点（即不仅仅是增长和缩小），您可以使用UIView.animateKeyframes(withDuration:delay:options:animations:completion: 更清楚地定义动画的“步骤”。

@Tim 谢谢你。

注意 - 现在您应该在自动布局中为约束设置动画。 （这非常容易）在这种情况下，它非常简单——你有一个高度限制，有一个出口到那个限制。只是动画它。 （你也有一个比率约束，不需要做任何事情）

@JoeBlow 如果你想提供代码示例，我会投赞成票。

嘿@MikeTaverne 老实说，我只是懒得打扰 :) 我用谷歌搜索了这个 '***.com animate a constraint swift' 并找到了 100 个示例，它是一个很常见的问题。干杯！

【参考方案2】：

如果你只是想让你的按钮变大然后进入正常阶段，当它被点击时，使用 CGAffineTransform 会相对不那么复杂和容易。它可用于旋转、缩放和平移 UIView 对象。每个 UIView 子类都有 transform 属性，可用于缩放、旋转或平移其位置。这称为仿射变换。

@IBAction func buttonTap(_ sender: Any) 
    if self.button.transform == CGAffineTransform.identity 
            UIView.animate(withDuration: 1, animations: 
                  self.bottom.transform = CGAffineTransform(scaleX: 2, y: 2)
            )  (true) in
                UIView.animate(withDuration: 0.5, animations: 

                )
            
         else 
            UIView.animate(withDuration: 1, animations: 
                self.button.transform = .identity
            )
        

当按钮被点击时，它会比它的大小大 2 倍。第二次点击返回正常位置。