图像在画布上闪烁

我已经使用HTML5画布编写了一个简单的图像滑块。每个图像到达屏幕后，将从阵列中移除，导致随机图像闪烁。我怎样才能解决这个问题。图像在画布上闪烁

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

我认为这是造成屏幕闪烁，随机的问题。

来源

2013-10-27 user1184100

就我所知，你是对的。问题在于，通过将动画中的图像拉出阵列，您创建了一个框架，其中的另一个图像（最有可能的位置）不会呈现。这可以固定通过改变上述行来此：

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

简短的解释是，超时将使得拼接等到当前动画功能是触发之前完成。更多信息可在this helpful answer about using setTimeout to send functions down the stack找到。

Here's your updated fiddle.

来源

2013-10-27 15:14:22 Evan

真棒谢谢！ – user1184100

-1

虽然埃文答案是旧的浏览器解决方法，新的浏览器支持requestAnimationFrame这是一个更清洁的方式来防止闪烁。每当浏览器是准备

通过设置

function yourDrawingFunction() { 

     // your drawing code here 

     window.requestAnimationFrame(yourDrawingFunction); 
}; 

window.requestAnimationFrame(yourDrawingFunction);

帧绘图代码将被执行，并且将自动使用双缓冲（什么都不会被显示给用户的功能已经完成之前）。这也有性能的两个积极的副作用：

绘画是因为它更容易让他们结合绘制成
的代码不会被执行自己的网页渲染管线的调度大多数浏览器速度更快当前浏览器选项卡不可见时，这会节省用户计算机上的资源。但这意味着你必须确保你的框架代码中没有实际的应用逻辑（但是你不应该那样）。

大多数浏览器已经支持这个功能，但有些只使用它们供应商特定的前缀。这个在您的初始化例程polyfiller片段提供了兼容性，也提供了一个不支持它的浏览器回退：

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

来源

2013-10-28 09:58:12 Philipp

嗨philipp我已经在我的代码中使用了requestAnimationFrame填充，但我怎么能通过使用requestAnimationFrame修复错误？你可以在小提琴中查看我的代码，并让我知道你的想法。 – user1184100

图像在画布上闪烁

回答

相关问题