javascript - Jquery中的加速设置间隔

Question

我正在尝试创建一个弹跳球(在 Canvas 上)。如果球在上下运动时能够加速，我会很高兴。不知道如何使用 setInterval 来做到这一点。这是我的代码:

setInterval(function animate() {
    ctx.clearRect( 0, 0, canvas.width, canvas.height);

    if (movement1 === true) {
        dotHeight += 1;
        if (dotHeight >= 100) movement1 = false;
    } else {
        dotHeight -= 1;
        if (dotHeight <= 0) movement1 = true;
    }
        ctx.beginPath();
        ctx.arc(canvas.width / 2, (canvas.height / 2) + dotHeight, dotSize, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();
    }, 4);

这会导致线性运动。我希望有一个自然的运动。基本上开始时要快，到达顶峰时会变慢，反之亦然。

Answer 1

您应该同时拥有 speed和一个 gravity (或 acceleration )变量:

• speed告诉您在当前更新中您的对象将移动多少个单位(此处为像素)。
• gravity告诉你 speed 有多少个单位每次更新都会增加。

你想要一个常量gravity这样speed每次更新都会增加相同数量的像素。这会给你一个变量 speed ，以便您的对象(此处的点)在每次更新时行进的距离更长或更短，具体取决于其行进的方向。

要使点弹跳，只需更改其 speed 的方向即可一旦它到达地板。您只需将其乘以 -1或者，您也可以将其乘以 bouncingFactor (-1 < bouncingFactor < 0)，这样它在每次弹跳时都会损失能量:

在这里您可以看到一个工作示例:

var canvas = document.getElementById("canvas");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

var ctx = canvas.getContext("2d");
var frames = 0; // Frame counter just to make sure you don't crash your browser while editing code!

// DOT STUFF:

var dotSize = 20;
var dotMinY = 0 + dotSize; // Start position
var dotMaxY = canvas.height - dotSize; // Floor
var dotY = dotMinY;
var dotSpeed = 0;
var dotLastBounceSpeed = 0; // You can use this to determine whether the ball is still bouncing enough to be visible by the user.

var center = canvas.width / 2; // Try to take every operation you can out of the animate function.
var pi2 = 2 * Math.PI;

// WORLD STUFF:

var gravity = .5;
var bounceFactor = .8; // If < 1, bouncing absorbs energy so ball won't go as high as it was before.

// MAIN ANIMATION LOOP:

function animate() {
  ctx.clearRect( 0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(center, dotY, dotSize, 0, pi2);
  ctx.fillStyle = "red";
  ctx.fill();

  // First, dotSpeed += gravity is calculated and that returns the new value for dotSpeed
  // then, that new value is added to dotY.
  dotY += dotSpeed += gravity; 
  
  if(dotY >= dotMaxY ) {
    dotY = dotMaxY;
    dotSpeed *= -bounceFactor;  
  }

  var dotCurrentBounceSpeed = Math.round(dotSpeed * 100); // Takes two decimal digits.
  
  if(frames++ < 5000 && dotLastBounceSpeed != dotCurrentBounceSpeed) {
    dotLastBounceSpeed = dotCurrentBounceSpeed;
    setTimeout(animate, 16); // 1000/60 = 16.6666...
  }
  else alert("Animation end. Took " + frames + " frames.");
}

animate();

html, body, #canvas {
  position:relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow:hidden;
}

<canvas id="canvas"></canvas>

您还应该考虑使用 requestAnimationFrame 安装了setTimeout 。来自 MDN 文档:

The Window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.

与 requestAnimationFrame 相同的示例:

var canvas = document.getElementById("canvas");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

var ctx = canvas.getContext("2d");
var frames = 0; // Frame counter just to make sure you don't crash your browser while editing code!

// DOT STUFF:

var dotSize = 20;
var dotMinY = 0 + dotSize; // Start position
var dotMaxY = canvas.height - dotSize; // Floor
var dotY = dotMinY;
var dotSpeed = 0;
var dotLastBounceSpeed = 0; // You can use this to determine whether the ball is still bouncing enough to be visible by the user.

var center = canvas.width / 2; // Try to take every operation you can out of the animate function.
var pi2 = 2 * Math.PI;

// WORLD STUFF:

var gravity = .5;
var bounceFactor = .8; // If < 1, bouncing absorbs energy so ball won't go as high as it was before.

// MAIN ANIMATION LOOP:

function animate() {
  ctx.clearRect( 0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(center, dotY, dotSize, 0, pi2);
  ctx.fillStyle = "red";
  ctx.fill();

  // First, dotSpeed += gravity is calculated and that returns the new value for dotSpeed
  // then, that new value is added to dotY.
  dotY += dotSpeed += gravity; 
  
  if(dotY >= dotMaxY ) {
    dotY = dotMaxY;
    dotSpeed *= -bounceFactor;  
  }

  var dotCurrentBounceSpeed = Math.round(dotSpeed * 100); // Takes two decimal digits.
  
  if(frames++ < 5000 && dotLastBounceSpeed != dotCurrentBounceSpeed) {
    dotLastBounceSpeed = dotCurrentBounceSpeed;
    //setTimeout(animate, 10);
    window.requestAnimationFrame(animate); // Better!!
  }
  else alert("Animation end. Took " + frames + " frames.");
}

animate();

html, body, #canvas {
  position:relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow:hidden;
}

<canvas id="canvas"></canvas>

正如您所看到的，您只需要更改一行代码!但是，您可能需要 polyfill这样你就可以回到 setTimeout如果浏览器不支持requestAnimationFrame .

您可以了解更多关于requestAnimationFrame的信息在 this post 。它解释了基础知识以及如何设置自定义帧速率。