Question

实际上我有一组点，当连接形式像水平和垂直连接的管道。我的目标是通过点/管道移动圆圈。如果条件也不能正常工作。

当调用begin函数时，它取第一个和第二个点，并且圆圈从第一个点移动到第二个点通过第一个if条件。

然后当它到达第二个点时，它应该转到当前动画停止的下一个if条件，并且从callBegin函数开始一个新动画。

代码如下所示

    var ParticleGen = function() {
        var particle = this;
        this.begin = function(){
            var pipeBegin = points[pipeIndex];
            var pipeEnds = points[pipeIndex + 1];
            nx = pipeBegin.x;
            ny = pipeBegin.y;
            if(pipeBegin.x == pipeEnds.x ){
                if( pipeBegin.y > pipeEnds.y){
                    // endpoint y greater than start point y moving upwards
                    d = "up";
                    function animloop(){
                        if(ny > pipeEnds.y) {
                            ctx.clearRect(0, 0, w, h);
                            drawCircle(nx, ny);
                            ny--;
                            nx = nx;
                        }
                        requestAnimFrame(animloop);
                    }
                    animloop();
                }else if( pipeBegin.y < pipeEnds.y ){
                    d = "down";
                    function animloop1(){
                        if(ny < pipeEnds.y) {
                            ctx.clearRect(0, 0, w, h);
                            drawCircle(nx, ny);
                            ny++;
                            nx = nx;
                        }
                        requestAnimFrame(animloop1);
                    }
                    animloop1();

                }else if(ny == pipeEnds.y){
                    cancelAnimationFrame(animloop1);
                    particle.callBegin();
                }           
            }else if(pipeBegin.y == pipeEnds.y ){
                if(pipeBegin.x < pipeEnds.x){
                    // start.x < end.x right movement
                    d = "right";
                    function animloop2(){
                        if(nx < pipeEnds.x) {
                            ctx.clearRect(0, 0, w, h);
                            drawCircle(nx, ny);
                            nx++;
                            ny = ny;
                        }
                        requestAnimFrame(animloop2);
                    }
                    animloop2();
                }else if(pipeBegin.x > pipeEnds.x) {
                    d = "left";
                    function animloop3(){
                        if(nx > pipeEnds.x) {
                            ctx.clearRect(0, 0, w, h);
                            drawCircle(nx, ny);
                            nx--;
                            ny = ny;
                        }
                        requestAnimFrame(animloop3);
                    }
                    animloop3();

                }else if(nx == pipeEnds.x){
                    cancelAnimationFrame(animloop2);
                    particle.callBegin();
                }   
            }
        }
        this.callBegin = function(){
            if(pipeIndex <= 3){
                pipeIndex++;
            }
            particle.begin();
        }
    };

function drawCircle(cx, cy){
    ctx.beginPath();
    ctx.arc(cx, cy, 2, 0, 2 * Math.PI, false);
    ctx.fillStyle = "black";
    ctx.fill(); 
    ctx.closePath();
}

var newObj = new ParticleGen();
newObj.begin();

我是对此的新手。所以...我有小提琴here..谢谢你。

Answer 1

我认为你的方法，以及所有这些ifs，对于你想要达到的目标来说太复杂了。它可以用相当少的代码完成。

除此之外，您的问题是您正在检查是否停止动画并在错误的位置开始新的细分。您在begin（）的主代码中执行此操作，但此方法仅在每个段的开头调用一次。当点到达结尾时，不再调用begin（），因此永远不会检查是否停止动画并启动新动画。实际上，您当前的动画永远保持活跃状态，但由于其中一个ifs而无法执行任何操作：

if(ny > pipeEnds.y) {
    ctx.clearRect(0, 0, w, h);
    drawCircle(nx, ny);
    ny--;
    nx = nx;
}

在这些ifs中，你检查点是否已到达其路径的末尾，你应该调用cancelAnimFrame并开始一个新的序列。我已更新您的fiddle并在此处复制相关代码（begin（）和callBegin（）函数）。

this.begin = function () {
    var pipeBegin = points[pipeIndex];
    var pipeEnds = points[pipeIndex + 1];
    nx = pipeBegin.x;
    ny = pipeBegin.y;
    if (pipeBegin.x == pipeEnds.x) {
        if (pipeBegin.y > pipeEnds.y) {
            // endpoint y greater than start point y moving upwards
            d = "up";

            function animloop() {
                if (ny > pipeEnds.y) {
                    ctx.clearRect(0, 0, w, h);
                    drawCircle(nx, ny);
                    ny--;
                    nx = nx;
                    requestAnimFrame(animloop);
                }else if (ny == pipeEnds.y) {
                    cancelAnimationFrame(animloop);
                    particle.callBegin();
                }

            }
            animloop();
        } else if (pipeBegin.y < pipeEnds.y) {
            d = "down";

            function animloop1() {
                if (ny < pipeEnds.y) {
                    ctx.clearRect(0, 0, w, h);
                    drawCircle(nx, ny);
                    ny++;
                    nx = nx;
                    requestAnimFrame(animloop1);
                } else if (ny == pipeEnds.y) {
                    cancelAnimationFrame(animloop1);
                    particle.callBegin();
                }

            }
            animloop1();

        } 
    } else if (pipeBegin.y == pipeEnds.y) {
        if (pipeBegin.x < pipeEnds.x) {
            // start.x < end.x right movement
            d = "right";

            function animloop2() {
                if (nx < pipeEnds.x) {
                    ctx.clearRect(0, 0, w, h);
                    drawCircle(nx, ny);
                    nx++;
                    ny = ny;
                    requestAnimFrame(animloop2);
                } else if (ny == pipeEnds.y) {
                    cancelAnimationFrame(animloop2);
                    particle.callBegin();
                }

            }
            animloop2();
        } else if (pipeBegin.x > pipeEnds.x) {
            d = "left";

            function animloop3() {
                if (nx > pipeEnds.x) {
                    ctx.clearRect(0, 0, w, h);
                    drawCircle(nx, ny);
                    nx--;
                    ny = ny;
                    requestAnimFrame(animloop3);
                } else if (ny == pipeEnds.y) {
                    cancelAnimationFrame(animloop3);
                    particle.callBegin();
                }

            }
            animloop3();

        } else if (nx == pipeEnds.x) {
            cancelAnimationFrame(animloop2);
            particle.callBegin();
        }
    }
}
this.callBegin = function () {
    if (pipeIndex <= 3) {
        pipeIndex++;
        console.log(pipeIndex)
        particle.begin();
    }

}

如果条件在画布中不能正常工作

1 个答案: