0

HTML5 キャンバスを使用して簡単な画像スライダーを作成しました。各画像が画面の終わりに到達すると、ランダムな画像のちらつきを引き起こしている配列から削除されます。どうすればこれを修正できますか。

JSFiddle : http://jsfiddle.net/mbe5R/2/

this.animate = function() {

        this.y += this.speed;
        this.x = this.xrandom * albumWall.canvas.width - 250;

            if(this.y > innerHeight) {
                    albumWall.fbImages.splice(albumWall.fbImages.indexOf(this),1);

                    if(albumWall.count==(albumWall.imgArr.length-1)) {
                        albumWall.count=-1;
                    }else{
                        albumWall.count++;
                        var img = albumWall.imgArr[albumWall.count];
                        console.log(img)

                        albumWall.fbImages.push(new self.fbImage(albumWall.count, img, img.width, img.height));
                    }


                }

            };

画像がウィンドウの終わりに達したら、それを削除します

albumWall.fbImages.splice(albumWall.fbImages.indexOf(this),1);

画面がちらつくのはこれが原因だと思います。

4

2 に答える 2

2

私が知る限り、あなたは正しかった。問題は、アニメーションの途中で配列から画像を引き出すことで、別の画像 (現在その場所にある可能性が高い) がレンダリングされないフレームを生成することでした。これは、上記の行を次のように変更することで修正できます。

var that = this;
setTimeout( function() {
  albumWall.fbImages.splice(albumWall.fbImages.indexOf(that),1);
}, 0);

簡単な説明は、タイムアウトにより、トリガーする前に現在のアニメーション関数が完了するまでスプライスが待機することです。詳細については、 setTimeout を使用して関数をスタックに送信することに関するこの役立つ回答を参照してください。

これが更新されたフィドルです。

于 2013-10-27T15:14:22.973 に答える
0

Evan による回答は古いブラウザーの回避策ですが、新しいブラウザーはrequestAnimationFrameをサポートしています。これは、ちらつきを防ぐためのよりクリーンな方法です。

設定することにより

 function yourDrawingFunction() {

      // your drawing code here

      window.requestAnimationFrame(yourDrawingFunction);
 };

 window.requestAnimationFrame( yourDrawingFunction );

フレーム描画コードは、ブラウザの準備が整うと実行され、自動的にダブルバッファリングが使用されます (関数が終了するまで、ユーザーには何も表示されません)。これには、パフォーマンスに対する 2 つのプラスの副作用もあります。

  • 独自のページ レンダリング パイプラインのスケジューリングに描画を組み込む方が簡単なため、ほとんどのブラウザーでは描画が高速です。
  • 現在のブラウザー タブが表示されていない場合、コードは実行されないため、ユーザーのコンピューターのリソースが節約されます。ただし、これは、フレーム描画コードに実際のアプリケーション ロジックが含まれていないことを確認する必要があることを意味します (ただし、いずれにせよ、そうすべきではありません)。

ほとんどのブラウザーは既にこれをサポートしていますが、一部のブラウザーはベンダー固有のプレフィックスのみをサポートしています。初期化ルーチンのこのポリフィラー スニペットは、互換性を提供し、まったくサポートしていないブラウザーのフォールバックも提供します。

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.msRequestAnimationFrame     ||
          window.oRequestAnimationFrame      ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();
于 2013-10-28T09:58:12.760 に答える