CODEWITHSUNDEEP
swiftanimationuibuttonborder
Alexis
Alexis

Reputation: 521

Swift, ios 10 UIButton Border

I was developing in Swift 3 and I had a little problem with a UIButton. I will try to explain my problem. First I created my UIButton:

let Button: UIButton = {
    let button = UIButton(type: .system)
    button.setBackgroundImage(UIImage(named: "button"), for: .normal)        
    button.layer.borderWidth = 2
    button.layer.borderColor = UIColor(red: 0, green: 0, blue: 80/255, alpha: 1).cgColor
    button.layer.cornerRadius = 10
    //button.translatesAutoresizingMaskIntoConstraints = false
    return button
}()

After in the viewDidLoad I implemented the action:

  button.addTarget(self, action: #selector(buttonUnpressed), for: .touchUpInside)

In which "favButtonPressed" is a function with no importance The problem is when I touch the button the border doesn't get unhighlighted as the image or the text does. It is a detail of little importance but quite annoying.

I have tried changing the alpha value when pressed and re-change it but the problem is i dont know how to animate it to make the animation for 2 seconds (the next line of code doesnt work, it does change the color but not during 2 seconds):

func buttonUnpressed(){
    UIButton.animate(withDuration: 2, animations: {
        self.button.layer.borderColor = UIColor(red: 0, green: 0, blue: 80/255, alpha: 1).cgColor
    })
}

The question; is there any way of adding the border to the UIButton "total behavior" of highlighting and unhighlighting when pressed?

Excuse me for my english if there are some expression or gramatical faults.

EDIT I tried with this function:

 func buttonUnpressed(){
    button.alpha = 0.2
    UIButton.animate(withDuration: 1) {
        self.button.alpha = 1
    }
    button.layer.borderColor = UIColor(red: 0, green: 0, blue: 80/255, alpha: 1).cgColor
}

there is a weird highlight of the image but now it works more or less.

Upvotes: 2

Views: 1324

Answers (2)

Alexis
Alexis

Reputation: 521

I did find the final answer. Thanks to krotov who tried to help!

 class BorderButton: UIButton {

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

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

var colorPast: Bool = true

override var isHighlighted: Bool {
    didSet {
        if isHighlighted && colorPast {
            borderDissapear(highlighted: isHighlighted)
            colorPast = false
        } else if !isHighlighted && !colorPast {
            borderDissapear(highlighted: isHighlighted)
            colorPast = true
        }
    }
}

func borderDissapear (highlighted: Bool) {
    let animation = CABasicAnimation(keyPath: "borderColor")
    animation.duration = 0.1
    animation.autoreverses = false
    animation.repeatCount = 1
    animation.fillMode = kCAFillModeForwards
    animation.isRemovedOnCompletion = false
    if highlighted {
        animation.fromValue = self.layer.borderColor?.copy(alpha: 1)
        animation.toValue = self.layer.borderColor?.copy(alpha: 0.3)
    } else if !highlighted {
        animation.fromValue = self.layer.borderColor?.copy(alpha: 0.3)
        animation.toValue = self.layer.borderColor?.copy(alpha: 1)
    }
    self.layer.add(animation, forKey: "borderColor")
}
}

Upvotes: 1

Vladimirs Matusevics
Vladimirs Matusevics

Reputation: 1152

You can use this extension to animate change of border color: 

extension UIButton {
    func borderColorAnimation(from: CGColor, to: CGColor, duration: CFTimeInterval) {
        let animation = CABasicAnimation(keyPath: "borderColor")
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        animation.fromValue = from
        animation.toValue = to
        animation.duration = duration
        self.layer.add(animation, forKey: "borderColor")
        self.layer.borderColor = to
    }
}

Like this:

let fromColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor
let toColor = UIColor(red: 255, green: 0, blue: 0, alpha: 1).cgColor
self.button.borderColorAnimation(from: fromColor, to: toColor, duration: 200)

Upvotes: 2

Related Questions