时间戳

首页 > 解决方案 > 使用 requestAnimationFrame 控制动画速度

javascript - 使用 requestAnimationFrame 控制动画速度

问题描述

我正在尝试为从左到右在画布上移动的正方形设置动画。我正在使用 requestAnimationFrame 这样做。不幸的是，我无法控制广场的速度。

我当前的代码如下所示：

// Functions
// ===========================

// Square -> Square
// start the world with initial state s, e.g main(0)

function main(s) {
  requestAnimationFrame(main);
  advanceSquare(s);
  renderSquare(s);
}

// =========

// Square -> Square
// move square to the right

function advanceSquare(s) {
  s++;
}

// =========

// Square -> Image
// render the square on screen
// (check-expect)

function renderSquare(s) {
  renderScreen(screenWidth, screenHeight);
  ctx.fillStyle = squareColour;
  ctx.fillRect(s, squareYCoord, squareSides, squareSides);
}

// =========

// Number Number -> Image
// render the screen

function renderScreen(screenWidth, screenHeight) {
  ctx.fillStyle = screenColour;
  ctx.fillRect(0, 0, screenWidth, screenHeight);
}

s表示正方形的 x 坐标。advanceSquare(s)增加s1。但是，当我更改advanceSquare(s)为：

function advanceSquare(s) {
  return s + 0.1;
}

速度保持不变。

你能建议一种降低广场速度的方法吗？

谢谢！

标签： javascript

解决方案

我发现我的代码存在问题，并且存在 2 个问题。

首先，回调方法requestAnimationFrame传递了一个参数 a DOMHighResTimeStamp，它指示当前时间（基于从时间开始的毫秒数）。这意味着我们不能s传入main(). 因此代码应该是：

function main() {
  requestAnimationFrame(main);
  advanceSquare(s);
  renderSquare(s);
}

第二个问题是没有获取fromrenderSquare(s)的更新值。为了做到这一点，我必须写：sadvanceSquare(s)

function main() {
  requestAnimationFrame(main);
  renderSquare(advanceSquare(s));
}

推荐阅读