Добавление дополнительных аргументов к функции, вызываемой requestAnimationFrame

Я хочу создать функцию, которая прокручивает элемент изображения на x пикселей за время y на холсте HTML5, используя requestAnimationFrame и дельта-время. Я не могу понять, как добавить больше аргументов к моей функции, когда 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 поставить метку времени в аргумент «метка времени»)?


javascript html5-canvas requestanimationframe
person Danneh    schedule 27.02.2014    source источник
comment
Из того, что я могу собрать с моими ограниченными знаниями, я думаю, что решение заключается либо в .call () /. Apply (), либо в передаче анонимной функции, которая содержит прокрутку, в rAF, но я не могу обернуть голову вокруг доступа к Отметка времени rAF, если я тоже.   -  person Danneh    schedule 27.02.2014
comment
Возможный дубликат Как передать аргумент с помощью requestAnimationFrame?   -  person Magnus Lind Oxlund    schedule 19.11.2018

Ответы (2)


arrow_upward
7
arrow_downward

Что оценивает ваше requestAnimationFrame утверждение:

  • scroll(timestamp, distanceToScroll, secondsToScroll), где метка времени не определена. Выдает ошибку или возвращает undefined
  • window.requestAnimationFrame выполняется без параметров, поэтому обратного вызова нет

Передача анонимной функции, которая вызывает scroll с желаемыми параметрами, должна помочь:

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

Что это означает:

  • window.requestAnimationFrame вызывается анонимной функцией как обратный вызов
  • анонимная функция вызывается с timestamp в качестве первого параметра
  • scroll вызывается с текущими параметрами timestamp, distanceToScroll и secondsToScroll
person marionebl    schedule 27.02.2014
comment
Такое очевидное решение, но я его не видел. Спасибо. - person Danneh; 27.02.2014
comment
requestAnimationFrame (timestamp = ›scroll (timestamp, distanceToScroll, secondsToScroll)); - person Garrett; 25.05.2020
comment
но как удалить requestAnimationFrame, если нет ссылки на анонимную функцию? - person Raba; 24.08.2020

arrow_upward
0
arrow_downward

Чистый 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'));
person quemeful    schedule 01.02.2018
comment
requestAnimationFrame - это javascript, и он намного лучше и рекомендуемый подход при работе с анимацией, нет ничего более плавного. - person Muhammad Omer Aslam; 01.02.2019