ホームページ >ウェブフロントエンド >jsチュートリアル >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 進数全体を保存します。
カラー コードでは大文字と小文字が区別されないため、最初にすべての色を大文字に変換できます
//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]];
変換コード全体はメソッドとして記述されます
コード内の s は、カラー コードに # 記号があるかどうかを判断するために使用され、ある場合はそれを削除し、最後に RGB 値を含む配列を返します。
増加または減少するステップ サイズを計算します
たとえば、色の変更数を 10 に設定した場合、これら 10 回の変更ごとに RGB 値の増減を計算する必要があります。現在の色の RGB 値とターゲット色の RGB 値の差の絶対値を使用し、それを 10 で割ってステップ サイズを取得しますが、この値は小数点になる可能性が高く、四捨五入できます。小数点を入力し、最後のステップで値を増減します。時間が来たら、ターゲット色の RGB 値に直接変更するだけです
各実行を増減します
実行回数が 10 の場合は、10 回連続して実行する必要があることを意味し、_step=1 で実行が完了します。次に、ステップ サイズを増減する場合、_step=10 の場合、増減はステップ サイズの 1 倍、つまり実行が 2 番目のステップに到達した場合に表示されます。はステップ サイズの 2 倍です。_step=1 になるまで、ステップ サイズを 9 倍増減します。ここでは、このような単純な計算を使用できます
次に、現在のカラー RGB 値とターゲット RGB 値が増加しているか減少しているかを判断します
最後に色を出力します
ここでの出力は rgb() メソッドです。それでも 6 桁のコードを出力したい場合は、10 進数を 16 進数に変換するだけです。
最後のステップはタイマーを使用して実行することです。途中には速度と計算もありますが、ここでは説明しません。最終的な実行コード:
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 の animate を直接使用するだけです。現在の色を指定する必要はありません。プログラムは自動的に現在の色を取得しますが、スタイルで背景を設定する必要があります。