Implementation Code of Javascript color gradient effect

The following are some ideas and solutions of the blogger. If you are not interested in this and want to directly use the jquery plug-in, click here.

Ideas

Each color is composed of RGB, and each two digits is a hexadecimal number.
There is a difference between the current color code and the target color code after being converted to a decimal number. The difference value is used to set the step of the total number of executions, calculate the 10-digit number of each change color.
Execute With Timer
To put it simply, the six-digit color code is converted to a 10-digit number for each two digits, and then the difference between the two RGB values is calculated. According to the set step size (number of executions ), calculate the RGB value that needs to be increased or reduced in each step, and then change it to the RGB value of the target color.

Problems to be Solved

Convert the 6-digit color code to a 10-digit system.
Calculate the increment or decrement of each step based on the step size.
Use a timer to execute this increase or decrease Process
1. Convert the 6-digit color code into a 10-digit system.

We have already talked about how to convert hexadecimal to hexadecimal. The power of a single digit * 16 is 0, the power of ten digits * 16 is 1, and so on. The color is composed of RGB, and each two digits is a group, for example: #123456, R = 12, G = 34, B = 56, but the RGB value is actually in decimal format, R = 12 can only be said to be the corresponding position. 12 is converted to 10: 2*1 + 1*16 = 18, 34: 4*1 + 3*16 = 52,56: 6*1 + 5*16 = 96, so RGB = [18, 52, 96].

This is a number, but there is a hexadecimal A-F, so you have to first convert the A-F to 10-15, you can use an array to save the entire hexadecimal number

Copy codeThe Code is as follows:
Var f = new Array ();
F ['0'] = 0;
F ['1'] = 1;
F ['2'] = 2;
F ['3'] = 3;
F ['4'] = 4;
F ['5'] = 5;
F ['6'] = 6;
F ['7'] = 7;
F ['8'] = 8;
F ['9'] = 9;
F ['a'] = 10;
F ['B'] = 11;
F ['C'] = 12;
F ['D'] = 13;
F ['E'] = 14;
F ['F'] = 15;

Because the color code is case-insensitive, you can first convert all colors to uppercase.

Copy codeThe Code is as follows:
Code = code. toLocaleUpperCase (); // convert to uppercase
Then convert hexadecimal to hexadecimal.

// Code is a 6-digit color code, for example, f07786;
Var r = f [code [0] * 16 + f [code [1];
Var g = f [code [2] * 16 + f [code [3];
Var B = f [code [4] * 16 + f [code [5];

The entire conversion code is written as a method.

Copy codeThe Code is as follows:
Function colorConversion (code ){
Var len = code. length;
Var f = new Array ();
F ['0'] = 0;
F ['1'] = 1;
F ['2'] = 2;
F ['3'] = 3;
F ['4'] = 4;
F ['5'] = 5;
F ['6'] = 6;
F ['7'] = 7;
F ['8'] = 8;
F ['9'] = 9;
F ['a'] = 10;
F ['B'] = 11;
F ['C'] = 12;
F ['D'] = 13;
F ['E'] = 14;
F ['F'] = 15;
Code = code. toLocaleUpperCase (); // convert to uppercase
Var s = code. substr (0, 1 );
If (s = '#'){
Code = code. substr (1, 6 );
}
Var r = f [code [0] * 16 + f [code [1];
Var g = f [code [2] * 16 + f [code [3];
Var B = f [code [4] * 16 + f [code [5];
Return [r, g, B];
}

In the code, s is used to determine whether the color code carries the # sign. If yes, It is removed. Finally, an array containing the RGB value is returned.

Increase or decrease in the calculation step

For example, if you set the number of color changes to 10 times, you need to calculate the 10 changes, the increase or decrease of each RGB value. Take the absolute value based on the difference between the RGB value of the current color and the RGB value of the target color, and divide it by 10 to get a step. However, this value may be a decimal number and can be used to remove the decimal number, then, when increasing or decreasing the value in the last step, you can directly change it to the RGB value of the target color.

Copy codeThe Code is as follows:
Var _ step = 10;
Var _ R_step = parseInt (Math. abs (_ thisRGB [0]-_ toRGB [0])/_ step); // increase or decrease the step size of R
Var _ G_step = parseInt (Math. abs (_ thisRGB [1]-_ toRGB [1])/_ step); // increase or decrease the step size of G
Var _ B _step = parseInt (Math. abs (_ thisRGB [2]-_ toRGB [2])/_ step); // increase or decrease the step size of B

Increase or decrease of each execution

If the number of executions is 10, that is, 10 consecutive executions, when _ step = 1, the execution is complete. If _ step = 10, the step size is doubled. If _ step = 9, it is executed to step 2, the step size increases or decreases by 2 times until _ step = 1. The step size increases or decreases by 9 times. Here we can use such a simple calculation

Copy codeThe Code is as follows:
Var step = 10;
Var _ step = step;
// Loop body
Var s = (step-_ step) + 1;
_ Step --;

Then determine whether the current color RGB value and the target RGB value are increased or decreased.

Copy codeThe Code is as follows:
Var r = _ step = 1? _ ToRGB [0] :( _ thisRGB [0]> _ toRGB [0]? _ ThisRGB [0]-_ R_step * s: _ thisRGB [0] + _ R_step * s );
Var g = _ step = 1? _ ToRGB [1] :( _ thisRGB [1]> _ toRGB [1]? _ ThisRGB [1]-_ G_step * s: _ thisRGB [1] + _ G_step * s );
Var B = _ step = 1? _ ToRGB [2] :( _ thisRGB [2]> _ toRGB [2]? _ ThisRGB [2]-_ B _step * s: _ thisRGB [2] + _ B _step * s );

Finally, output the color

Copy codeThe Code is as follows:
Obj.css ({'background-color': 'rgb ('+ r +', '+ g +', '+ B + ')'});

The output here is the rgb () method. It does not matter. It is the same as the color code. If you think that the 6-bit code is output, convert the 10-digit to the 16-digit code.

The last step is to use the timer to execute the task. There is a pair of speed and calculation in the middle. I will not talk about it here. The final Execution Code:

Copy codeThe Code is as follows:
/*
Parameters:
Obj: target object
ThisRGB: the 6-bit code of the current background color
ToRGB: 6-bit code of the target background color
ThisColor: the 6-digit code of the current text color.
ToColor: 6-digit code of the target text color
Step: number of executions
Speed: execution speed
*/
Function colorGradient (obj, thisRGB, toRGB, thisColor, toColor, step, speed ){
Var _ thisRGB = colorConversion (thisRGB); // hexadecimal conversion
Var _ toRGB = colorConversion (toRGB );
If (thisColor & toColor ){
Var _ thisColor = colorConversion (thisColor, 1 );
Var _ toColor = colorConversion (toColor, 1 );
}

Var step = step? Step: 3;
Var _ step = step;
Var _ speed = speed? ParseInt (speed/step): 30; // calculate the speed of each execution based on the total time
Var _ R_step = parseInt (Math. abs (_ thisRGB [0]-_ toRGB [0])/_ step );
Var _ G_step = parseInt (Math. abs (_ thisRGB [1]-_ toRGB [1])/_ step );
Var _ B _step = parseInt (Math. abs (_ thisRGB [2]-_ toRGB [2])/_ step );

Var timer = setInterval (function (){
If (_ step> 0 ){
Var s = (step-_ step) + 1;
Var r = _ step = 1? _ ToRGB [0] :( _ thisRGB [0]> _ toRGB [0]? _ ThisRGB [0]-_ R_step * s: _ thisRGB [0] + _ R_step * s );
Var g = _ step = 1? _ ToRGB [1] :( _ thisRGB [1]> _ toRGB [1]? _ ThisRGB [1]-_ G_step * s: _ thisRGB [1] + _ G_step * s );
Var B = _ step = 1? _ ToRGB [2] :( _ thisRGB [2]> _ toRGB [2]? _ ThisRGB [2]-_ B _step * s: _ thisRGB [2] + _ B _step * s );
Obj.css ({'background-color': 'rgb ('+ r +', '+ g +', '+ B + ')'});
If (thisColor & toColor ){
Var cr = _ step = 1? _ ToColor [0] :( _ thisColor [0]> _ toColor [0]? _ ThisColor [0]-_ R_step * s: _ thisColor [0] + _ R_step * s );
Var cg = _ step = 1? _ ToColor [1] :( _ thisColor [1]> _ toColor [1]? _ ThisColor [1]-_ G_step * s: _ thisColor [1] + _ G_step * s );
Var cb = _ step = 1? _ ToColor [2] :( _ thisColor [2]> _ toColor [2]? _ ThisColor [2]-_ B _step * s: _ thisColor [2] + _ B _step * s );
Obj.css ({'color': 'rgb ('+ cr +', '+ cg +', '+ cb + ')'});
}
_ Step --;
} Else {
ClearInterval (timer );
Return true;
}
}, _ Speed );
}

This method is simple, but the gradient is smooth, especially when a group of objects are continuously executed. It can only be said that this is a very loose and stupid method. The great gods use the Tween algorithm.

JQuery color gradient plugin
Jquery. animate-colors-min.js

You can use jquery's animate directly, but you do not need to specify the current color. The program will automatically take the current color, but you must set the background in the style.

Copy codeThe Code is as follows:
Obj. animate ({'background-color': '# ff0000', 'color': '#000000 '});