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

Question

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

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' 参数中）？

Answer 1

您的 requestAnimationFrame 语句评估结果：

• scroll(timestamp, distanceToScroll, secondsToScroll)，其中时间戳未定义。它会抛出错误或返回 undefined
• window.requestAnimationFrame 不带参数执行，因此没有回调

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

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

计算结果：

• window.requestAnimationFrame 使用匿名函数作为回调调用
• 匿名函数以timestamp作为第一个参数调用
• scroll 以当前的timestamp、distanceToScroll 和secondsToScroll 作为参数调用

Answer 2

纯 JavaScript

function scrollIntoViewSmooth(elem) {
    var move = elem.offsetTop - (elem.offsetTop - elem.parentElement.scrollTop) * 0.25;

    if (Math.abs(elem.offsetTop - move) <= 2) {
        elem.parentElement.scrollTop = elem.offsetTop;
    } else {
        elem.parentElement.scrollTop = move;
        setTimeout(scrollIntoViewSmooth, 33, elem);
    }
}

示例

scrollIntoViewSmooth(document.getElementById('stuff'));