Adding glow effect to UIButton - iOS
Swift 5
Create UIView extension with the animation
Use it on textfields, buttons, views (any subclass of UIView)
Note: you may change values and play around to get the effect you need.
UIView extension
import UIKit
extension UIView {
enum GlowEffect: Float {
case small = 0.4, normal = 2, big = 15
}
func doGlowAnimation(withColor color: UIColor, withEffect effect: GlowEffect = .normal) {
layer.masksToBounds = false
layer.shadowColor = color.cgColor
layer.shadowRadius = .zero
layer.shadowOpacity = 1
layer.shadowOffset = .zero
let glowAnimation = CABasicAnimation(keyPath: "shadowRadius")
glowAnimation.fromValue = Int.zero
glowAnimation.toValue = effect.rawValue
glowAnimation.beginTime = CACurrentMediaTime()+0.3
glowAnimation.duration = CFTimeInterval(0.3)
glowAnimation.fillMode = .removed
glowAnimation.autoreverses = true
glowAnimation.isRemovedOnCompletion = true
layer.add(glowAnimation, forKey: "shadowGlowingAnimation")
}
}
How to use it:
//TextField with border
textField.doGlowAnimation(withColor: UIColor.red, withEffect: .big)
//Label
label.doGlowAnimation(withColor: label.textColor, withEffect: .small)
//Button
button.doGlowAnimation(withColor: UIColor.red, withEffect: .big)
I like this glow + grow/shrink animation for my 'extra special' buttons:
-(void)makeViewShine:(UIView*) view
{
view.layer.shadowColor = [UIColor yellowColor].CGColor;
view.layer.shadowRadius = 10.0f;
view.layer.shadowOpacity = 1.0f;
view.layer.shadowOffset = CGSizeZero;
[UIView animateWithDuration:0.7f delay:0 options:UIViewAnimationOptionAutoreverse | UIViewAnimationCurveEaseInOut | UIViewAnimationOptionRepeat | UIViewAnimationOptionAllowUserInteraction animations:^{
[UIView setAnimationRepeatCount:15];
view.transform = CGAffineTransformMakeScale(1.2f, 1.2f);
} completion:^(BOOL finished) {
view.layer.shadowRadius = 0.0f;
view.transform = CGAffineTransformMakeScale(1.0f, 1.0f);
}];
}
I suggest you use the Glow Category of UIView made by secret lab.
Example is available here
Glowing code taken from: Creating a Glow Effect for UILabel and UIButton
First, you'll need to import the QuartzCore Framework:
#import <QuartzCore/QuartzCore.h>
When you create a button (or in viewDidLoad
, depends on your code structure) add
this code:
UIColor *color = button.currentTitleColor;
button.titleLabel.layer.shadowColor = [color CGColor];
button.titleLabel.layer.shadowRadius = 4.0f;
button.titleLabel.layer.shadowOpacity = .9;
button.titleLabel.layer.shadowOffset = CGSizeZero;
button.titleLabel.layer.masksToBounds = NO;
You'll need to watch for two events: UIControlEventTouchDown
and UIControlEventTouchUpInside
In UIControlEventTouchDown
handler you'll add the code:
UIColor *color = [UIColor clearColor];
button.titleLabel.layer.shadowColor = [color CGColor];
And in UIControlEventUpInside
handler you'll add the code:
UIColor *color = button.currentTitleColor;
button.titleLabel.layer.shadowColor = [color CGColor];
Again details of implementation depend on whether you create button programmaticaly or via Interface Builder but i'm sure you'll be able to figure this out from here on.
EDIT: for a custom button simply adding the following code should work:
[button setImage:[UIImage imageNamed:@"buttonWithGlow.png"]
forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"buttonWithNoGlow.png"]
forState:UIControlStateHighlighted];