IPhone Text Glow Effect

Question

In my IPhone application, I want the text in UILabel to glow for a second, then fade for a sec;. Also i want to repeat this cycle for say 3 or 4 times.

Is this poss

Answer 1

There are many ways to do this, with varying quality. One way would be to subclass UILabel, and implement some kind of gradient effect in coregraphics in the drawRect method.

You can also play with the text shadow (change the colour and alpha) and see if you can come up with a decent glow.

The easiest way is probably to make a transparent glow-outline image in photoshop and place it behind your text, and then do like mahboudz suggests... fade the image in and out using coreanimation.

Answer 2

I've posted some sample code which subclasses UILabel and enables you to apply glow and soft shadows to text.

http://www.redrobotstudios.com/blog/2010/04/29/create-glow-soft-shadow-text-on-iphone/

Answer 3

Yes. Use beginAnimation...commitAnimation, and use the alpha value to brighten or dim the ULabel. Make sure that the default value of the UILabel's alpha starts at 0.85 and brightens to 1.0 and then dims to 0.75, and when all is done, you go back to 0.85.

There are other ways to do it such as having another view on top of the label that is gray or black and you use the same begin...commitAnimation to change the alpha on that from 0 to 0.20 or so.

Answer 4

As of 3.2 you there is direct support for shadows in the SDK.

label.layer.shadowColor = [label.textColor CGColor];
label.layer.shadowOffset = CGSizeMake(0.0, 0.0);

Play with the parameters:

label.layer.shadowRadius = 3.0;
label.layer.shadowOpacity = 0.5;

And to avoid shadow being clipped by the label bouds:

label.layer.masksToBounds = NO;

Don't forget to

#include <Quartzcore/Quartzcore.h>

and link against the QuartzCore or CoreGraphics frameworks (thanks to commenters for pointing this out).

Answer 5

- (UILabel *) setUpGlowLabelWithFrame: (CGRect) frame fontSize: (int)fontSize {
        UILabel* label = [[UILabel alloc] initWithFrame:frame];
        label.backgroundColor = [UIColor clearColor];
        label.font = [UIFont boldSystemFontOfSize:fontSize];
        label.textColor = [UIColor whiteColor];
        label.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;
        label.textAlignment = UITextAlignmentCenter;
        label.layer.shadowColor = [label.textColor CGColor];
        label.layer.shadowOffset = CGSizeMake(0.0, 0.0);
        label.layer.masksToBounds = NO;

    label.layer.shadowRadius = 0.5f;
    label.layer.shadowOpacity = 0.95;
    label.numberOfLines = 2;
    label.tag = 20;

    return label;
}

I get the glow effect when using this.

Hope it helps.

Happy coding :)

Answer 6

For those of you using Swift 4, here's what I used for multiple objects to Glow the same color as they are:

let colorRed: UIColor? = timeLabel.textColor
timeLabel.layer.shadowColor = colorRed?.cgColor
timeLabel.layer.shadowRadius = 4.0
timeLabel.layer.shadowOpacity = 0.9
timeLabel.layer.shadowOffset = CGSize.zero
timeLabel.layer.masksToBounds = false

As for animating the glow, just add a timer for 3-4 loops and change .shadowOpacity to something lower.