当点击UIButton时，你如何使它变得更大，然后使用Swift 3回到之前/正常大小？

Question

This is my current code:

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

Along with adding to the score, how do I make the button get bigger and then go back to regular size using Swift 3?

Answer 1

If you don't have one already, create an outlet for your button so you can access it:

@IBOutlet weak var button: UIButton!

Here is a basic animation that will increase the button to twice its original size, and then put it back again. Put this code in your buttonTap function.

Note I set the background color to white, then dark gray, then white again, so that is easier to see what is happening. This is not necessary. You can adjust the speed and effects to suit your needs.

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
    })    
}

EDIT: @Tim suggests a better way to sequence animations using animateKeyframes . Here is how you would do that, replacing the call to UIView.animate (the effect is the same):

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)

Answer 2

If you just want to make your button bigger and then to normal stage, when it is tapped, it would be relatively less complex and easy using CGAffineTransform. It can be used to rotate, scale and translate UIView objects. Every UIView subclass have transform property which can be used to scale, rotate or translate its position. This is known as affine 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
            })
        }
}

When the button is clicked it gets 2 times bigger than its size. And returns back to normal position for second time click.