2010-09-03 2 views
9

Так что я использую Raphael JS, чтобы попробовать и animate.Raphael JS - animate .text()

Вот что я пробовал:

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

И мой текст только остается на 200,200. Любые мысли о том, почему это не сработает?

ответ

5

Функция анимации способна только к определенным атрибутам и только способна анимировать атрибуты, относящиеся к этому конкретному объекту.

Текстовый объект не имеет атрибутов cx или cy, поэтому ваш примерный код не будет анимироваться.

Вы можете только перевести текстовый объект, поскольку он имеет только атрибуты x, y и text.

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

Если вы пытаетесь перевести текст, используйте х и у атрибуты вроде этого:

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

Благодаря @John, сдвинув его с {х: 20, у: 20} было ТОЧНО, что мне нужно было сделать. Я не понял, что текст имел x/y вместо того, что я использовал (cx cy) – Incognito

+0

Awesome! Я беспокоился, что вы пытаетесь сделать поворот, а затем немного разочарован моим ответом, хи-хи. Добро пожаловать! – John

 Смежные вопросы

  • Нет связанных вопросов^_^