Animation principle--color value processing

1. Using hexadecimal colors

Sometimes the format of the provided color value is not what you need, and you need to convert it.

// To 16 binary color Properties var hexcolor = ' # ' + (16733683). ToString (+); Console.log (Hexcolor); // convert to 10 binary digits var color = Window.parseint (Hexcolor.slice (1), +); Console.log (color);

2. Color synthesis

Three primary colors red and green blue, when we want to get purple, can be used red 0xFF (255), Green 0x55 (decimal 55), Blue 0xf3 (decimal 243) mixed. But note that the result is 10 binary, need conversion before you can use code to calculate the following:

var color = 0xFF << 16 | 0x55 << 8 | 0xf3;

3. Color Extraction

When you have a color, you want to break down the color values of three basic colors, you can use &, and when the corresponding bits are 1 the result is 1.

Because the & is in binary operation. The above purple binary is 111111110101010111110011, from the front to the back, every 8 binary in turn represents the color value of red and green blue, now we want to get blue color value. It can be calculated like this

111111110101010111110011 Perform & Operations

000000000000000011111111

The code is:

Console.log (16733683&0X0000FF)

4. Use a color property with transparency

This is more troublesome, can no longer simple # add color value, but to build such a string "Rgba (R, G, B, A)", the code is as follows.

var r = 0xFF= 0x55= 0xf3= 0.2= "Rgba (" + R + "," + G + "," + B + "," + A + ") "; Console.log (color);

5. Color Tools

Colortorgb tool, turn into RGB format

Utils.colortorgb =function(color, alpha) {//if string format, convert to number if(typeofcolor = = = ' String ' && color[0] = = = ' # ') {color= Window.parseint (Color.slice (1), 16); } Alpha= (Alpha = = = undefined)? 1: Alpha;//Extract Component Values varr = Color >> & 0xff, G= Color >> 8 & 0xFF, b= Color & 0xFF, a= (Alpha < 0)? 0: ((Alpha > 1)? 1:alpha);//Check Range //Use ' Rgba ' if needed if(A = = 1) { return"RGB (" + R + "," + G + "," + B + ")"; } Else { return"Rgba (" + R + "," + G + "," + B + "," + A + ")"; }};

Parsecolor Converting color formats

Utils.colortorgb =function(color, alpha) {//if string format, convert to number if(typeofcolor = = = ' String ' && color[0] = = = ' # ') {color= Window.parseint (Color.slice (1), 16); } Alpha= (Alpha = = = undefined)? 1: Alpha;//Extract Component Values varr = Color >> & 0xff, G= Color >> 8 & 0xFF, b= Color & 0xFF, a= (Alpha < 0)? 0: ((Alpha > 1)? 1:alpha);//Check Range //Use ' Rgba ' if needed if(A = = 1) { return"RGB (" + R + "," + G + "," + B + ")"; } Else { return"Rgba (" + R + "," + G + "," + B + "," + A + ")"; }};

Console.log (Utils.parsecolor (0XFFFF00))
Console.log (Utils.parsecolor (0xffff00,true))

Animation principle--color value processing