通过 RGB 淡入淡出 space

Question

对于另一个项目，我们正在尝试淡化 RGB 颜色 space（从一种颜色到另一种颜色）。作为概念证明，我们在 JavaScript 中构建了逻辑。作为最终结果，a 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>

请注意，由于这只是第一次尝试，因此某些部分可能有点问题或难看。最后一部分我们添加了一些时间是最后的手段，可能不是最佳实践......

编辑：jsfiddle

Answer 1

在 readArray 中，您将遍历 colors 数组中的所有条目。这个迭代只需要很少的时间（就像，比你能注意到的要快）。在 that 迭代期间，设置了 all 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);
    }
}

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

Example Fiddle

请注意我将超时设置为每步 30 毫秒，因此您实际上可以注意到淡入淡出。

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

通过 RGB 淡入淡出 space

Fading through RGB space

javascript

jquery

html

web

rgb