Question

所以我在画布上用HTML和Javascript创建了一个游戏。我想做一些有趣的鸟类游戏，但是当我按下一个键时，播放器的动画看起来真的很混乱。看看：

＆＃13;

body {
    overflow: hidden;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body onload="startgame()">
    <canvas id="canvas"></canvas>
<script>
    canvas.height=window.innerHeight;
    canvas.width=window.innerWidth;

function startgame() {
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    
    var x = 900;
    var y = 300;
    var w = 25;
    var h = 500;
    var yperson = 20;
    var xperson = 200;
    
    document.addEventListener("keydown", function() {
        yperson -= 150;
    });
    
    function updateperson() {
        yperson = yperson;
    }
    
    setInterval(createobject, 10);
    function createobject() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        x -= 1;
        yperson += 0.5;
        yperson *= 1.003;
        
        ctx.fillStyle = "#009999";
        ctx.fillRect(x,y,w,h);
        
        ctx.fillStyle = "black";
        ctx.fillRect(xperson,yperson,30,30);
        
        if (x <= 50) {
            if (yperson < 280 && xperson === x-30) {
                x -= 1;
            } else if (yperson > 280){
                x += 1;
            }
        }
      
        
    }
}
</script>
</body>
</html>

＆＃13;

我想要它有一个平滑的动画。我见过有些人说应该用requestanimationframe完成，但我不知道如何使用它。

提前致谢。

Answer 1

这就是我设置游戏的方式：

 // DEFINE OBJECTS UP HERE

 var update = function(modifier) {
     // update all the object properties
     // multiply values that depend on time (like speeds) by modifier
 };
 var render = function() {
     // draw everything
 };
 var main = function() {
     var now = Date.now();
     var change = now - then;

     update(change/1000); // update based on frame rate, change in milliseconds/second
     render();
     then = now;
     requestAnimationFrame(main);
 };

 // ADD EVENT LISTENERS HERE

 requestAnimationFrame = window.requestAnimationFrame
                 || window.webkitRequestAnimationFrame
                 || window.msRequestAnimationFrame 
                 || window.mozRequestAnimationFrame;
 // ABOVE CODE GIVES CROSS-BROWSER COMPATIBILITY

  var then = Date.now();
  main();

requestAnimationFrame告诉浏览器根据帧速率执行循环。就个人而言，我不明白它是如何运作的，尽管如果有人在这里，我会对了解更多有兴趣。 setInterval允许您设置循环运行的速度，但最佳速率取决于浏览器。＆＃34;然后＆＃34;和＆＃34;现在＆＃34;变量用于确定自上次执行循环以来已经过了多长时间。此值可以传递给更新函数并用于依赖于帧速率的计算，尽管有时您不需要它并且可以使用：

 var update = function() {
      //STUFF
 };

 // if using that variation just ignore then and now and call:
 update();
 //in your main

虽然使用当时和现在更好。

Answer 2

<强> requestAnimationFrame

有关详细信息，请参阅MDN window.requestAnimationFrame

由于之前的答案缺少一些信息，因此这里是基本用法的注释示例。

// A flag to indicate that the animation is over
var stop = false; // when true the animation will stop

// define main loop update
// the callback that is the main loop
// the browser treats this function as special in terms of display items including
// the canvas, and all DOM items.
// It will ensure that any changes you make to the page are synced to the display
function update(time){  // time is the time since load in millisecond 1/1000th
                        // time is high precision and gives the time down to
                        // microseconds (1/1,000,000) as fraction 0.001 is one microsecond

    // you can stop the animation by simply not calling the request
    // so if the flag stop is true stop the animation
    if(!stop){
        requestAnimationFrame(update); // request the next frame   
    }
}

requestAnimationFrame(update); // request the very first frame 
// or you can start it with a direct call. But you will have to add the time
update(0);

更新功能每秒最多可调用60次。如果代码无法跟上（即渲染时间超过1/60秒），则更新功能将等待下一帧有效地将帧速率降低到1/30。如果渲染很慢，它将继续跳过帧。

由于无法控制帧速率，因此您可以执行以下操作以将动画降低到所需的帧速率。

const FRAMES_PER_SECOND = 30;  // Valid values are 60,30,20,15,10
// set the mim time to render the next frame
const FRAME_MIN_TIME = (1000/60) * (60 / FRAMES_PER_SECOND) - (1000/60) * 0.5;
var lastFrameTime = 0;  // the last frame time
function update(time){
    if(time-lastFrameTime < FRAME_MIN_TIME){ //skip the frame if the call is to early
        requestAnimationFrame(update);
        return; // return as there is nothing to do
    }
    lastFrameTime = time; // remember the time of the rendered frame
    // render the frame
    requestAnimationFrame(update);
}

如果您将焦点更改为另一个标签页，则在焦点返回标签页之前，浏览器将不再调用该请求。

与其他计时器事件一样，调用requestAnimationFrame返回一个可用于取消回调事件的ID

var id = requestAnimationFrame(update);
// to cancel 
cancelAnimationFrame(id);

您实际上每帧可以多次调用requestAnimationFrame。只要所有请求都可以在1/60秒内呈现，它们将同时同步并呈现给显示器。但是你必须小心，因为如果渲染时间太长，它们可能会失去同步。

RequestAnimationFrame通过双缓冲更改来防止闪烁（在渲染未完成时显示画布）。与显示硬件同步并防止剪切（当显示器在框架中间更新时显示，并且显示器的上半部分显示旧框架并显示新框架的底部）。根据浏览器的不同，还有更多好处。

HTML5画布中的平滑动画

2 个答案: