此动画正在使用spritesheet。
此动画在Firefox和Chrome以及最新版本的IE中都可以正常使用。
然而,当谈到Safari时,它并没有像你期望的那样工作。动画速度非常慢,降至15 FPS。
有没有在所有浏览器中制作类似这样的作品,而不是故意减慢其他浏览器的速度?
我怀疑这与Safari处理大图像的方式不一致有关吗?
应该注意的是,我已将文件大小一直减少到1.8mb,低于4.3mb。它仍然没有正常播放。
动画代码:
/********************************
* 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;
}();