个人中心
gpt4 book ai didi

javascript - RGB 空间淡入淡出

转载 作者：行者123 更新时间：2023-12-03 10:51:36 25 4
gpt4 key购买 nike

对于另一个项目，我们正在尝试淡入 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

最佳答案

在 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每步毫秒，因此您实际上可以注意到淡入淡出。

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

关于javascript - RGB 空间淡入淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28406429/

25 4 0
文章推荐： javascript - 在 View 和 Controller 之间更新 Angular ng-repeat 数据值的最佳方法是什么？
文章推荐： javascript - 应用内浏览器不会关闭
文章推荐： javascript - AngularJS 适合构建组件吗？
文章推荐： javascript - 访问 Angular Directive(指令)中的嵌套节点
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com