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

Native应用程序正在使用的Webview（在您的情况下，Phonegap使用Webview加载您的HTML / JS应用程序）与您使用的浏览器不同。因此，WebView中不提供复杂的浏览器功能和性能优化。它只是一个裸骨实现。

您无法对WebView做很多事情。您仍然可以尝试优化您的代码库，这仍然无法在性能方面带来太多改进。

好消息是，在Android 4.4（Kitkat）中，Google已经用Chrome驱动的Webview取代了旧的webview。这意味着您在Chrome浏览器中拥有的功能和性能现在也可以在您的webview中使用。 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

这个问题很老但我认为这可能会有所帮助。我在一个月前遇到了同样的问题，最后我找到了与PhoneGap（Cordova）合并的Crosswalk Project，并从＆＃34; native＆＃34;更改了webview。 Android浏览器以Chromium为基础。动画在它上面运行得非常漂亮。我真的建议将它用于未来的项目。

PhoneGap HTML慢动画

3 个答案: