2010-09-03 11 views
9

Así que estoy usando Raphael JS para probar y animate.Raphael JS - .text animado()

Aquí es lo que he intentado:

<!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> 

Y mi texto simplemente se mantiene en 200.200. ¿Alguna idea sobre por qué esto no funcionará?

Respuesta

5

La función animada solo es capaz de ciertos atributos, y solo puede animar atributos que pertenecen a ese objeto en particular.

Un objeto de texto no tiene atributos cx o cy, por lo que su código de ejemplo no se animará.

Solo puede traducir un objeto de texto ya que solo tiene atributos x, y y de texto.

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

Si usted está tratando de traducir el texto, utilice el X y atributos Y como esto:

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

Gracias @ John, moviéndolo con {x: 20, y: 20} era EXACTAMENTE lo que necesitaba hacer. No me di cuenta de que el texto tenía x/y en lugar de lo que estaba usando (cx cy) – Incognito

+0

¡Impresionante! Me preocupaba que estuvieras tratando de hacer una rotación y luego estar un poco decepcionado con mi respuesta, jejeje. ¡De nada! – John

Cuestiones relacionadas