UI Animation using animateKeyframes does nothing to Button Title Color

Question

I'm trying to animate the color of my UIButton Title Color using animateKeyframes but it does nothing except load the last state in the animation, in this case purpleText. I'm using the same code to animate button colors and a UIView background color without any issues.

I checked also changed the button to a custom button in Interface Builder but that didn't help either.

        UIView.animateKeyframes(withDuration: 12, delay: 12, options: [.allowUserInteraction, .repeat, .autoreverse], animations: {
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25, animations: {
                self.infoButton.setTitleColor(blueText, for: UIControlState.normal)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.2, relativeDuration: 0.25, animations: {
                self.infoButton.setTitleColor(greenText, for: UIControlState.normal)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.4, relativeDuration: 0.25, animations: {
                self.infoButton.setTitleColor(yellowText, for: UIControlState.normal)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.6, relativeDuration: 0.25, animations: {
                self.infoButton.setTitleColor(redText, for: UIControlState.normal)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.8, relativeDuration: 0.25, animations: {
                self.infoButton.setTitleColor(purpleText, for: UIControlState.normal)
            })
        }, completion: nil)

aheze · Accepted Answer · 2021-04-29T19:18:31.297

Calling setTitleColor() inside the animation block doesn't work because UIView.animate only works on animatable properties, like infoButton.backgroundColor.

Unfortunately, button properties like tintColor aren't animatable. You also shouldn't directly access the button's titleLabel, which is nil for system buttons.

Instead, you can use UIView.transition with setTitleColor(). You can then put it inside a Timer... I usually don't like to use timers for animations, but I can't think of any other way.

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    let colors: [UIColor] = [.blue, .green, .yellow, .red, .purple]
    var currentIndex = 0
    
    _ = Timer.scheduledTimer(withTimeInterval: 0.5, repeats: true) { timer in
        if colors.indices.contains(currentIndex) {
            UIView.transition(with: self.infoButton, duration: 0.5, options: [.transitionCrossDissolve, .allowUserInteraction]) {
                self.infoButton.setTitleColor(colors[currentIndex], for: .normal)
            }
            currentIndex += 1
        } else {
            currentIndex = 0
        }
    }
}

Result:

Alternative to `Timer` is to create a function for the animation and then call it with `perform(_:with:afterDelay:)`. For example: `self.perform(#selector(self.myAnimationFunction), with: nil, afterDelay: 0.5)` https://developer.apple.com/documentation/objectivec/nsobject/1416176-perform — user4806509, Jun 23 '23 at 20:24

UI Animation using animateKeyframes does nothing to Button Title Color

1 Answers1

Linked