UIColor transition based on progress value

snksnk picture snksnk · Apr 4, 2014 · Viewed 8.4k times · Source

I have a ProgressBar to which I want to assign a customColor color and based on the progress fade to another color. Using the method below I get a dark rainbow effect color including reds and dark brown and dark green. The start color will be a light blue one and the destination color a light green.

-(UIColor *) makeCustomColorFromProgressValue:(float) progress{


UIColor *color;

// startColor Color - lightBlue
float red = 0.53;
float green = 0.82;
float blue = 1;

//Destination Color - lightGreen
float finalRed = 0.53;
float finalGreen = 1;
float finalBlue = 0.82;

float newRed = 80;//finalRed *255;
float newGreen = (finalGreen *progress) *255;
float newBlue = (finalBlue *progress) *255;
color = Rgb2UIColor(newRed, newGreen, newBlue);



return color;
}

Answer

Martin R picture Martin R · Apr 4, 2014

You can do a "linear interpolation" between the colors:

CGFloat newRed   = (1.0 - progress) * red   + progress * finalRed;
CGFloat newGreen = (1.0 - progress) * green + progress * finalGreen;
CGFloat newBlue  = (1.0 - progress) * blue  + progress * finalBlue;
UIColor *color = [UIColor colorWithRed:newRed green:newGreen blue:newBlue alpha:1.0];

This gives the initial color for progress == 0 and the final color for progress == 1.