Jump to content

Problem While Animating Colors In Pure JavaScript..


Recommended Posts

Hello There.

I'am Making What It Seems Like A Function To Animate The Background Color Of An Element,But I Have A Problem.

This Is The Code:

 

<script>

function color(id,duration,r_start,g_start,b_start,r_end,g_end,b_end)

{

var element=document.getElementById(id);

 

var parameter=setInterval(colorGradually,50*duration);

 

function colorGradually()

{

if (r_start==r_end && g_start==g_end && b_start==b_end)

{

clearInterval(parameter);

}

else

{

for (var i=r_start,var j=g_start,var k=b_start;

i<r_end && j<g_end && k<b_end;i++,j++,k++)

{

element.style.backgroundColor="rgb("+i+","+j+","+k+")";

}

}

 

}

 

 

}

</script>

<div id="test" style="width:100%;height:200px;background-color:rgb(128,128,128)"></div>

<input type="button" onclick="color('test',1,128,128,128,255,255,255)" value="Change">

 

The Script Isn't Working At All.

I've Checked The Script With Esprisma Code Validator And The Code Was Syntactically Valid,But I Can't Recognize The Problem...

Link to post
Share on other sites

Multiple vars are done

 

var i = r_start, j = g_start, k = b_start;

 

You do not require for loop, as the setInterval() is the loop to create a gradual colour change.

 

Problems with for loop

if 'i' for example, but the same happens to all, equals 128 right! i++ will increment to 128 + 128, meaning 2nd loop 'i' will equal 256, NOT much of a gradual change in background colour there?

 

If you want it to increment by 1 you would have to use code similar to i = i + 1; in that case, no for loop is required just

 

i = i + 1; j = j + 1; k = k + 1;

 

preceding

 

element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";

 

with var listing for these variables outside within the color() function instead.

Link to post
Share on other sites

Scratch that! Better solution as the if condition won't activate clearInterval() as 'r_start', 'g_start', 'b_start' remain the same value (so it will run continuously even though rgb() will stop incrementing when rgb(255,255,255) is reached, its still looping), in the else condition all you need is

r_start = r_start + 1;
g_start = g_start + 1;
b_start = b_start + 1;
var i = r_start, j = g_start, k = b_start;
element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";

or remove var i, j, and k completly from background styling, and use 'r_start', 'g_start', 'b_start' instead

Edited by dsonesuk
  • Like 1
Link to post
Share on other sites

Scratch that! Better solution as the if condition won't activate clearInterval() as 'r_start', 'g_start', 'b_start' remain the same value (so it will run continuously even though rgb() will stop incrementing when rgb(255,255,255) is reached, its still looping), in the else condition all you need is

r_start = r_start + 1;
g_start = g_start + 1;
b_start = b_start + 1;
var i = r_start, j = g_start, k = b_start;
element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";

or remove var i, j, and k completly from background styling, and use 'r_start', 'g_start', 'b_start' instead

 

In Fact I'am Kind Of Lost.

Can You Provide Me With A Code Sir?...

I Mean A Modified Copy Of My Code...

Edited by Eyad Syria-lover
Link to post
Share on other sites


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />

<title>Document Title</title>

 

<script type="text/javascript">

function color(id, duration, r_start, g_start, b_start, r_end, g_end, b_end)

{

var element = document.getElementById(id);

var i = r_start, j = g_start, k = b_start;

element.innerHTML = '<h1 style="font-size:4.1vw">wait....wait...</h1>';

var parameter = setInterval(colorGradually, 50 * duration);

function colorGradually()

{

 

/// With original code! This if condition will never be true and never run clearInterval() , because the original variable values (*_start) never change anywhere in your remaing code? but! i, j, k do change

if (i === r_end && j === g_end && k === b_end)

{

clearInterval(parameter);

element.innerHTML = '<h1 style="font-size:4.1vw">The End</h1>';

}

else

{

// for (var i = r_start, j = g_start, k = b_start; i < r_end && j < g_end && k < b_end; i = i + 1, j = j + 1, k = k + 1)

// {

i = inc_dec_depending_start_and_end(r_start, r_end, i);

 

 

if (i === r_end) // comment OUT to change rgb value together

{

j = inc_dec_depending_start_and_end(g_start, g_end, j);

}// comment OUT to change rgb value together

 

if (j === g_end)// comment OUT to change rgb value together

{

k = inc_dec_depending_start_and_end(b_start, b_end, k);

}// comment OUT to change rgb value together

 

element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";

// }

}

 

}

function inc_dec_depending_start_and_end(start, end, value) {

if (start < end && value < end)

{

 

value += 1;

}

else if (start > end && value > end)

{

value -= 1;

}

else

{

value = end;

}

return value;

}

 

}

</script>

<style type="text/css">

 

</style>

</head>

<body>

<div id="test" style="border: 1px solid red;width:100%;height:200px;background-color:rgb(125,255,0)"></div>

<input type="button" onclick="color('test', 1, 125, 255, 0, 65, 0, 255)" value="Change">

</body>

</html>

Link to post
Share on other sites

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>

        <script type="text/javascript">
            function color(id, duration, r_start, g_start, b_start, r_end, g_end, b_end)
            {
                var element = document.getElementById(id);
                var i = r_start, j = g_start, k = b_start;
                element.innerHTML = '<h1 style="font-size:4.1vw">wait....wait...</h1>';
                var parameter = setInterval(colorGradually, 50 * duration);
                function colorGradually()
                {

                    /// With original code! This if condition will never be true and never run clearInterval() , because the original variable values (*_start) never change anywhere  in your remaing code? but!  i, j, k do change
                    if (i === r_end && j === g_end && k === b_end)
                    {
                        clearInterval(parameter);
                        element.innerHTML = '<h1 style="font-size:4.1vw">The End</h1>';
                    }
                    else
                    {
                        // for (var i = r_start, j = g_start, k = b_start; i < r_end && j < g_end && k < b_end; i = i + 1, j = j + 1, k = k + 1)
                        // {
                        i = inc_dec_depending_start_and_end(r_start, r_end, i);


                        if (i === r_end) // comment OUT to change rgb value together
                        {
                            j = inc_dec_depending_start_and_end(g_start, g_end, j);
                        }// comment OUT to change rgb value together

                        if (j === g_end)// comment OUT to change rgb value together
                        {
                            k = inc_dec_depending_start_and_end(b_start, b_end, k);
                        }// comment OUT to change rgb value together

                        element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";
                        // }
                    }

                }
                function inc_dec_depending_start_and_end(start, end, value) {
                    if (start < end && value < end)
                    {

                        value += 1;
                    }
                    else if (start > end && value > end)
                    {
                        value -= 1;
                    }
                    else
                    {
                        value = end;
                    }
                    return value;
                }

            }
        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div id="test" style="border: 1px solid red;width:100%;height:200px;background-color:rgb(125,255,0)"></div>
        <input type="button" onclick="color('test', 1, 125, 255, 0, 65, 0, 255)" value="Change">
    </body>
</html>

 

Thank You Very Much Sir...That Worked Just As Expected...

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...