尝试使用 requestanimationframe 使对象跳跃的代码不起作用

Question

我正在尝试使用 requestanimationframe 使对象跳跃。 finalposition 变量保存对象应该出现在页面底部上方的像素数。

根据我的代码，对象应该平滑地移动到最大高度，然后平滑地向下移动这两个事件需要 time=500ms ..但是当我运行代码时，对象立即出现在最大高度并且然后在 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)

Answer 1

这里有几个问题。

除非您的代码不完整，否则您的代码中的任何地方都没有 finalPosition。

更重要的是跳跃功能没有正确等待事件，整个功能一次运行，也就是说它没有在运行 movedown之前等待moveup，而是运行同时.

大概您只观察 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>

尝试使用 requestanimationframe 使对象跳跃的代码不起作用

code trying to make object jump using requestanimationframe not working

javascript

addeventlistener

requestanimationframe