Javascript カラーグラデーション効果の実装コード_JavaScript スキル

以下はブロガーによるいくつかのアイデアと解決策です。これに興味がなく、jquery プラグインを直接使用したい場合は、ここをクリックしてください。

感想

各色はRGBで構成されており、各2桁は16進数です。
現在のカラーコードとターゲットのカラーコードを10進数に変換した後、その差分を利用してステップサイズを決定します。総実行回数を計算し、ステップごとに色を変えるための10進数を計算します
タイマーを使って実行します
簡単に言うと、6桁のカラーコードを2桁ごとに10進数に変換します設定されたステップ サイズ (実行回数) に従って、2 つの RGB 値のペアの差を計算し、各ステップで増加または減少する必要がある RGB 値を計算し、最終的にターゲット色の RGB 値になります。

解決する必要がある問題

6桁のカラーコードを10進数に変換
ステップサイズに応じて各ステップの増減値を計算
タイマーを使用してこの増減処理を実行
1. -桁のカラーコード 10進数です

16進数から10進数への変換については、すでに学校の教科書で取り上げられています。一の位 * 16 の 0 乗、十の位 * 16 の 1 乗などです。色はRGBで構成されており、#123456、R=12、G=34、B=56のように2桁ずつがグループになっていますが、実際にはRGB値は10進数なので、R=12としか言えません。対応する位置である場合、12 は 10 進数に変換されます: 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[ code[2]]*16 f[code[3]];
var b=f[code[4]]*16 f[code[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[ code[2]]*16 f[code[3]];
var b=f[code[4]]*16 f[code[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 の場合は、10 回連続して実行する必要があることを意味し、_step=1 で実行が完了します。次に、ステップ サイズを増減する場合、_step=10 の場合、増減はステップ サイズの 1 倍、つまり実行が 2 番目のステップに到達した場合に表示されます。はステップ サイズの 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 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); _toRGB[1]?_thisRGB[1]-_G_step*s:_thisRGB[ 1] _G_step*s);
var b=_step==1?_toRGB[2]:(_thisRGB[2]>gt; _toRGB[2]?_thisRGB[2]-_B_step*s:_thisRGB[2] _B_step* s）;
obj.css（{'background-color'： 'rgb（' r '、' g '、' b '）'}）;
stos：_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'});