1

为了在网站（如智能手机或平板电脑）上制作 3D 对象动画，我每秒将 DIV 的背景图像更改 25 次。

这是 Javascript 函数（jQuery）：

var playiPhoneVideo = function() {
    window.setTimeout(changeBG, 800);   // delayed starting time
};
var iIndex = 1;
var changeBG = function() {
    $('.iphone').css('background-image', 'url(assets/iphone-ani/iPhone5_'+iIndex+'.png)'); // change BG
    iIndex++;
    if(iIndex <= 41) {
        window.setTimeout(changeBG, 40); // 25 fps
    }

}

setTimeout用 40 毫秒确保每秒 25 帧。图像在动画/视频开始之前预加载。

现在这在所有桌面操作系统上都表现得很好。它在移动 IE10 (Windows RT) 上表现得更好（实际上我很惊讶它运行得如此之好）。它只能在 iOS (iPad mini) 上运行。 它在 Android（Xperia Tablet Z、Sony Tablet S）上运行得非常糟糕。

我做了什么试图最大限度地提高性能：

  • 将图像文件大小从 200kb 更改为 20kb（质量非常差）
  • setTimeout通过增加到100 毫秒（慢动作）来减慢递归 JS 循环
  • iIndex++通过替换为仅每秒或每第四个图像使用一次iIndex = iIndex + 2/4
  • 试图用硬件加速 DIV -webkit-transform: translate3d(0,0,0);（我知道，没用但值得一试;-)）

即使结合了所有这些优化，动画也运行得如此糟糕。它几乎没有好转。

我觉得这与图像无关，而是与 Chrome 在 Android/Android 浏览器上的缓慢 Javascript 性能有关，但我不确定。

有什么方法可以优化我的 Javascript、我的循环、图像或其他任何东西，以确保在 Android 上流畅（和可接受的质量）动画？

4

1 回答 1

-1

使用以下设置：它将提高 WebView 中动画的性能

webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

或者

您可以使用 ChromeView 代替 WebView：

https://github.com/pwnall/chromeview
于 2013-09-20T07:40:53.103 回答