Почему частота кадров Рафаэля замедляется на этом коде? - PullRequest
Новая
       15

Почему частота кадров Рафаэля замедляется на этом коде?

2 голосов
/ 29 апреля 2010

Так что я просто делаю базовый симулятор орбиты с использованием Raphael JS, где я рисую один круг как «звезду», а другой круг как «планету». Кажется, что он работает просто отлично, с одной загвоздкой, которая по мере продолжения симуляции снижает частоту кадров до тех пор, пока орбитальное движение не перестанет казаться плавным. Вот код (примечание: использует jQuery только для инициализации страницы): 

$(function() {
    var paper = Raphael(document.getElementById('canvas'), 640, 480);
    var star = paper.circle(320, 240, 10);
    var planet = paper.circle(320, 150, 5);
    var starVelocity = [0,0];
    var planetVelocity = [20.42,0];
    var starMass = 3.08e22;
    var planetMass = 3.303e26;
    var gravConstant = 1.034e-18;
    function calculateOrbit() {
        var accx = 0;
        var accy = 0;
        accx = (gravConstant * starMass * ((star.attr('cx') - planet.attr('cx')))) / (Math.pow(circleDistance(), 3));
        accy = (gravConstant * starMass * ((star.attr('cy') - planet.attr('cy')))) / (Math.pow(circleDistance(), 3));
        planetVelocity[0] += accx;
        planetVelocity[1] += accy;
        planet.animate({cx: planet.attr('cx') + planetVelocity[0], cy: planet.attr('cy') + planetVelocity[1]}, 150, calculateOrbit);
        paper.circle(planet.attr('cx'), planet.attr('cy'), 1); // added to 'trace' orbit
    }
    function circleDistance() {
        return (Math.sqrt(Math.pow(star.attr('cx') - planet.attr('cx'), 2) + Math.pow(star.attr('cy') - planet.attr('cy'), 2)));
    }
    calculateOrbit();
});

В любом случае, мне не кажется, что какая-либо часть этого кода приведет к постепенному замедлению анимации до ползания, поэтому любая помощь в решении проблемы будет оценена по достоинству!

1 Ответ

3 голосов
/ 19 мая 2010

Проблема с обратным вызовом для вычисленияOrbit в вашем вызове planet.animate (). Он не обрабатывается Raphael правильно и вызывает утечку памяти или замедление выполнения. если удалить его и заменить строку 

calculateOrbit()

с 

setInterval(calculateOrbit, 150);

должно работать без сбоев.

полный код: 

$(function() {
var paper = Raphael(document.getElementById('canvas'), 640, 480);
var star = paper.circle(320, 240, 10);
var planet = paper.circle(320, 150, 5);
var starVelocity = [0,0];
var planetVelocity = [20.42,0];
var starMass = 3.08e22;
var planetMass = 3.303e26;
var gravConstant = 1.034e-18;
function calculateOrbit() {
    var accx = 0;
    var accy = 0;
    accx = (gravConstant * starMass * ((star.attr('cx') - planet.attr('cx')))) / (Math.pow(circleDistance(), 3));
    accy = (gravConstant * starMass * ((star.attr('cy') - planet.attr('cy')))) / (Math.pow(circleDistance(), 3));
    planetVelocity[0] += accx;
    planetVelocity[1] += accy;
    planet.animate({cx: planet.attr('cx') + planetVelocity[0], cy: planet.attr('cy') + planetVelocity[1]}, 150);
    paper.circle(planet.attr('cx'), planet.attr('cy'), 1); // added to 'trace' orbit
}
function circleDistance() {
    return (Math.sqrt(Math.pow(star.attr('cx') - planet.attr('cx'), 2) + Math.pow(star.attr('cy') - planet.attr('cy'), 2)));
}
setInterval(calculateOrbit, 150);
});
...