код пытается заставить объект перескочить с использованием requestanimationframe не работает - PullRequest
Новая
       8

код пытается заставить объект перескочить с использованием requestanimationframe не работает

0 голосов
/ 19 января 2019

Я пытаюсь сделать прыжок объекта, используя requestanimationframe. Переменная finalposition содержит количество пикселей, которое объект должен отображать над нижней частью страницы.

Согласно моему коду, объект должен плавно переместиться на максимальную высоту, а затем плавно переместиться вниз по обоим событиям, что занимает время = 500 мсек. Но когда я запускаю код, объект сразу появляется на максимальной высоте, а затем плавно опускается через 500 мс ... Как сделать так, чтобы оба события происходили плавно в течение 500 мс? 

let time = {
  start: null,
  total: 500
};
const moveup = now => {
  if (!time.start) time.start = now;
  time.elapsed = now - time.start;
  let progress = time.elapsed / time.total;
  let position = progress * finalPosition;
  obj.style.bottom = position + 'px';
  if (progress < 1) requestAnimationFrame(moveup);

};           

const movedown = now => {
  if (!time.start) time.start = now;
  time.elapsed = now - time.start;
  let progress = time.elapsed / time.total;
  let position = finalPosition*(1-progress);
  obj.style.bottom = position + 'px';
  if (progress < 1) requestAnimationFrame(movedown);

};       
function jump(){
    requestAnimationFrame(moveup);
    time.start=0;
    requestAnimationFrame(movedown);
} 
document.addEventListener('keydown',jump,false)

1 Ответ

0 голосов
/ 19 января 2019

Несколько вопросов здесь.

Если ваш код не является неполным, у вас нет финальной позиции где-либо в вашем коде.

Что еще более важно, функция перехода не ожидает события должным образом, вся функция выполняется одновременно,то есть он не ждет перемещения до запуска Moveown, вместо этого они работают одновременно.

Предположительно, причина, по которой вы наблюдаете только movedown, заключается в том, что оба происходят в каждом кадре, но movedown происходит после продвижения вверх.

Задание, которое вы сможете сказать, взглянув на приведенный ниже фрагмент, что я сделал здесь, чтобы перестроить часть вашего существующего кода.Я переместил первый вызов movedown в конец цикла moveup и сбросил время в конце movedown. 

let finalPosition = 100;
let time = {
  start: null,
  total: 500,
};

let obj = document.querySelector('.foo');
const moveup = (now) => {
  if (!time.start) time.start = now;
  time.elapsed = now - time.start;
  let progress = time.elapsed / time.total;
  let position = progress * finalPosition;
  obj.style.bottom = position + 'px';
  if (progress < 1) {
    requestAnimationFrame(moveup);
  } else {
    time.start = 0;
    requestAnimationFrame(movedown);
  }
};

const movedown = (now) => {
  if (!time.start) time.start = now;
  time.elapsed = now - time.start;
  let progress = time.elapsed / time.total;
  let position = finalPosition*(1-progress);
  obj.style.bottom = position + 'px';
  if (progress < 1) {
    requestAnimationFrame(movedown);
  } else {
    time.start = 0;
  }
};       

function jump() {
  requestAnimationFrame(moveup);
}

document.addEventListener('keydown', jump, false);
.foo {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(-50%);
}

.frame {
  height: 150px;
  width: 150px;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%) translateY(-50%);
  background-color: #cdb;
}
<div class="frame">
  <div class="foo">?</div>  
</div>
<button onclick="jump()">jump</button>
...