CODEWITHSUNDEEP
javascriptandroidhtmlcordovahtml5-canvas
Karish Karish
Karish Karish

Reputation: 269

PhoneGap HTML slow animation

i am testing an HTML5 canvas animation on Phonegap. first i programmed a web version of this simple animation (different shapes bouncing from side to side). the web version works fast and without any problems. on the other hand once i download the app using PhoneGap build the animation of the app is very slow.

i don't understand what is the problem, or maybe PhoneGap can not handle canvas animation.

any suggestions

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;
}
}

Upvotes: 2

Views: 2127

Answers (3)

Martavis P.
Martavis P.

Reputation: 1838

This question is old but I thought this could help. I ran into the same issue a month ago and I ended up finding the Crosswalk Project which merges with PhoneGap (Cordova) and changes the webview from the "native" Android browser to a Chromium-based one. Animations run beautifully on it. I really suggest using it for future projects.

Upvotes: 0

Tamillharasan
Tamillharasan

Reputation: 460

Webview that is being used by the Native apps (in your case Phonegap uses Webview to load your HTML/JS app) is not the same as the browsers you use. So the sophisticated browser features and performance optimizations are not available in WebView. It is simply a bare bone implementation.

You can't do much about the WebView. You could still try and optimize your code base which would still not give much improvement in performace.

Good news though, is that in Android 4.4 (Kitkat) Google has replaced the older webview with chromium powered Webview. This means that you have features and performance that you had in your chrome browser will now be available in your webview also. http://thenextweb.com/google/2013/11/02/kitkats-webview-powered-chromium-enabling-android-app-developers-use-new-html5-css-features/

Upvotes: 3

StaleMartyr
StaleMartyr

Reputation: 778

Heres an alternative, you might want to use GeckoView...

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

It is an android library for rendering html5 apps.

Upvotes: 0

Related Questions