2010-09-03 7 views
9

Donc j'utilise Raphael JS pour essayer et animate.Raphael JS - animate .text()

Voici ce que j'ai essayé:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script> 
    <script type="text/javascript"> 
     $(window).load(function() { 
      var R = Raphael("holder", 640, 480); 
      var test = R.text(200, 200, "Test string"); 
      test.animate({cx: 20, cy: 20}, 2000); 

     }); 
    </script> 
</head> 
    <body> 
     <div id="holder"> 
     </div> 
    </body> 
</html> 

Et mon texte reste juste à 200200. Des pensées sur pourquoi cela ne fonctionnera pas?

Répondre

5

La fonction d'animation est seulement capable de certains attributs, et seulement capable d'animer les attributs qui appartiennent à cet objet particulier.

Un objet texte n'a pas d'attributs cx ou cy - votre code d'exemple ne s'anime donc pas.

Vous ne pouvez traduire qu'un objet texte, car il n'a que des attributs x, y et de texte.

http://raphaeljs.com/reference.html#text

Si vous essayez de traduire le texte, utilisez les attributs x et y comme ceci:

test.animate({x:20, y:20}, 2000); 
+0

Merci @John, en le déplaçant avec {x: 20, y: 20} était EXACTEMENT ce que j'avais besoin de faire. Je n'ai pas réalisé que le texte avait x/y au lieu de ce que j'utilisais (cx cy) – Incognito

+0

Génial! J'étais inquiet que tu essayais de faire une rotation et que tu sois un peu déçu de ma réponse, heehee. Je vous en prie! – John