代码之家 › 专栏 › 技术社区 › Adidev

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

requestanimationframe html5-canvas canvas animation javascript

0

Adidev · 技术社区 · 12 年前

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

为此,我使用了如下函数:

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 .

1 回复 | 直到 12 年前

1

user1693593 user1693593 12 年前

只需更换 while 具有 if :

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

Modified fiddle here

当你使用 虽然 您正在创建一个内部循环,该循环在满足条件之前不会完成,这意味着rAF在这之后才会被调用,因为“移动”在该点完成,因此不会出现可见的移动。

使用 如果 将检查一次,然后调用rAF,依此类推。

希望这有帮助!