Question

我正在尝试使用画布和请求动画帧为给定点集内的圆圈设置动画。

为此，我使用了如下函数：

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

animloop();

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

圆圈在给定的一组点内移动，但动画无法看到。当页面加载时，圆圈到达最终位置。

可以查看代码 in this fiddle 。

Answer 1

只需将while替换为if：

function animloop(){
    if (ny > pipeEnds.y) {
       ...

<强> Modified fiddle here

当您使用while时，您正在创建一个内部循环，直到满足条件才会完成，这意味着直到此之后才会调用rAF，导致没有可见的移动，因为“运动“就在那时完成。

使用if将检查一次，然后调用rAF，依此类推。

希望这有帮助！

使用请求动画帧在画布中为圆圈设置动画

1 个答案: