スマートな分岐？ javascript

質問

Javascriptで文字の色を変更するスクリプトを作成しています。
setTimeout()を利用して、文字色が少しずつフェードしていくものです。
onmouseoverでロールオーバーのような感じにしたいと考えています。

文字色はRGBで0-255の間で指定します。
とりあえず変更前と変更後の色を指定した状態では無事作成することができました。

そこで、変更前（元の色）と変更後の色を決めうちではなく、初期設定用の変数に元の色と変更後の色を設定することで、好きな色に指定できる仕組みにしたいと考えています。

HTML：
<div id="fade" onmouseover="fadein(255,153,0)">abcde</div>

JS:
//初期値指定
var default_r = 0; //赤の初期値
var default_g = 0; //緑の初期値
var default_b = 0; //青の初期値
var target_r = 255; //赤の変更後の値
var target_g = 153; //緑の変更後の値
var target_b = 0; //青の変更後の値
var step = 4; //色の変更具合

function fade_in(r,g,b){
target_r = r;
target_g = g;
target_b = b;

～～～～～～～～～～～～

現在の決めうちの作り方では例として黒→オレンジであれば

if(default_r <= target_r || default_g <= target_g || default_g <= target_b){
if(default_r < target_r){
default_r += step;
}
～～～～～～～～～～～～

のような感じで「初期値より目標値が大きければ」といった感じでそれぞれの色をstepずつ変化（表示）させていくものです。
この状態では逆の指定（オレンジ→黒）にした場合、if()に入らないのでなにも処理がされなくなってしまいます。

r,g,bのそれぞれの値に応じてすべてif（）で分岐すれば処理は可能なのですが、もっとシンプルに実現できる方法はないでしょうか？

回答No.1

fujillin · ベストアンサー

全体がどうやっているのか不明なので、考え方です。

＞初期値より目標値が大きければ～
別に大きくても小さくてもかまわなくて、目標値に近づいていけばよいのではないだろうか？

r,g,bの3色でも値が1つでも考え方は同じなので…
　delta = (目標値　-　初期値）/ステップ数
みたいにして、1回の処理分の差分を出しておいて、
　表示値（現状値） = 初期値 + delta * i　　（iはループ回数）
とするとか、
　表示値 += delta
とするか…
あるいはその都度
　表示値 += （目標値 - 現在値）/残りのステップ数
を加算していくなど、同じ考えでも方法はいろいろ。

いずれにしろ、目標値があってそこに徐々に近づいてゆけばよいだけではないだろうか。
同じ近づくにしても、例のように等速度で近づいてゆくだけでなく、速度に変化をつけるとか（単純な等分割ではなくなる）、加速度も変化するとか、変化の経路すのものも揺らぐとか、いろいろバリエーションがあることでしょう。

＞値に応じてすべてif（）で分岐すれば～
あまり、条件分岐の必要性を感じないけれど、どうしたか。
最終の値を正確に目標値にする必要がある場合は、最後だけ計算値ではなく（誤差がでる）目標値を直接代入する必要があるので、条件岐が必要かも。

お礼

回答ありがとうございます。
> delta = (目標値　-　初期値）/ステップ数
この考え方を参考に無事思い通りのものが出来ました。

> 同じ近づくにしても、例のように等速度で近づいてゆくだけでなく、速度に変化をつけるとか（単純な等分割ではなくなる）、加速度も変化するとか、変化の経路すのものも揺らぐとか、いろいろバリエーションがあることでしょう。

ここにもせっかくなので挑戦してみようかと思います。

回答No.3

babu_baboo

だれかもっとかっこよくかいてくれなかなぁ～

<div id="a" style="background-color:#fedcba">abc</div>

//@cc_on
function getColor ( RGB ) {
　if (/^#[0-9A-F]{3}$/i.test(RGB)) {
　　return eval(RGB.replace(/^#(\w)(\w)(\w)$/i, '[0x$1$1,0x$2$2,0x$3$3]'));
　} else if (/^#[0-9A-F]{6}$/i.test(RGB)) {
　　return eval(RGB.replace(/^#(\w\w)(\w\w)(\w\w)/i, '[0x$1,0x$2,0x$3]'));
　} else if (/^rgb\([\d\s]+,[\d\s]+,[\d\s]+\)$/i.test(RGB)) {
　　return eval(RGB.replace(/^rgb\((.*)\)$/i, '[$1]'));
　}
　return null;
}

function getStyle( e, s ) {
　//@ return e.currentStyle[ s ];
　return document.defaultView.getComputedStyle( e, null )[ s ];
}

alert(getColor(getStyle(document.getElementById('a'),'backgroundColor')));

お礼

回答ありがとうございます。
上の関数
function getColor ( RGB ) {
これは16進の色を取得して10進に戻しているということでしょうか・・・

下の関数は今の自分にはほとんど解読不能です。
javascriptは比較的読みやすい言語だと思いますが、勉強不足を痛感します。
今回は別の方法で実現できましたが、ご提示いただいたコードも実践してみたいと思います。

回答No.2

babu_baboo

さんこうえんざんし、ってのはどう？
var tmp;

default_r = (tmp = default_r + step) <= target_r ? tmp: target_r;
default_g = (tmp = default_g + step) <= target_g ? tmp: target_g;
default_b = (tmp = default_b + step) <= target_b ? tmp: target_b;

ていじしたれいでは、きょうかいのふきんで、はすうがおかしい！とおもふ。

お礼

回答ありがとうございます。
> もっとシンプルに～
と言った意味ではまさにこのとおりですね。
三項演算子は使った事がなかったので思いつきませんでした。
状況に応じて、書き方を変えていけるだけの知識を身につけたいと思います。
「補足要求」ですが、思い通りのものが出来たのでお礼とさせていただきます。