画布动画（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回调（ 未定义 ）中。

当您尝试将不是函数的值传递给requestAnimationFrame ，这是chrome控制台中的示例

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

VM82：1未捕获的TypeError：无法在“ Window”上执行“ 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功能的函数。