画布动画 (window.requestAnimationFrame)

Question

所以我是一个画布新手，我编写了一些代码来尝试创建动画。我想用抛物线方程让球移动，一切都很好，除了没有动画，我基本上得到了一个由弧线组成的抛物线。

这是我用于动画的一段代码：

// a b c are calculated in another function and they are used to calculate the parabola, x1 and y1 are the coordinates of the ball
function drawball(a,b,c,x1,y1){
    canvas=document.getElementById("mycanvas");
    ctx=canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(x1,y1,25,0,2*Math.PI);
    ctx.stroke();
    //stop when i get to the final point (x3 is a const)
    if(x1<x3){
        y1=a*(x1*x1)+b*x1+c; //parabola formula
        x1++;
        window.requestAnimationFrame(drawball(a,b,c,x1,y1));
    }
}

在 chrome 的控制台中我收到此错误：

Failed to execute 'requestAnimationFrame' on 'Window': The callback
provided as parameter 1 is not a function.

感谢您的帮助！

Answer 1

您正试图将drawball 函数的返回值 传递给requestAnimationFrame 回调（未定义）。

下面是 chrome 控制台中的一个示例，当您尝试将值传递给 requestAnimationFrame 时，该值不是函数

> requestAnimationFrame(console.log('hi'))

VM82:1 未捕获的类型错误：无法在“窗口”上执行“requestAnimationFrame”：作为参数 1 提供的回调不是函数。 在:1:1

相对于传递匿名函数：

> requestAnimationFrame(() => { console.log('hi') })

嗨

---

您需要传递一个函数，该函数将在 requestAnimationFrame 计时器结束时调用。

一个例子是：

// Vanilla Javascript
window.requestAnimationFrame(function() { drawball(a,b,c,x1,y1) } );

// ES6
window.requestAnimationFrame(() => { drawball(a,b,c,x1,y1) } );

在这些情况下，传递给requestAnimationFrame 的参数是一个函数，它将被调用并执行drawball 函数。