Blinking effect on UILabel

Question

I have a UILabel with background color as grey.

I want a blinking effect on this label like it should become a little white & then become gray and it should keep happen till I turn it off programatically.

Any clue how to achieve this?

Solution 1

Use NSTimer

NSTimer *timer = [NSTimer 
                      scheduledTimerWithTimeInterval:(NSTimeInterval)(1.0)
                            target:self 
                             selector:@selector(blink) 
                             userInfo:nil 
                             repeats:TRUE];
BOOL blinkStatus = NO;

in your blink function

-(void)blink{
   if(blinkStatus == NO){
      yourLabel.backgroundColor = [UIColor whiteColor];
     blinkStatus = YES;
   }else {
      yourLabel.backgroundColor = [UIColor grayColor];
      blinkStatus = NO;
   }
}

Solution 2

You can do this within a block:

self.yourLabel.alpha = 1;
[UIView animateWithDuration:1.5 delay:0.5 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse animations:^{
        self.yourLabel.alpha = 0;
} completion:nil];

So you dont need a second method.

Solution 3

Swift 3

extension UILabel {

    func startBlink() {
        UIView.animate(withDuration: 0.8,
              delay:0.0,
              options:[.allowUserInteraction, .curveEaseInOut, .autoreverse, .repeat],
              animations: { self.alpha = 0 }, 
              completion: nil)
    }

    func stopBlink() {
        layer.removeAllAnimations()
        alpha = 1
    }
}

Solution 4

You can simply make an extension to the UILabel class that will support the blinking effect. I don't think using a timer is a right approach since you won't have any fade effect.

Here is the Swift way to do this:

extension UILabel {
    func blink() {
        self.alpha = 0.0;
        UIView.animateWithDuration(0.8, //Time duration you want,
                            delay: 0.0,
                          options: [.CurveEaseInOut, .Autoreverse, .Repeat],
                       animations: { [weak self] in self?.alpha = 1.0 },
                       completion: { [weak self] _ in self?.alpha = 0.0 })
    }
}

Swift 3:

extension UILabel {
    func blink() {
        self.alpha = 0.0;
        UIView.animate(withDuration: 0.8, //Time duration you want,
            delay: 0.0,
            options: [.curveEaseInOut, .autoreverse, .repeat],
            animations: { [weak self] in self?.alpha = 1.0 },
            completion: { [weak self] _ in self?.alpha = 0.0 })
    }
}

EDIT Swift 3: Works for almost any view

extension UIView {
    func blink() {
        self.alpha = 0.0;
        UIView.animate(withDuration: 0.8, //Time duration you want,
            delay: 0.0,
            options: [.curveEaseInOut, .autoreverse, .repeat],
            animations: { [weak self] in self?.alpha = 1.0 },
            completion: { [weak self] _ in self?.alpha = 0.0 })
    }
}

Solution 5

A different approach but works. Blinking only for 3 seconds

extension UIView {
  func blink() {
    let animation = CABasicAnimation(keyPath: "opacity")
    animation.isRemovedOnCompletion = false
    animation.fromValue           = 1
    animation.toValue             = 0
    animation.duration            = 0.8
    animation.autoreverses        = true
    animation.repeatCount         = 3
    animation.beginTime           = CACurrentMediaTime() + 0.5
    self.layer.add(animation, forKey: nil)
    }
}

View more solutions

Comments

[Erik Peruzzi]

extension UIView{ func blink() { self.alpha = 0.2 UIView.animate(withDuration: 1, delay: 0.0, options: [.curveLinear, .repeat, .autoreverse], animations: { self.alpha = 1.0 }, completion: nil) } }

[DCMaxxx]

Shouldn't you use BOOL, YES and NO rather than bool, TRUE and FALSE ? Thx.

[Krishnabhadra]

@DCMaxxx Yes. One of my early(nostalgic) iOS programming bad practices. Corrected now. Thanks for noting that.

[David Rönnqvist]

@Krishnabhadra Speaking of bad practices. Repeating timers at 60fps... this should be an animation (there is discrete animations for when you don't want any interpolation between the values)

[dvs]

This is a nice alternative, although it's more of a slow fade in/out than a blink. Note you can stop the animation by using [self.yourLabel.layer removeAllAnimations].

[vishnu]

where should u use timer?

[Deepak Samuel Rajan]

hi vishnu when ever you want the label to start blinking

[Jonathan Soifer]

Did this, somehow it's not working. No error message. Just doesn't work.

[Oren Edrich]

if i have a button named "btn" how would i call the function to start?

[Jaseem Abbas]

Within the button's action, you have to call yourLabelName.startBlink()

[Radu Ursache]

you could .alpha = 1; the first time and in the animation block .alpha = 0; this will avoid a weird blinking at the start of the animation.

[GeRyCh]

Nice solution. Works as a charm

[Carl Hine]

Nice. The UIView animation example work on fading the alpha. OP wanted a BLINK effect. This does it.