Question

对于另一个我们试图淡化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>

请注意，某些部件可能有点马车或丑陋，因为它只是第一次尝试。最后一部分是我们添加了一些时间，是最后的手段，可能不是最佳实践......

编辑：jsfiddle

Answer 1

在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);
    }
}

基本上，在执行当前“步骤”时，您可以设置下一步的超时。

<强> Example Fiddle

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

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

淡入RGB空间

1 个答案: