How to make a bounce effect for a button

Question

I'm trying to make a bounce effect for a button in view will appear. I want my button to do something like this

How to create a UIView bounce animation?

I'm doing this with this code but it isn't fluid...

UIView.animateWithDuration(0.5, delay: 0.0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: [], animations: ({
        self.image.center.y = self.view.frame.height / 4
    }), completion: nil)
    UIView.animateWithDuration(0.7, delay: 0.2, usingSpringWithDamping: 1, initialSpringVelocity: 0.8, options: [], animations: ({
        self.image.center.y = self.view.frame.height / 6
    }), completion: nil)
    UIView.animateWithDuration(0.9, delay: 0.4, usingSpringWithDamping: 1, initialSpringVelocity: 0.6, options: [], animations: ({
        self.image.center.y = self.view.frame.height / 4
    }), completion: nil)
    UIView.animateWithDuration(1, delay: 0.6, usingSpringWithDamping: 1, initialSpringVelocity: 0.4, options: [], animations: ({
        self.image.center.y = self.view.frame.height / 5.5
    }), completion: nil)
    UIView.animateWithDuration(1.05, delay: 0.8, usingSpringWithDamping: 1, initialSpringVelocity: 0.2, options: [], animations: ({
        self.image.center.y = self.view.frame.height / 4
    }), completion: nil)

you could use the method of class UIView "+animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:" — WhiteTiger, Mar 05 '16 at 12:56
There are lots of ways you could do this. The answer from @memmons in the thread you posted shows an excellent way to do this using UIKit Dynamics, but you don't use it. Why not try that? Alternately you could use UIView keyframe animation (with the method `animateKeyframesWithDuration:delay:options:animations:completion:` and/or `animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:`. The UIKit Dynamics approach shown by memmons seems like the best fit for the effect that you're after, and he provides working code showing you how to use it. — Duncan C, Mar 05 '16 at 13:07
Why do you not use the code in the SO link you provided? It seems to work nicely. You could do the same thing with your button. — Pranav Wadhwa, Mar 05 '16 at 15:49
I m new to swift...I don't know how to covert it into swift...can you help me please? :/ — Marco Castano, Mar 05 '16 at 15:52

score 0 · Answer 1 · answered Mar 05 '16 at 12:34

Instead of nesting all the animations inside the first animation block, put each consecutive animation in the completion handler of the one before it.

Although i would recommend using Core Animation for something like this as opposed to the UIView animateWithDuration method.

score 0 · Answer 2 · answered Aug 29 '18 at 04:56

you can use the below class for easy use

class BounceButton: UIButton {

    @IBInspectable var baseColor: String = "2"{
        didSet {
            //layer.borderColor = borderColor.CGColor
            if baseColor == "1" {
                self.backgroundColor = UIColor.MiTheme.BtnColorPrimary
                self.setTitleColor(UIColor.white, for: .normal)
                self.titleLabel?.font = UIFont.boldSystemFont(ofSize: 17)
            }
            else if baseColor == "2" {
                self.backgroundColor = UIColor.MiTheme.BtnColorSecond
                self.setTitleColor(UIColor.black, for: .normal)
            }
            else if baseColor == "3" {
                self.backgroundColor = UIColor.black
                self.setTitleColor(UIColor.white, for: .normal)
                self.titleLabel?.font = UIFont.boldSystemFont(ofSize: 17)
            }
            else if baseColor == "4" {                
            }
        }
    }


    override init(frame: CGRect) {
        super.init(frame: frame)

        //self.layer.cornerRadius = 28.5

    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        //self.layer.cornerRadius = 28.5

    }

    // Add some animations on button click
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)

        // Scale up the button
        self.transform = CGAffineTransform(scaleX: 1.1, y: 1.1)

        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 6, options: .allowUserInteraction, animations: {
            // Reset the sizes to defaults
            self.transform = CGAffineTransform.identity
        }, completion: nil)
    }
}

How to make a bounce effect for a button

2 Answers2