0

http://kazopark.com/3d/car/

此动画使用精灵表。

此动画在 Firefox 和 Chrome 以及最新版本的 IE 中运行良好。

然而，当谈到 Safari 时，它并没有像您期望的那样工作。动画速度非常慢，降至 15 FPS。

无论如何，是否可以在所有浏览器中使类似的工作相同，而不会故意减慢其他浏览器的速度？

我怀疑这与 Safari 处理大图像的方式不充分有关？

应该注意的是，我已经将文件大小从 4.3mb 减少到 1.8mb。它仍然无法正常播放。

动画代码：

/********************************
*         INIT ON LOAD          *
*            PUBLIC             *
*********************************/
KMS.background = function(){
var singleton = {};

this.parent;
this.imgHolder;
this.newWidth;
this.newHeight;

function init(){
    parent = document.createElement('div');
    parent.className = "KMS_div";
    parent.id = "KMS_div_Background";

    var holder = document.getElementById("KMS_div_Holder");
    holder.appendChild(parent);

    imgHolder = new Image();
    imgHolder.id = "KMS_img_SpriteSheet";
    imgHolder.src = "img/CarRoad_low2.jpg";
    parent.appendChild(imgHolder);

    newWidth = window.innerWidth / 800;
    newHeight = window.innerHeight / 600;

    imgHolder.style.width = 512 + "%";
    imgHolder.style.height = 1365.4 + "%";
}


function BeginBackground(){
    init();

    var i = 0;

    setInterval(function(){
        parent.style.left = -(100 * (i % 5)) + "%";
        parent.style.top = -(100 * (parseInt(i / 5) % 14)) + "%";
        i++;

        if(i === 63)    i = 0;

        console.log(i);

    }, 50);

    console.log("BG begin");
};

singleton.BeginBackground = BeginBackground;

return singleton;
}();
4

0 回答 0