在RGB空间中衰减

Fading through RGB space

本文关键字：衰减 空间 RGB      更新时间：2023-09-26

对于另一个项目，我们正在尝试在RGB颜色空间中渐变（从一种颜色到另一种颜色）。作为概念验证，我们用JavaScript构建逻辑。最后，div的背景应该一步一步地更改为给定的颜色。但在我们的示例中，div只是被设置为最终颜色，并且没有显示开始颜色和结束颜色之间的步骤。

既然我们不能让它工作，我们的问题是：这里出了什么问题？是逻辑有缺陷还是我们的JS技能：）？

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <script>
        $(function() {
        var colors = [];
            $('#go').click(function() {
            console.log($('#red1').val()+" "+$('#green1').val()+" "+$('#blue1').val()+" "+$('#red2').val()+" "+$('#green2').val()+" "+$('#blue2').val());
                slidecolor($('#red1').val(), $('#green1').val(), $('#blue1').val(), $('#red2').val(), $('#green2').val(), $('#blue2').val());
                readArray();
            });
            function slidecolor(StartsR, StartsG, StartsB, aimR, aimG, aimB) {
            StartsR = parseInt(StartsR);
            StartsG = parseInt(StartsG);
            StartsB = parseInt(StartsB);
            aimR = parseInt(aimR);
            aimG = parseInt(aimG);
            aimB = parseInt(aimB);
                if(aimR >= StartsR)
                {
                    var directionR = 1;
                    console.log("größer");
                    var distanceR = aimR - StartsR;
                }
                else
                {
                    var directionR = 0;
                    console.log("kleiner");
                    var distanceR = StartsR - aimR;
                }
                if(aimB >= StartsB)
                {
                    var directionB = 1;
                    var distanceB = aimB - StartsB;
                }
                else
                {
                    var directionB = 0;
                    var distanceB = StartsB - aimB;
                }
                if(aimG >= StartsG)
                {
                    var directionG = 1;
                    var distanceG = aimG - StartsG;
                }
                else
                {
                    var directionG = 0;
                    var distanceG = StartsG - aimG;
                }
                if((distanceR >= distanceB) && (distanceR >= distanceG)) { var distance = distanceR; }
                if((distanceG >= distanceR) && (distanceG >= distanceB)) { var distance = distanceG; }
                if((distanceB >= distanceR) && (distanceB >= distanceG)) { var distance = distanceB; }
                var stepsR = Math.round(distance/distanceR);
                var stepsG = Math.round(distance/distanceG);
                var stepsB = Math.round(distance/distanceB);
                console.log(distance+" "+distanceR);
                console.log(stepsR+" "+stepsG+" "+stepsB);
                var tmpstepsR = 0;
                var tmpstepsG = 0;
                var tmpstepsB = 0;

                for(i=0; i<=distance; i++) {
                console.log(i);
                    if(i==0)
                    {
                        console.log("FIRST RUN");
                        if(directionR == 1) {
                            var tmpR = StartsR + 1;
                            tmpstepsR = stepsR;
                        }
                        else
                        {
                            var tmpR = StartsR - 1;
                            tmpstepsR = stepsR + 1;
                        }
                        if(directionG == 1) {
                            var tmpG = StartsG + 1;
                            tmpstepsG = stepsG;
                        }
                        else
                        {
                            var tmpG = StartsG - 1;
                            tmpstepsG = stepsG;
                        }       
                        if(directionB == 1) {
                            var tmpB = StartsB + 1;
                            tmpstepsB = stepsB;
                        }
                        else
                        {
                            tmpstepsB = stepsB;
                            var tmpB = StartsB - 1;
                        }                           
                    }
                    else
                    {
                    console.log("NEXT RUN");
                        if(((stepsR == i) || (tmpstepsR == i)) && tmpR != aimR)
                        {
                            tmpstepsR = tmpstepsR + stepsR;
                            if(directionR == 1) {
                                var tmpR = tmpR + stepsR;
                            }
                            else
                            {
                                var tmpR = tmpR - stepsR;
                            }                           
                        }
                        if(((stepsG == i) || (tmpstepsG == i)) && tmpG != aimG)
                        {
                            tmpstepsG = tmpstepsG + stepsG;
                            if(directionG == 1) {
                                var tmpG = tmpG + stepsG;
                            }
                            else
                            {
                                var tmpG = tmpG - stepsG;
                            }                           
                        }
                        if(((stepsB == i) || (tmpstepsB == i)) && tmpB != aimB)
                        {
                            tmpstepsB = tmpstepsB + stepsB;
                            if(directionB == 1) {
                                var tmpB = tmpB + stepsB;
                            }
                            else
                            {
                                var tmpB = tmpB - stepsB;
                            }                                                       
                        }                       
                    }
                    console.log('rgb('+ tmpR +','+ tmpG +','+ tmpB +')');
                    colors.push('rgb('+ tmpR +','+ tmpG +','+ tmpB +')');
                }
            }
            function readArray(){
                colors.forEach(function(entry){
                    timeOut(entry);
                    $('#color').css("background-color", entry);
                });
            }
            function timeOut(entry){
                setTimeout(function(){$('#color').css("background-color", entry);}, 3000);
            }
        });
    </script>
    <h1>Farbe 1</h1>
    red: <input id="red1">
    green: <input id="green1">
    blue: <input id="blue1">
    <h1>Farbe 2</h2>
    red: <input id="red2">
    green: <input id="green2">
    blue: <input id="blue2">
    <button id="go">LET'S GO</button>
    <div id="color" style="width:500px;height:500px"></div>
</body>
</html>

请注意，有些部分可能有点bug或丑陋，因为这只是第一次尝试。最后一部分是我们增加了一些休息时间，这是最后的手段，可能不是最佳实践。。。

编辑：jsfiddle

在readArray中，对colors数组中的所有条目进行迭代。这个迭代只需要很短的时间（如中所示，比您所能注意到的要快）。在该迭代期间，将设置所有3秒超时。它们没有排序，只是设置为在forEach完成后约3秒执行。

您需要正确排列您的回调：

function readArray(){
    timeOut(colors, 0);
}
function timeOut(array, index){
    var entry = colors[index];
    $('#color').css("background-color", entry);
    var nextIndex = index + 1;
    if(nextIndex < array.length){
        setTimeout(function(){
            timeOut(array, nextIndex);
        }, 30);
    }
}

基本上，在执行当前"步骤"的那一刻，您为下一步设置超时。

示例Fiddle

请注意，我将超时设置为每步30毫秒，这样您就可以真正注意到衰落。

（当然，您可以只使用timeOut(colors, 0);而不是readArray();，因此可以完全删除readArray）

相关文章：