자바스크립트 색상 그라데이션 효과 구현 code_javascript 기술

다음은 블로거의 몇 가지 아이디어와 솔루션입니다. 이에 관심이 없고 jquery 플러그인을 직접 사용하고 싶다면 여기를 클릭하세요

생각

각 색상은 RGB로 구성되어 있으며, 각 두 자리는 16진수입니다
현재 색상 코드와 대상 색상 코드를 10진수로 변환한 후 차이가 있는 것을 이용하여 단계 크기를 결정합니다.
타이머를 이용하여 실행
간단히 말하면 6자리 색상 코드를 두 자리마다 10진수로 변환합니다. , 두 쌍의 RGB 값 사이의 차이를 계산합니다. 설정된 단계 크기(실행 횟수)에 따라 각 단계에서 증가하거나 감소해야 하는 RGB 값을 계산하고 최종적으로 대상 색상의 RGB 값이 됩니다.

해결해야 할 문제

6자리 색상 코드를 십진수로 변환
단계 크기에 따라 각 단계의 증가 또는 감소 값을 계산합니다.
타이머를 사용하여 이 증가 또는 감소 과정을 수행합니다.
1. -숫자 색상 코드는 십진수입니다

16진수를 10진수로 변환하는 방법은 이미 학교 교과서에서 논의된 바 있습니다. 일의 자리 * 16의 0승, 십의 자리 * 16의 1승 등입니다. 색상은 RGB로 구성되며 각 두 자리는 #123456, R=12, G=34, B=56과 같이 그룹이지만 실제로 RGB 값은 십진수이므로 R=12라고만 말할 수 있습니다. 해당 위치에 해당하면 12는 십진수로 변환됩니다. 2*1 1*16=18, 34: 4*1 3*16=52, 56: 6*1 5*16=96, 따라서 RGB=[18,52,96 ].

디지털인데 16진수에는 A-F가 있으므로 먼저 A-F를 10-15로 변환해야 16진수에 해당하는 전체 숫자를 먼저 저장할 수 있습니다

코드 복사 코드는 다음과 같습니다.

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();/ /대문자로 변환
한 다음 16진수를 10진수로 변환

//code는 6자리 색상 코드입니다. 예: f07786;
var r=f[code[0]]*16 f[code[1]];
var g=f[ 코드[ 2]]*16 f[코드[3]];
var b=f[코드[4]]*16 f[코드[5]];

전체 변환 코드가 메소드로 작성되었습니다

코드 복사 코드는 다음과 같습니다.

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();//대문자로 변환
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[ 코드[2]]*16 f[코드[3]];
var b=f[코드[4]]*16 f[코드[5]];
return [r,g, b];
}

코드의 s는 색상 코드에 # 기호가 있는지 확인하는 데 사용됩니다. 그렇다면 이를 제거하고 마지막으로 RGB 값이 포함된 배열을 반환합니다.

증가 또는 감소 단계 크기 계산

예를 들어 색상 변경 횟수를 10으로 설정한 경우 이러한 10가지 변경마다 RGB 값의 증가 또는 감소를 계산해야 합니다. 현재 색상의 RGB 값과 대상 색상의 RGB 값의 차이의 절대값을 사용하고 이를 10으로 나누어 단계 크기를 구하지만 이 값은 소수점 이하일 가능성이 높습니다. 소수점 이하를 입력한 후 마지막 단계에서 값을 늘리거나 줄이면 됩니다. 때가 오면 바로 대상 색상의 RGB 값으로 변경하면 됩니다

코드 복사 코드는 다음과 같습니다.

var _step=10;
var _R_step=parseInt (Math.abs(_thisRGB[0]-_toRGB[0])/_step); //R의 증가 및 감소 단계 크기
var _G_step=parseInt(Math.abs(_thisRGB[1]-_toRGB [1])/ _step); //G의 증가 및 감소 단계 크기
var _B_step=parseInt(Math.abs(_thisRGB[2]-_toRGB[2])/_step); B의 스텝 크기

각 실행을 늘리거나 줄입니다

실행 횟수가 10번이면 _step=1이면 실행이 완료된다는 의미입니다. 그런 다음 단계 크기를 늘리거나 줄이면 _step=10이면 단계 크기의 1배, 즉 실행이 두 번째 단계에 도달하면 증가 또는 감소됩니다. 는 단계 크기의 2배입니다. _step=1까지 단계 크기를 9배로 늘리거나 줄입니다. 여기서는 간단한 계산을 사용할 수 있습니다

코드 복사 코드는 다음과 같습니다.

var step=10;
var _step=step ;
//루프에서
var s=(step-_step) 1;
_step--;

그런 다음 현재 색상 RGB 값과 목표 RGB 값이 증가하는지 감소하는지 확인

코드 복사 코드는 다음과 같습니다.

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 ')'});

여기서 출력되는 것은 rgb() 메서드입니다. 색상 코드와 동일합니다. 그래도 6자리 코드를 출력하려면 10진수를 16진수로 변환하면 됩니다.

마지막 단계는 타이머를 사용하여 실행하는 것입니다. 중간에는 속도와 계산도 있는데 여기서는 다루지 않겠습니다. 최종 실행 코드:

코드 복사 코드는 다음과 같습니다.

/*
매개변수:
obj: 대상 객체
thisRGB: 현재 배경색의 6자리 코드
toRGB: 대상 배경색의 6자리 코드
thisColor: 현재 텍스트 색상의 6자리 코드
toColor: 대상 텍스트 색상의 6자리 코드
step: 실행 횟수
speed: 실행 속도
*/
function colorGradient( obj,thisRGB,toRGB,thisColor ,toColor,step,speed){
var _thisRGB=colorConversion(thisRGB); //16진수를 10진수로 변환
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; //총 시간을 기준으로 각 실행 속도를 계산합니다.
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 타이머=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 ')'});
                                                ~                                                                                          를 통해 :_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);
}



이 방법은 매우 간단하지만 그라데이션의 부드러움은 평균 수준이며, 특히 개체 그룹이 연속적으로 실행될 때 더욱 그렇습니다. 제가 말할 수 있는 것은 이것이 매우 서투르고 어리석은 방법이라는 것뿐입니다. 대가들은 모두 트윈 알고리즘을 사용합니다

jQuery 색상 그라데이션 플러그인

jquery.animate-colors-min.js

이를 사용하려면 jquery의 animate를 직접 사용하면 됩니다. 현재 색상을 지정할 필요는 없습니다. 프로그램이 자동으로 현재 색상을 사용하지만 스타일에서 배경을 설정해야 합니다.

코드 복사

코드는 다음과 같습니다.obj.animate({'Background-color ':' #ff0000','color':'#000000'});