html canvas animation flickering

Question

私はHTML5 CanvasとJavaScriptを使用してこの単純なアニメーションを作成していますが、私はオブジェクトの点滅に問題があります。 私はこの質問をしたし、私が見つけたすべては基本的だった前に、私はインターネット上で解決策を見つけるためにしようとしていた：新しいイメージをロードする

• 避け、各新しいフレームでオブジェクト
• がrequestAnimationFrame()

を使用私はそれをすべてやったと思うし、ちらつきはまだ起こっている。 （私の場合は、青の長方形（障害物）

働く唯一の解決策はここに、オブジェクトを移動する責任法の画素数を減らしている：。

obstacle.prototype.moveObstacle = function(){ 
this.x -=3 
} 

が、アニメーションが遅すぎます。 その周りに方法はあります

JSFiddle：？https://jsfiddle.net/wojmjaq6/

コード：

var cnv = document.getElementById("gameField"); 
var ctx = cnv.getContext("2d"); 
var speedY = 1 
var obst1 = new obstacle(cnv.width + 50); 
var myBird = new bird(100, 1); 

function bird(x, y) { 
    this.x = x; 
    this.y = y; 
    this.gravity = 0.3 
    this.gravitySpeed = 0 
} 

bird.prototype.drawbird = function() { 
    ctx.fillStyle = "red" 
    ctx.fillRect(this.x, this.y, 20, 20); 
} 

bird.prototype.animate = function() { 
    this.gravitySpeed += this.gravity 
    this.y += speedY + this.gravitySpeed 
} 

function obstacle(x) { 
    this.x = x; 
    this.y = 0; 
    this.obstLen = Math.floor(Math.random() * 400) 
} 

obstacle.prototype.drawobstacle = function() { 
    ctx.fillStyle = "blue"; 
    ctx.fillRect(this.x, this.y, 15, this.obstLen) 
    ctx.fillRect(this.x, cnv.height, 15, -(cnv.height - this.obstLen - 100)) 
} 

obstacle.prototype.moveObstacle = function() { 
    this.x -= 3 
} 



function myFun() { 
    ctx.clearRect(0, 0, cnv.width, cnv.height); 
    myBird.animate(); 
    myBird.drawbird(); 
    obst1.moveObstacle(); 
    obst1.drawobstacle(); 

    if (obst1.x < 0) { 
    obst1 = new obstacle(cnv.width + 50); 
    } 
    window.requestAnimationFrame(myFun) 
}; 

function test() { 

    if (myBird.gravity > 0) { 
    myBird.gravity = -1 
    } else { 
    myBird.gravity = 0.3 
    } 
} 


document.getElementById("gameField").onmousedown = test 
document.getElementById("gameField").onmouseup = test 

window.requestAnimationFrame(myFun) 

Answer 1

私は青い障害物に吃音がいくつか見られます。アニメーションは滑らかではありません。

生のrequestAnimationFrameループに基づいて障害物のx位置を変更しても、必ずしも円滑な操作が行われるとは限りません。requestAnimationFrameは、できる限りブラウザを再描画するよう要求します。

requestAnimationFrameの呼び出し間の時間は、アニメーションがオンになっているデバイスの能力と各フレームの処理量によって異なります。 requestAnimationFrameが60FPSを保証するという保証はありません。

解決策は、オブジェクトの位置の変更を実際の描画と切り離したり、フレーム間の経過時間を考慮して、それに基づいて新しい位置を計算して滑らかなアニメーションにすることです。

通常、私のキャンバスアニメーションでは、GreenSockのアニメーションプラットフォーム（GSAP）https://greensock.com/get-started-jsのようなライブラリを使用しています。これは時間の経過とともに数値プロパティをアニメーション化できるため、描画パートのコードを記述するだけです。

独自のrequestAnimationFrameで時間ベースのアニメーションを計算することは可能ですが、少し複雑ですが、これは私がすべてのちらつきが表示されないことhttp://www.javascriptkit.com/javatutors/requestanimationframe.shtml

乾杯、 ダグ