Animate UIButton state change
IphoneObjective CUibuttonIphone Problem Overview
I'm using a UIButton with images for normal and highlighted states. They work as expected but I want to have some fading/merging transition and not just a sudden swap.
How can I do that?
Iphone Solutions
Solution 1 - Iphone
This can be done using transition animation of a UIView. It does not matter the isHighlighted
property is not animatable, because it transitions the whole view.
Swift 3
UIView.transition(with: button,
duration: 4.0,
options: .transitionCrossDissolve,
animations: { button.isHighlighted = true },
completion: nil)
Objective-C
[UIView transitionWithView:button
duration:4.0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{ button.highlighted = YES; }
completion:nil];
Solution 2 - Iphone
To accomplish that I extended UIButton. added a new property called hilightedImage with the following code:
- (void)setHilightImage:(UIImageView *)_hilightImage
{
if (hilightImage != _hilightImage) {
[hilightImage release];
hilightImage = [_hilightImage retain];
}
[hilightImage setAlpha:0];
[self addSubview:hilightImage];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.14];
if(hilightImage){
[hilightImage setAlpha:1];
}
[UIView commitAnimations];
[super touchesBegan:touches withEvent:event];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
self.highlighted = FALSE;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.14];
if(hilightImage){
[hilightImage setAlpha:0];
}
[UIView commitAnimations];
[super touchesEnded:touches withEvent:event];
}
Solution 3 - Iphone
UIButton
inherits from UIView
So then you get its view and call beginAnimations:context:
Then all the appropriate setAnimation methods from there.
The following properties of the UIView
class are animatable:
- @property frame
- @property bounds
- @property center
- @property transform
- @property alpha
- @property backgroundColor
- @property contentStretch
Solution 4 - Iphone
Here is a self contained solution that also supports a boolean animated
flag.
- (void)setEnabled:(BOOL)enabled animated:(BOOL)animated
{
if (_button.enabled == enabled) {
return;
}
void (^transitionBlock)(void) = ^void(void) {
_button.enabled = enabled;
};
if (animated) {
[UIView transitionWithView:_button
duration:0.15
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
transitionBlock();
}
completion:nil];
} else {
transitionBlock();
}
}
Solution 5 - Iphone
@marián-Černý answer in Swift:
Swift 2
UIView.transitionWithView(button,
duration: 4.0,
options: .TransitionCrossDissolve,
animations: { button.highlighted = true },
completion: nil)
Swift 3, 4, 5
UIView.transition(with: button,
duration: 4.0,
options: .transitionCrossDissolve,
animations: { button.isHighlighted = true },
completion: nil)
Solution 6 - Iphone
using CustomButton instead of UIButton
and overriding isHighlighted
property worked for me;
class KeypadButton: UIButton {
var highlightDuration: TimeInterval = 0.25
override var isHighlighted: Bool {
didSet {
if oldValue == false && isHighlighted {
highlight()
} else if oldValue == true && !isHighlighted {
unHighlight()
}
}
}
func highlight() {
animateBackground(to: highlightedBackgroundColor, duration: highlightDuration)
}
func unHighlight() {
animateBackground(to: normalBackgroundColor, duration: highlightDuration)
}
private func animateBackground(to color: UIColor?, duration: TimeInterval) {
guard let color = color else { return }
UIView.animate(withDuration: highlightDuration) {
self.backgroundColor = color
}
}
}