2010-09-03 10 views
9

Używam Raphael JS, aby spróbować i animate.Raphael JS - animacja .tekst()

Oto co próbowałem:

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

A mój tekst tylko pozostaje na 200,200. Wszelkie przemyślenia na temat tego, dlaczego to nie zadziała?

Odpowiedz

5

Funkcja animacji jest zdolna tylko do określonych atrybutów i może animować atrybuty, które należą do danego obiektu.

Obiekt tekstowy nie ma atrybutów cx ani cy - więc przykładowy kod nie będzie animowany.

Możesz tłumaczyć tylko obiekt tekstowy, ponieważ ma tylko atrybuty x, yi tekstowe.

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

Jeśli próbujesz przetłumaczyć tekst, użyj xiy atrybuty takiego:

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

Dzięki @John, przesuwając go {x: 20 y: 20} było DOKŁADNIE to, co musiałem zrobić. Nie wiedziałem, że tekst ma x/y zamiast tego, czego używałem (cx cy) – Incognito

+0

Awesome! Martwiłem się, że próbujesz zrobić rotację, a potem będziesz trochę rozczarowany moją odpowiedzią, heehee. Zapraszamy! – John