Adding glow effect to UIButton - iOS

Question

I have an UIButton which is a logo. This logo button will glow on forever but will stop glowing on touch.It is like a glowing animation.

Is there any suggestions?

  Undefined symbols for architecture i386:
 "_OBJC_CLASS_$_CABasicAnimation", referenced from:
 objc-class-ref in UIView+Glow.o
 "_OBJC_CLASS_$_CAMediaTimingFunction", referenced from:
  objc-class-ref in UIView+Glow.o
  "_kCAMediaTimingFunctionEaseInEaseOut", referenced from:
  -[UIView(Glow) startGlowing] in UIView+Glow.o
   ld: symbol(s) not found for architecture i386
   clang: error: linker command failed with exit code 1 (use -v to see invocation)

Are you talking about buton with a label (text) or custom graphics button? — Rok Jarc, Jul 19 '12 at 09:06
Whoops, i wrote the answer below for the button with label. You could try similiar (using button.imageView.layer) - you'd have to tweak the shadow color a bit. Or simply use two images (one with a glow and one without) for more custom effect. — Rok Jarc, Jul 19 '12 at 09:26

score 26 · Answer 1 · answered Mar 16 '13 at 22:42

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);
}];

}

score 20 · Accepted Answer · answered Jul 19 '12 at 12:34

20

I suggest you use the Glow Category of UIView made by secret lab.

Example is available here

answered Jul 19 '12 at 12:34

apouche

9,703
6
40
45

1

Hey, I wanted to use this but am not able to. Can you please provide with some example as to how to use it. Thanks in advance – anky_believeMe Aug 06 '14 at 06:36
I used the Glow category in a project before and it works very well. It's also easily customizable to your needs if you want to make it more elaborate. – jcpennypincher Jan 19 '18 at 00:46
1

Where can I find example to use it? – Arjun Oct 17 '19 at 08:13

alegelos · Answer 3 · 2022-07-20T18:16:01.070

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)

Add the property glowAnimation.repeatCount = .infinity Remove glowAnimation.isRemovedOnCompletion = true You can play with the properties to get the result you want. — alegelos, Oct 17 '19 at 08:45
I would add a parameter on the func doGlowAnimation(... forever: Bool = false) and do the logic inside. — alegelos, Oct 17 '19 at 09:09

score 9 · Answer 4 · edited Sep 08 '13 at 08:11

9

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];

edited Sep 08 '13 at 08:11

Ilya Ilin

2,283
21
27

answered Jul 19 '12 at 09:12

Rok Jarc

18,765
9
69
124

this works for normal buttons i guess. any suggestions for custom buttons with images? – Siddharthan Asokan Jul 19 '12 at 09:23
There are two ways (described in the commend below your question). In each case you'll have to monitor the `UIControlEventDownInside` and `UIControlEventTouchUpInside` events. – Rok Jarc Jul 19 '12 at 09:28
it doesn't glow on touch but non stop. thats the problem – Siddharthan Asokan Jul 19 '12 at 09:29
If i understand you correctly you want to add glow at the creation time, remove it when the button is pressed (`UIControlEventTouchDownInside`) and add it again when it is released (`UIControlEventTouchUpInside`)? – Rok Jarc Jul 19 '12 at 09:31
nope. its like a button that glows on and off no matter whether u press it or not. – Siddharthan Asokan Jul 19 '12 at 09:47
@Sidd: Why not just turn the function around? Add "glowcode" on touchDown and remove it on touchUpInside? ;) – Git.Coach Jul 19 '12 at 11:51

score 4 · Answer 5 · answered Mar 24 '16 at 03:01

Here is my answer....

Using categories

/* ****FAQ?

 1.how to add glow effect on uibutton?
 [UIButton glowUIButton:playButton];

 2.how to remove effect on uibutton?
 [UIButton removeGlowUIButton:playButton];

 Ends*** */

#import <UIKit/UIKit.h>
@interface UIButton (BlinkEffect)
//blink effect category
+( void) glowUIButton:(UIButton *)inputButton;
//remove blink effect
+(void) removeGlowUIButton:(UIButton *)inputButton;
@end

#import "UIButton+BlinkEffect.h"

@implementation UIButton (BlinkEffect)

+(void) glowUIButton:(UIButton *)inputButton
{
    //add blink effect
    CALayer *viewLayer = inputButton.layer;
    viewLayer.shadowOffset = CGSizeMake(0,0);
    CGFloat radius = CGRectGetWidth(inputButton.bounds)/2.0;
    viewLayer.shadowColor = [[UIColor whiteColor] CGColor];
    viewLayer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(-7,-5.5, 2.5 * (radius), 2.5 * radius) cornerRadius:radius].CGPath;
    viewLayer.shadowRadius = 5.0f;
    viewLayer.shadowOpacity = 1.0f;

    //Let's animate it while we're at it.
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"shadowOpacity"];
    animation.duration =0.7;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.fromValue = [NSNumber numberWithFloat:1.0];
    animation.toValue = [NSNumber numberWithFloat:0.0];
    animation.autoreverses = YES;
    animation.repeatCount = 1.0 / 0.0;
    [viewLayer addAnimation:animation forKey:@"shadowOpacity"];

}

+(void)removeGlowUIButton:(UIButton *)inputButton
{
    CALayer *viewLayer = inputButton.layer;
    viewLayer.shadowColor = [[UIColor clearColor] CGColor];
    [viewLayer removeAnimationForKey:@"shadowOpacity"];
}
@end

score 0 · Answer 6 · answered Jun 26 '20 at 08:55

Swift 5

alegelos answer with shadowOpacity, autorepeat and shadowOffset:

extension UIView {

  enum GlowEffect: Float {
    case small = 0.4, normal = 5, big = 15
  }
  
  func doGlowAnimation(withColor color: UIColor, withEffect effect: GlowEffect = .normal) {
    layer.masksToBounds = false
    layer.shadowColor = color.cgColor
    layer.shadowRadius = 0
    layer.shadowOpacity = 1
    layer.shadowOffset = CGSize(width: 0, height: 3)
    
    let glowAnimationRadius = CABasicAnimation(keyPath: "shadowRadius")
    glowAnimationRadius.fromValue = 0
    glowAnimationRadius.toValue = effect.rawValue
    glowAnimationRadius.beginTime = CACurrentMediaTime()+0.3
    glowAnimationRadius.duration = CFTimeInterval(1.3)
    glowAnimationRadius.fillMode = .removed
    glowAnimationRadius.autoreverses = true
    glowAnimationRadius.repeatCount = .infinity
    layer.add(glowAnimationRadius, forKey: "shadowGlowingAnimationRadius")
    
    let glowAnimationOpacity = CABasicAnimation(keyPath: "shadowOpacity")
    glowAnimationOpacity.fromValue = 0
    glowAnimationOpacity.toValue = 1
    glowAnimationOpacity.beginTime = CACurrentMediaTime()+0.3
    glowAnimationOpacity.duration = CFTimeInterval(1.3)
    glowAnimationOpacity.fillMode = .removed
    glowAnimationOpacity.autoreverses = true
    glowAnimationOpacity.repeatCount = .infinity
    layer.add(glowAnimationOpacity, forKey: "shadowGlowingAnimationOpacity")
  }
}

Adding glow effect to UIButton - iOS

6 Answers6

Linked