Javascript color gradient effect implementation code_javascript skills

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

Thoughts

Each color is composed of RGB, and each two digits is a hexadecimal number
After converting the current color code and the target color code into decimal numbers, there is a difference. Using the difference, set Determine the step size of the total number of executions, and calculate the decimal number for changing the color at each step
Use the timer to execute
To put it simply, convert the 6-digit color code into a decimal number for every two digits, and then Calculate the difference between two pairs of RGB values. According to the set step size (number of executions), calculate the RGB value that needs to be increased or decreased at each step, and finally become the RGB value of the target color

Problems that need to be solved

Convert the 6-digit color code to decimal
Calculate the increasing or decreasing value at each step according to the step size
Use a timer to perform this increasing or decreasing process
1. Convert the 6-digit color code It is decimal

About converting hexadecimal to decimal, it has already been discussed in school textbooks. The ones digit * 16 raised to the 0th power, the tens digit * 16 raised to the 1st power, and so on. Color is composed of RGB, and each two digits are a group, such as: #123456, R=12, G=34, B=56, but in fact the RGB value is decimal, so R=12 can only be said to be corresponding position, 12 is converted to decimal: 2*1 1*16=18, 34: 4*1 3*16=52, 56: 6*1 5*16=96, so RGB=[18,52,96 ].

This is digital, but there are A-F in hexadecimal, so you have to convert A-F to 10-15 first. You can first use an array to save the entire hexadecimal corresponding number

Copy code The 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 color codes are not case-sensitive, you can convert all colors to uppercase first

Copy code The code is as follows:

code=code.toLocaleUpperCase();//Convert to Capitalize
and then convert hexadecimal to decimal

//code is the 6-digit color code, such as: 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 code The 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];
}

The s in the code is used to determine whether the color code has a # sign. If so, remove it, and finally return an array containing RGB values ​​

Calculate the increasing or decreasing step size

For example, if you set the number of color changes to 10, you need to calculate the increase or decrease in the RGB value for each of these 10 changes. Use the absolute value of the difference between the RGB value of the current color and the RGB value of the target color, and then divide it by 10 to get a step size, but this value is likely to be a decimal. You can round off the decimal, then increase or decrease the value in the last step When the time comes, just change it directly to the RGB value of the target color

Copy code The code is as follows:

var _step=10;
var _R_step=parseInt (Math.abs(_thisRGB[0]-_toRGB[0])/_step); //The increase and decrease step size of R
var _G_step=parseInt(Math.abs(_thisRGB[1]-_toRGB[1])/ _step); //The increase and decrease step size of G
var _B_step=parseInt(Math.abs(_thisRGB[2]-_toRGB[2])/_step); //The increase and decrease step size of B

Increase or decrease each execution

If the number of executions is 10, it means that it needs to be executed 10 times continuously. When _step=1, the execution is completed. Then when increasing or decreasing the step size, it will appear. If _step=10, then the increase or decrease is 1 times the step size. If _step=9, that is, the execution reaches the second step, then the increase or decrease is 2 times the step size. , until _step=1, increase or decrease the step size by 9 times. Here you can use such a simple calculation

Copy code The code is as follows:

var step=10;
var _step=step ;
//In the loop
var s=(step-_step) 1;
_step--;

Then determine whether the current color RGB value and the target RGB value are increasing or decreasing

Copy code The 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 code The code is as follows:

obj.css({'background-color':' rgb(' r ',' g ',' b ')'});

The output here is the rgb() method. It doesn’t matter. It’s the same as the color code. If you still want to output a 6-digit code, just convert the decimal to hexadecimal

The last step is to use a timer to execute. There is also speed and calculation in the middle, which I won’t go into here. The final execution code:

Copy code The code is as follows:

/*
Parameters:
obj: target object
thisRGB: 6-digit code of the current background color
toRGB: 6-digit code of the target background color
thisColor: current 6-digit code of text color
toColor: 6-digit code of target text color
step: number of executions
speed: execution speed
*/
function colorGradient(obj,thisRGB,toRGB,thisColor ,toColor,step,speed){
var _thisRGB=colorConversion(thisRGB); //Convert hexadecimal to decimal
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); 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 ')'});
                                                                                                                                                                                                                                                                                          through :_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 ')'});
clearInterval(timer);
return true;
}
},_speed);
}



This method is very simple, but the smoothness of the gradient is average, especially when a group of objects are executed continuously. All I can say is that this is a very clumsy and stupid method. The great masters all use the Tween algorithm

jQuery color gradient plug-in

jquery.animate-colors-min.js

To use it, just use jquery's animate directly. You just don't need to specify the current color. The program will automatically take the current color, but you must set the background in the style

Copy code

The code is as follows:obj.animate({'background-color':' #ff0000','color':'#000000'});