Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animating a pulsing UILabel?

I am trying to animate the color the the text on a UILabel to pulse from: [Black] to [White] to [Black] and repeat.

- (void)timerFlash:(NSTimer *)timer {
[[self navTitle] setTextColor:[[UIColor whiteColor] colorWithAlphaComponent:0.0]];
[UIView animateWithDuration:1
                      delay:0 
                    options:UIViewAnimationOptionAllowUserInteraction 
                 animations:^{[[self navTitle] setTextColor:[[UIColor whiteColor] colorWithAlphaComponent:1.0]];} 
                 completion:nil];
}

.

[self setFadeTimer:[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timerFlash:) userInfo:nil repeats:YES]];

Firstly I am not sure of my method, my plan (as you can see above) was to set up a animation block and call it using a repeating NSTimer until canceled.

My second problem (as you can see above) is that I am animating from black (alpha 0) to white (alpha 1) but I don't know how to animate back to black again so the animation loops seamlessly

Essentially what I want is the text color to pulse on a UILabel until the user presses a button to continue.

EDIT_001:

I was getting into trouble because you can't animate [UILabel setColor:] you can however animated [UILabel setAlpha:] so I am going to give that a go.

EDIT_002:

- (void)timerFlash:(NSTimer *)timer {
    [[self navTitle] setAlpha:0.5];
    [UIView animateWithDuration:2 
                          delay:0 
                        options:UIViewAnimationOptionAllowUserInteraction 
                     animations:^{[[self navTitle] setAlpha:0.9];} 
                     completion:nil];
}

This works (BTW: I do want it to stop which is why I hooked it up to a NSTimer so I can cancel that) the only thing is that this animates from midGray to nearWhite and then pops back. Does anyone know how I would animate back from nearWhite to midGray so I get a nice smooth cycle? enter image description here

EDIT_003: (Solution)

The code suggested by Dave DeLong (see below) does indeed work when modified to use the CALayer opacity style attribute:

UILabel *navTitle;
@property(nonatomic, retain) UILabel *navTitle;

.

// ADD ANIMATION
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"opacity"];
[anim setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[anim setFromValue:[NSNumber numberWithFloat:0.5]];
[anim setToValue:[NSNumber numberWithFloat:1.0]];
[anim setAutoreverses:YES];
[anim setDuration:0.5];
[[[self navTitle] layer] addAnimation:anim forKey:@"flash"];

.

// REMOVE ANIMATION
[[[self navTitle] layer] removeAnimationForKey:@"flash"];
like image 863
fuzzygoat Avatar asked Feb 17 '11 21:02

fuzzygoat


1 Answers

You could probably do this with a CAAnimation. I just pushed a little demo project I did a while ago onto github. It shows the olympic logo, and makes the rings fly around to a random location on the screen, then animate back to their original position. You could probably do something very similar, but obviously not using the position property.

Here's the basic code to make one of the rings fly around:

CABasicAnimation * a = [CABasicAnimation animationWithKeyPath:@"position"];
[a setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[a setFromValue:[NSValue valueWithCGPoint:[layer position]]];
[a setToValue:[NSValue valueWithCGPoint:[self randomPoint]]];
[a setAutoreverses:YES];
[a setDuration:1.0];
[layer addAnimation:a forKey:nil];

Your fromValue and toValue values would be CGColorRefs, and your animation keypath would be different, but the trick here is the setAutoreverses:YES. This will animate from the fromValue to the toValue, and then back to the fromValue. It's pretty darn handy. :)

https://github.com/davedelong/Demos/blob/master/OlympicRings


If that doesn't work (and it might not), then I might just layer two UILabels on top of each other and animate their alpha values from 0.0 to 1.0 (or vice versa) at the same time.

like image 95
Dave DeLong Avatar answered Sep 20 '22 16:09

Dave DeLong