Raphael의 프레임 속도가이 코드에서 느려지는 이유는 무엇입니까?

Question

그래서 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(); 
}); 

그것은 나에게 표시되지 않습니다 어쨌든, 그 코드의 일부가 애니메이션이 점차 느려지 발생할 것이라고, 그래서 문제를 해결하는 데 도움이 될 것입니다!

Answer 1

문제는 planet.animate() 호출에서 calculateOrbit 콜백으로 인한 것입니다. 그것은 정확하게 Rraphael에 의해 처리되지 않고 메모리 누수 또는 실행 속도 저하를 초래합니다. 당신이

setInterval(calculateOrbit, 150); 

와 라인

calculateOrbit() 

를 제거하고 교체 할 경우 원활하게 실행해야합니다.

전체 코드 :

$(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); 
});