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 possible?

Sidman

nice question. I want to do the exact thing. – Stallfeed

You should accept @andrewgleave's answer, as it worked great! – Belemnite

Answer 1

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).

Vortumnus

You need to import <Quartzcore/Quartzcore.h> – Unintelligent

have Quartzcore and compiled successfully, but don't see any effect at all? – Resendez

You have to link QuartzCore.framework or CoreGraphics.framework (the latter contains the former). Again, thanks, I'm updating the answer – Vortumnus

I was able to see the glow after changing the shadow radius from 20.0 to a smaller number 1-5, it's much harder to see that this code works unless making that change. Not to say that a shadow radius of 20 isn't a good choice, but it's just very very faint. – Polemoniaceous

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/

Bandage

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.

Landlocked

He is answering the animation part alone, so this answer is ok. – Kilan

Answer 4

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.

Overdraft

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 :)

Coggins

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.

Majolica