2
Я тестирую анимацию холста HTML5 на Phonegap. сначала я запрограммировал веб-версию этой простой анимации (разные формы подпрыгивали из стороны в сторону). веб-версия работает быстро и без проблем. с другой стороны, когда я загружаю приложение, используя PhoneGap, создание анимации приложения происходит очень медленно.PhoneGap HTML медленная анимация
Я не понимаю, в чем проблема, или, может быть, 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;
}
}
Телефонный звонок просто ужасно медленный. – Ahmad
есть ли какой-либо другой способ, я могу это сделать @Ahmad –
Не могли бы вы сделать простую рабочую версию этого в jsbin.com? Я изо всех сил пытаюсь понять, что именно вы делаете. –