Utilisation de Raphael JS pour faire flotter des formes autour de l'écran

Question

Je travaille sur des formes flottant au hasard autour de l'écran. Finalement, ils vont interagir les uns avec les autres, ainsi que des fonctions onclick. Je peux obtenir les cercles à afficher à l'écran, mais je n'arrive pas à les faire bouger. Il semble que la fonction .animate() n'est pas ce dont j'ai besoin ici.

Est-ce que quelqu'un sait comment j'irais à ce sujet?

Voici ce que j'ai:

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

il pourrait travailler avec Animate(). Si par exemple vous ajoutez ceci à la fonction ci-dessus:

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

vos cercles volent autour. Bien sûr, il reste encore un long chemin à parcourir pour les faire vraiment flotter ou même interagir, mais c'est peut-être un point de départ.