PhoneGap HTML慢动画

Question

我正在 Phonegap 上测试 HTML5 画布动画。首先，我编写了这个简单动画的网络版本（不同的形状从一边跳到另一边）。网页版运行速度很快，没有任何问题。另一方面，一旦我使用 PhoneGap 下载应用程序构建应用程序的动画非常慢。

我不明白是什么问题，或者可能是 PhoneGap 无法处理画布动画。

任何建议

var doChange = true;
window.onload=function(){

var demo = document.getElementById('demo');
var ctx = demo.getContext('2d');

document.getElementById('clear').addEventListener('click', function() {
doChange = false;
}, false);

document.getElementById('Animate').addEventListener('click', function() {
doChange = true;
loop();
}, false);

var animObjects = [];


animObjects.push(new animCircle(ctx, 60, 70, 100, 'red', 2, 0));
animObjects.push(new animCircle(ctx, 500, 250, 110, 'blue', -0.5, 0.2));
animObjects.push(new animRectangle(ctx, 0, 90, 80,80, 'yellow', 3, 3));
animObjects.push(new animCloud(ctx,170,80,2,2));


loop();


function loop() {
if (doChange===true) {

    ctx.clearRect(0, 0, demo.width, demo.height);

    for(var i = 0, ao; ao = animObjects[i]; i++) {
        ao.update();
    }

    requestAnimationFrame(loop);

} else {
    ctx.clearRect(0, 0, demo.width, demo.height);

}
}

function animRectangle(ctx, x, y, XSize,YSize, color, dx, dy) {

var me = this;

this.x = x;
this.y = y;
this.XSize = XSize;
this.XSize = XSize;
this.color = color;
this.dx = dx;
this.dy = dy;

var bool = 0;

this.update = function() {

    if (me.x < 0 || me.x > ctx.canvas.width-80){
        me.dx = -me.dx;
    }
    if (me.y < 50 || me.y > 200){
        me.dy = -me.dy;
    }
    me.x += me.dx;
    me.y += me.dy;

    render();
}

function render() {
    ctx.beginPath();
    ctx.rect(me.x, me.y, me.XSize, me.XSize);
    ctx.closePath();
    ctx.fillStyle = me.color;
    ctx.fill();
}
return this;
}

function animCircle(ctx, x, y, r, color, stepX, stepY) {

var me = this;

this.x = x;
this.y = y;
this.radius = r;
this.color = color;
this.stepX = stepX;
this.stepY = stepY;

this.update = function() {
    me.x += me.stepX;
    me.y += me.stepY;
    if (me.x < 0 || me.x > ctx.canvas.width) me.stepX = -me.stepX;
    if (me.y < 0 || me.y > ctx.canvas.height) me.stepY = -me.stepY;

    render();
}

function render() {
    ctx.beginPath();
    ctx.arc(me.x, me.y, me.radius, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = me.color;
    ctx.fill();
}
return this;
}

function animCloud(ctx,x,y,dx,dy) {

var me = this;

this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;

this.update = function() {

    if (me.x < -150 || me.x > ctx.canvas.width-420){
        me.dx = -me.dx;
    }
    if (me.y < 50 || me.y > 200){
        me.dy = -me.dy;
    }
    me.x += me.dx;
    me.y += me.dy;


    render();
}

function render() {
    ctx.beginPath();
    ctx.moveTo(me.x+170, me.y+80);
    ctx.bezierCurveTo(130+me.x, 100+me.y, 130+me.x, 150+me.y, 230+me.x, 150+me.y);
    ctx.bezierCurveTo(250+me.x, 180+me.y, 320+me.x, 180+me.y, 340+me.x, 150+me.y);
    ctx.bezierCurveTo(420+me.x, 150+me.y, 420+me.x, 120+me.y, 390+me.x, 100+me.y);
    ctx.bezierCurveTo(430+me.x, 40+me.y, 370+me.x, 30+me.y, 340+me.x, 50+me.y);
    ctx.bezierCurveTo(320+me.x, 5+me.y, 250+me.x, 20+me.y, 250+me.x, 50+me.y);
    ctx.bezierCurveTo(200+me.x, 5+me.y, 150+me.x, 20+me.y, 170+me.x, 80+me.y);

    // complete custom shape
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.fillStyle = '#8ED6FF';
    ctx.fill();
    ctx.strokeStyle = 'blue';
    ctx.stroke();
}
return this;
}
}

Answer 1

本机应用程序正在使用的 Webview（在您的情况下，Phonegap 使用 Webview 加载您的 HTML/JS 应用程序）与您使用的浏览器不同。所以复杂的浏览器功能和性能优化在 WebView 中是不可用的。它只是一个简单的实现。

您不能对 WebView 做太多事情。您仍然可以尝试优化您的代码库，但仍然不会对性能有太大改进。

不过，好消息是，在 Android 4.4 (Kitkat) 中，Google 已将旧的 webview 替换为 chromium 驱动的 Webview。这意味着您在 chrome 浏览器中拥有的功能和性能现在也将在您的 web 视图中可用。 http://thenextweb.com/google/2013/11/02/kitkats-webview-powered-chromium-enabling-android-app-developers-use-new-html5-css-features/

Answer 2

这是另一种选择，您可能想使用 GeckoView...

https://wiki.mozilla.org/Mobile/GeckoView

它是一个用于渲染 html5 应用程序的 android 库。

Answer 3

这个问题很老，但我认为这会有所帮助。一个月前我遇到了同样的问题，我最终找到了 Crosswalk Project，它与 PhoneGap (Cordova) 合并，并将 webview 从“本机”Android 浏览器更改为基于 Chromium 的浏览器。动画在它上面运行得很漂亮。我真的建议将它用于未来的项目。