Raphael JS -- animate .text()

views:

answers:

+3 Q:

Raphael JS -- animate .text()

So I'm using Raphael JS to try and animate.

Here's what I've tried:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;  
    <script type="text/javascript" src="http://raphaeljs.com/raphael.js"&gt;&lt;/script&gt;  
    <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>

And my text just remains at 200,200. Any thoughts on why this won't work?

+1 A:

The animate function is only capable of certain attributes, and only able to animate attributes that belong to that particular object.

A text object does not have cx or cy attributes - so your example code will not animate.

You may only translate a text object as it only has x, y and text attributes.

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

If you are trying to translate the text, use the x and y attributes like this:

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

John 2010-09-03 16:50:13

Thanks @John, moving it with {x:20, y:20} was EXACTLY what I needed to do. I didn't realize text had x/y instead of what I was using (cx cy)

2010-09-03 16:58:07

Awesome! I was worried you were trying to do a rotation and then be a bit disappointed with my answer, heehee. You are welcome!

John 2010-09-03 17:03:21

ansaurus

tags:

views:

answers:

Raphael JS -- animate .text()

related questions