p5.js - 描画関数でスムーズなアニメーションを実現

Question

私は独占スタイルのゲームをjavascriptで作成しています（p5.jsライブラリを使用しています）。私はrectを使って、固定幅と高さを持つ2次元オブジェクトの上を滑ってカードのアニメーションを作成しようとしています。

card_property.js：

function PropertyCard(posX, posY, width, height, property){ 
    this.width = width; 
    this.height = height; 
    this.posX = posX; 
    this.posY = posY; 
    this.property = property; 

    this.display = function(){ 
    rect(this.posX, this.posY, this.width, this.height); 
    }; 
    this.update = function(){ 
     // not sure if I need to use this 
    }; 
} 

これは、条件付きロジックを使用しない限り継続的に呼び出された私のdraw機能（p5.js機能の抜粋である。ここに私の思考プロセスを示して、私の3つの機能がありますまたはp5.js noLoop関数が呼び出された）私のgame.jsの内部：

var propCards = [] 
... 
function draw(){ 
    ... 
    for (var j = propCards.length - 1; j >= 0; j--){ 
    frameRate(10) 
    console.log(propCards) 
    while (propCards[j].posX > 90){ 
     propCards[j].display(); 
     propCards[j].posX -= 5; 
    } 
    } 
} 

最後に、この関数c私はアニメーション化しようとしているプロパティのカードのインスタンスをeates予約：

function addCard(property){ 
    propCard = new PropertyCard(680, 760, 20, 40, property); 
    propCards.push(propCard); 
} 

私はアニメーションを作成しようとすると、私はx値を降順を挟んで互いに重なり合うカードを示し、静的な画像をレンダリング終わります。作成した四角形の上にカードをスライドさせて、特定のポイントで停止させるにはどうすればよいですか？

Answer 1

「ドロー」あなたは、関数の最後で、それにプログラム内容が表示さ：下の写真は、私が見ていますかを示しています。

だから、同じフレーム内に複数の矩形を描画しています。

あなたがしなければならないことは、描画の各繰り返しをどこに置くかを計算するものです。

例：

は

animationframe = 0 

// draw function 
// when you want the animation do: animationframe = distancetogo/5 
if (animationframe>0){ 
    for (var j = propCards.length - 1; j >= 0; j--){ 
    propCards[j].posX -= 5; 
    propCards[j].display(); 
    } 
}