Raphael JS를 사용하여 화면 주위에 도형을 뜨게합니다.

Question

나는 무작위로 화면 주위를 떠 다니는 모양을 만들고 있습니다. 결국 그들은 onclick 기능뿐만 아니라 서로 상호 작용할 것입니다. 화면에서 렌더링 할 원을 얻을 수는 있지만 움직일 수는 없습니다. .animate() 함수는 여기에 필요한 것이 아닙니다.

아무도 내가 이것에 대해 어떻게 알 수 있습니까?

jQuery(function ($) { 

    // Global Vars 
    var items = 30, 
    width = window.innerWidth, 
    height = window.innerHeight, 
    paper = Raphael("galaxy", width, height), 
    frameRate = 100, 
    i, 
    galaxy = [], 
    star = [], 
    stars = []; 

    // Do some variants for each item 
    for (i = 0; i<items; i++) { 
     stars[i] = { 
      x : Math.random() * width, 
      y : Math.random() * height, 
      r : Math.random()*255, 
      g : Math.random()*255, 
      b : Math.random()*255, 
      size : Math.random() * 20 
     } 
    } 

    // Creates canvas 320 × 200 at 10, 50 
    // Creates circle at x = 50, y = 40, with radius 10 
    for (i = 0; i<items; i++) { 
     star[i] = paper.circle(stars[i].x, stars[i].y, stars[i].size); 
     star[i].attr("fill", "rgb("+stars[i].r+", "+stars[i].g+", "+stars[i].b+")"); 
     star[i].attr("stroke", "none"); 

    }//end for 

}); 

Answer 1

는 애니메이션과 함께 일할 수() : 여기

내가 가진 것입니다. 예 : 위의 함수에 다음을 추가하십시오.

(function anim() { 
    for (i = 0; i<items; i++) { 
     newX = Math.random() * width; 
     newY = Math.random() * height; 
     star[i].animate({cx: newX, cy: newY}, 1000); 
    } 
    setTimeout(anim, 1000); 
})(); 

원이 날아 다니십시오. 물론 그것들은 정말로 떠 다니거나 심지어 상호 작용하게하는 데 아직 먼 길이지만, 아마도 출발점 일 것입니다.