Question

下图显示了我如何在HTML5 / JS中进行无限背景滚动。我的连续背景由X画布组成。我会在到达它之前立即渲染下一个Canvas，然后我将释放之前的Canvas。这里的问题是渲染后动画是平滑的，但是当它到达下一帧时它会快速打嗝。因为它将渲染下一帧，从逻辑上讲会有一个快速的打嗝。在其他语言中使用多线程可以解决该问题。但是这个渲染需要DOM，所以它会被锁定。

问题：如何在不阻止当前jQuery动画的情况下在HTML5中渲染下一个背景画布？

    INIT     > START render 0
 _________
|         |
|    0    |  > render1
|_________|
|         |
|    1    |  > render 2
|_________|
|         |
|    2    |  > render 3
|_________|
|         |
|    ∞    |  > render X
|_________|

伪

var currentSpite = 0;
function goAnimate() {

    render(currentSpite + 1); //50ms hiccup here
    $("#allSpites").animate({ "top": (currentSpite * 1000) + "px" }, 1000, function () {
        goAnimate();
    });
    currentSpite += 1;

    release(currentSpite - 2);
    if (currentSpite > max) return;

}

Answer 1

正如我在评论中所说，创建画布不是你想在动画循环中做的事情：这需要几毫秒才能完成，这足以从60fps切换到30（或50到25），因为你已经有了一些图纸要做最糟糕的是，如果你创建画布然后“处理”它们，它们将不得不被垃圾收集，这是你的应用程序的另一个“长时间”暂停。

我的第一个是使用两个画布并通过css交换它们。但我只是做了一个快速的测试，而且平滑度很差：我觉得很多回流使用一个小的滚动演示很少看到平滑度，我前段时间只使用一个画布（jsfiddle.net/gamealchemist/5VJhp）。

所以最后的建议是只使用一个画布，在每个画面上清除它，然后使用KinectJS绘制两个必需的'渲染'，只需在绘制前平移画布以调整坐标。

它似乎有效，因为在9ms你甚至可以在60fps的16ms内留下几毫秒：甜蜜！ :-)

无限画布背景滚动没有打嗝

1 个答案: