Question

我以为我想做的事情很简单！但我很挣扎。我已经绘制了这个时髦的网格，但是我想“看到”它是一个接一个地绘制一条线的动画，我想通过使用超时和动画帧，它将动画并连续绘制每一行，但它只是保持'出现'而非动画，我缺少什么？！

var fps = 15;
            var c = document.getElementById("box2009");
            var ctx = c.getContext("2d");


            draw();

            function draw() {

                setTimeout(function () {

                    ctx.strokeStyle = "rgb(0,0,0)";
                    requestAnimationFrame(draw);
                    ctx.beginPath();
                    ctx.moveTo(100, 5);
                    ctx.lineTo(289, 5);
                    ctx.lineTo(289, 69);
                    ctx.lineTo(100, 69);
                    ctx.lineTo(100, 2);
                    ctx.moveTo(5, 69);
                    ctx.lineTo(100, 69);
                    ctx.lineTo(100, 139);
                    ctx.lineTo(5, 139);
                    ctx.lineTo(5, 66);
                    ctx.moveTo(289, 69);
                    ctx.lineTo(289, 139);
                    ctx.lineTo(192, 139);
                    ctx.lineTo(192, 69);
                    ctx.moveTo(100, 139);
                    ctx.lineTo(192, 139);
                    ctx.lineTo(192, 215);
                    ctx.lineTo(100, 215);
                    ctx.lineTo(100, 139);
                    ctx.moveTo(289, 139);
                    ctx.lineTo(406, 139);
                    ctx.lineTo(406, 231);
                    ctx.lineTo(289, 231);
                    ctx.lineTo(289, 139);
                    ctx.moveTo(406, 231);
                    ctx.lineTo(513, 231);
                    ctx.lineTo(513, 325);
                    ctx.lineTo(406, 325);
                    ctx.lineTo(406, 231);
                    ctx.lineWidth = 5;
                    ctx.stroke();

                }, 1000 / fps);

            }

Answer 1

演示：http://jsfiddle.net/m1erickson/xkxwnf3k/

定义对象中的每一行并将这些对象放在一个数组中：

var lines=[];

lines.push({x0:100,y0:5, x1:289,y1:5});
lines.push({x0:289,y0:5, x1:289,y1:69});
lines.push({x0:289,y0:69,x1:100,y1:69});
lines.push({x0:100,y0:69,x1:100,y1:2});
...

然后，您可以使用动画循环单独为数组中的线设置动画：

var nextLine=0;
var lastTime;
var interval=500;

// start the animation loop
requestAnimationFrame(animate);

function animate(time){

    if(nextLine<lines.length){
        requestAnimationFrame(animate);
    }

    if(!lastTime){lastTime=time;}

    var elapsed=time-lastTime;

    if(elapsed<interval){return;}

    var line=lines[nextLine];
    ctx.beginPath();
    ctx.moveTo(line.x0,line.y0);
    ctx.lineTo(line.x1,line.y1);
    ctx.stroke();

    nextLine++;

    lastTime=time;
}

动画画布线一个接一个地画

1 个答案: