问题描述
我希望创建一个函数,使用 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)
,其中时间戳未定义.它会抛出错误或返回 undefinedwindow.requestAnimationFrame
执行时没有参数,因此没有回调
scroll(timestamp, distanceToScroll, secondsToScroll)
, where timestamp is undefined. It throws an error or returns undefinedwindow.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 currenttimestamp
,distanceToScroll
andsecondsToScroll
as parameters
这篇关于向 requestAnimationFrame 回调的函数添加附加参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!