向 requestAnimationFrame 回调的函数添加附加参数

2022-01-17 00:00:00 javascript html5-canvas requestanimationframe

我希望创建一个函数，使用 requestAnimationFrame 和增量时间在 HTML5 画布上滚动图像元素 x 像素超过 y 时间.当 requestAnimationFrame 已经用一个参数(DOMHighResTimeStamp)回调我的函数时，我无法弄清楚如何向我的函数添加更多参数.我很确定以下代码不起作用:

I am looking to create a function that scrolls an image element x pixels over y time on an HTML5 canvas, using requestAnimationFrame and delta time. What I can't figure out is how to add more arguments to my function, when requestAnimationFrame allready calls back my function with one argument (a DOMHighResTimeStamp). I am pretty sure the following code doesn't work:

function scroll(timestamp, distanceToScroll, secondsToScroll) {
  //delta = how many milliseconds have passed between this and last draw
  if (!lastDraw) {var lastDraw = timestamp;};
  delta = (0.5 + (timestamp - lastDraw)) << 0; //bitwise hack for rounding integers
  lastDraw = timestamp;

  //speed (pixels per millisecond) = amount of pixels to move / length of animation (in milliseconds)
  speed = distanceToScroll / secondsToScroll;

  //new position = current position + (speed * delta)
  position += (speed * delta);

  context.drawImage(myImage,0,position,50,50/*of 200*/,0,0,100,100);
  requestAnimationFrame(scroll(timestamp, distanceToScroll, secondsToScroll));
};

//later...
scroll(timestamp, 100, 5)
scroll(timestamp, 10, 20)

我的问题是我不知道如何强制 requestAnimationFrame 继续使用我的附加参数调用我的滚动函数，而默认情况下它所做的只是在回调中传递一个参数(时间戳).那么我该如何添加更多参数(或强制 rAF 将时间戳放入我的 'timestamp' 参数中)?

My question is I have no idea how to force requestAnimationFrame to continute to call my scroll function with my additional parameters, when all it does by default is pass just one argument (a timestamp) on callback. So how do I go about adding more parameters (or forcing rAF to put the timestamp in my 'timestamp' argument)?

推荐答案

你的 requestAnimationFrame 语句的结果是什么:

What your requestAnimationFrame statement evaluates to:

  • scroll(timestamp, distanceToScroll, secondsToScroll)，其中时间戳未定义.它会抛出错误或返回 undefined
  • window.requestAnimationFrame 执行时没有参数，因此没有回调
  • scroll(timestamp, distanceToScroll, secondsToScroll), where timestamp is undefined. It throws an error or returns undefined
  • window.requestAnimationFrame is executed without parameters, thus no callback

传递一个匿名函数调用 scroll 并使用所需的参数应该可以解决问题:

Passing an anonymous function that calls scroll with the desired parameters should do the trick:

requestAnimationFrame(function(timestamp) {
    scroll(timestamp, distanceToScroll, secondsToScroll));
});

计算结果:

  • window.requestAnimationFrame 以匿名函数作为回调调用
  • 匿名函数以 timestamp 作为第一个参数调用
  • scroll 以当前 timestamp、distanceToScroll 和 secondsToScroll 作为参数调用
  • window.requestAnimationFrame is called with anonymous function as callback
  • anonymous function is called with timestamp as first parameter
  • scroll is called with current timestamp, distanceToScroll and secondsToScroll as parameters

相关文章