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

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

  •  0
  • Adidev  · 技术社区  · 10 年前

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

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

    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 回复  |  直到 10 年前
        1
  •  1
  •   user1693593 user1693593    10 年前

    只需更换 while 具有 if :

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

    Modified fiddle here

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

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

    希望这有帮助!