Изображение мерцает на холсте

Question

Изображение мерцает на холсте

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);

Я думаю, что это вызывает проблему, когда экран мерцает случайным образом.

user1184100 27 окт. 2013, в 16:14

Источник

Теги:

javascript

jquery

html5

html5-canvas

2 ответа

-2

Хотя ответ Evan является обходным решением для старых браузеров, новые браузеры поддерживают requestAnimationFrame, что является гораздо более чистым способом предотвращения мерцания.

Установив

 function yourDrawingFunction() {

      // your drawing code here

      window.requestAnimationFrame(yourDrawingFunction);
 };

 window.requestAnimationFrame( yourDrawingFunction );

код рисования кадра будет выполняться всякий раз, когда браузер будет готов и будет автоматически использовать двойную буферизацию (до завершения функции ничего не будет показано пользователю). Это также имеет два положительных побочных эффекта:

В большинстве браузеров рисование выполняется быстрее, потому что им проще включать чертеж в планирование собственного конвейера рендеринга страницы
Код не будет выполнен, если текущая вкладка браузера не отображается, что экономит ресурсы на компьютере пользователя. Но это означает, что вам нужно убедиться, что в вашем коде рисования нет фактической логики приложения (но вы все равно не должны этого делать).

Большинство браузеров уже поддерживают это, но некоторые только с их префиксом для конкретного поставщика. Этот фрагмент полифиллера в вашей процедуре инициализации обеспечивает совместимость, а также обеспечивает резерв для браузеров, которые его вообще не поддерживают:

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.msRequestAnimationFrame     ||
          window.oRequestAnimationFrame      ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

Philipp 28 окт. 2013, в 07:26

0

Привет, Филипп, я уже использовал polyfill requestAnimationFrame в своем коде, но как я могу исправить ошибку, используя requestAnimationFrame? Вы можете проверить мой код в скрипте и сообщить мне ваши мысли.
user1184100 28 окт. 2013, в 10:47

Ещё вопросы

Привет, Филипп, я уже использовал polyfill requestAnimationFrame в своем коде, но как я могу исправить ошибку, используя requestAnimationFrame? Вы можете проверить мой код в скрипте и сообщить мне ваши мысли.

Evan · Accepted Answer · 2013-10-27T13-32-00.000Z

Насколько я могу судить, вы были правы. Проблема заключалась в том, что, вытаскивая изображение из массива в середине анимации, вы создали рамку, где другое изображение (которое теперь на своем месте, скорее всего) не было визуализировано. Это можно исправить, изменив эту строку выше:

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

Краткое объяснение заключается в том, что таймаут заставит сплайсинг ждать, пока ваша текущая анимационная функция не будет завершена до запуска. Более подробную информацию можно найти в этом полезном ответе об использовании setTimeout для отправки функций в стек.

Здесь твоя обновленная скрипка.