Absolute Ripple
  • Absolute Ripple
  • Contact

Text Color: Animating color change and making the color change relative to other variable

6/7/2013

0 Comments

 
In case the title is a bit unclear, this post is about two things:
1. Outline a few ways in which the color of UILabel can be changed gradually from one color to another color over a fixed period of time. The examples below will change the color from Red to Blue over 5 seconds.
2. Describe an approach to make the color varied in response to the value of another variable.

Method 1: Using the animation method of UIView
A very simple approach is to use the transitionWithView:duration:option:animations method of UIView.
The following assumes you have a UILabel called 'textLabel' in your storyboard and that you have established an IBOutlet to it. That is, somewhere in your @interface file there should be a line saying something like:
    @property (weak, nonatomic) IBOutlet UILabel *textLabel;
(The best way to make sure this is all link up properly is to use the control-drag approach.)

Then you simply add this to viewDidLoad:
    [self.textLabel setTextColor:[UIColor redColor]];

And add the following code to viewDidAppear:
    [UIView transitionWithView:self.textLabel
                      duration:5.0
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{
                        [self.textLabel setTextColor:[UIColor blueColor]];
   
                }
                    completion:nil];

This is it.

Method 2: Using Core Animation CATextLayer
A more complex approach is to use Core Animation CATextLayer.
First, add the QuartzCore framework and then #import it by adding the following to the top of your file (in either the .h or .m)
    #import <QuartzCore/QuartzCore.h>
Next, add the following method:
    - (void)animateTextLayer
    {
   
    CGFloat animationDuration = 5.0;
   
   
    CATextLayer *textLayer = [CATextLayer layer];
   
    [textLayer setString:@"Foo"];
   
    [textLayer setForegroundColor:[UIColor redColor].CGColor];
   
     [textLayer setFontSize:50];
 
       [textLayer setFrame:CGRectMake(100, 150, 100, 60)];
   
     [[self.view layer] addSublayer:textLayer];
   
   
     CABasicAnimation *colorAnimation = [CABasicAnimation
                                        animationWithKeyPath:@"foregroundColor"];
   
    colorAnimation.duration = animationDuration;
   
    colorAnimation.fillMode = kCAFillModeForwards;
   
    colorAnimation.removedOnCompletion = NO;
   
    colorAnimation.fromValue = (id)[UIColor redColor].CGColor;
   
    colorAnimation.toValue = (id)[UIColor blueColor].CGColor;
   
    colorAnimation.timingFunction = [CAMediaTimingFunction
                                     functionWithName:kCAMediaTimingFunctionLinear];
   
    [textLayer addAnimation:colorAnimation
                     forKey:@"colorAnimation"];
    }
Finally, call this method in viewDidLoad:
    [self animateTextLayer];

Method 3: Using NSTimer and Computing the color
The following assumes that the UILabel has been created as described in Method 1 above.
First, create a variable p by adding this under @implementation:
{
    CGFloat p;
}


Next, add the following methods:
- (UIColor *)createColorWithColorOne:(UIColor *)colorOne ColorTwo:(UIColor *)colorTwo andProportion:(CGFloat)proportion
{
    CGFloat colorOneRed, colorOneGreen, colorOneBlue, colorOneAlpha;
    [colorOne getRed:&colorOneRed green:&colorOneGreen blue:&colorOneBlue alpha:&colorOneAlpha];
   
    CGFloat colorTwoRed, colorTwoGreen, colorTwoBlue, colorTwoAlpha;
    [colorTwo getRed:&colorTwoRed green:&colorTwoGreen blue:&colorTwoBlue alpha:&colorTwoAlpha];
 
    CGFloat newRed = colorOneRed + (colorTwoRed - colorOneRed) * proportion;
    CGFloat newGreen = colorOneGreen + (colorTwoGreen - colorOneGreen) * proportion;
    CGFloat newBlue = colorOneBlue + (colorTwoBlue - colorOneBlue) * proportion;
   
    return [UIColor colorWithRed:newRed green:newGreen blue:newBlue alpha:1.0];   // assuming alpha is constant
}

- (void)changeColor:(NSTimer *)timer
{
    self.textLabel.textColor = [self createColorWithColorOne:[UIColor redColor]
                                                    ColorTwo:[UIColor blueColor]
                                               andProportion:p];
    p +=0.1;
    if (p >= 1.0) {
        [timer invalidate];
        timer = nil;
    }
}

And in viewDidLoad add:
    p = 0;
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.5
                                                      target:self
                                                    selector:@selector(changeColor:)
                                                    userInfo:nil
                                                     repeats:YES];


As said above, this changes the color of the label from red to blue in 5 seconds. You can customise the duration and the smoothness of the color transition by altering the TimeInterval of the NSTimer and the increment amount for the variable p in the changeColor: method.

Making the color vary with reference to another variable

A quick word about the method (UIColor *)createColorWithColorOne:(UIColor *)colorOne ColorTwo:(UIColor *)colorTwo andProportion:(CGFloat)proportion. The logic behind it is based on the equation of a line in 3D space. One way to express a color is by reference to its three color components: red, green and blue. These three values can be represented by a point in 3D space. Given two colors we have two points. And with two points we can construct a line, which can be expressed in the form of a parametric equation (this is essentially what the newRed, newGreen, newBlue lines above come down to). A feature of a parametric equation that is most useful here is that it allows us to express the coordinates by reference to another variable, that is, the variable called 'proportion' here. So by changing this vale we can get different color values between colorOne and colorTwo. (Note: proportion is between 0.0 and 1.0 only. When proportion = 0, the color is red; when proportion = 1.0, it is blue.)

The example here simply increment the proportion gradually over a period of time so that the color animates from red to blue. This is not the only use of this method. Animating color changes between two colors over a fixed duration can be achieved using method 1 and 2, which are arguably much simpler too. The method described here allows you to generate a color that lies between two other color by reference to something else. For example, red can represents a maximum temperature and blue can represent a minimum temperature. Using this method you can get a color as the temperature varies between the minimum and maximum.

With a bit more work, the code can be modified to use more than two colors, such that you can gradually transitional between a multitude of colors over a period of time or as show different colors in response to changes in some other variable.

0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    Archives

    August 2013
    July 2013
    June 2013
    May 2013
    January 2013
    October 2012
    September 2012
    March 2012
    February 2012

    Categories

    All
    Apple Policy
    In App Purchase
    Ios Programming
    Our Apps

    RSS Feed

    Disclaimers

    Here are some resources that I find useful in writing iOS apps. These are not necessarily unique as they are based on various sources online.
    This is mainly to provide a source of reference to myself and my associates but if it can be of use to someone else, that is good.
    Note that information is provided here as is. Use at your own risk. There is no guarantee that it is accurate. We will update the information as time and resources permit.

    Powered by Create your own unique website with customizable templates.