向requestAnimationFrame返回的函数添加其他参数

问题描述

我希望使用requestAnimationFrame和delta time创建一个在HTML5画布上滚动图像元素x像素的函数。当requestAnimationFrame allready用一个参数（一个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），其中timestamp未定义。它抛出错误或返回未定义


• 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 作为回调


• 匿名函数是使用时间戳作为第一个参数调用


• 使用当前<$调用scroll c $ c> 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

这篇关于向requestAnimationFrame返回的函数添加其他参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！