Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 562
Incognito Avatar asked Sep 03 '10 15:09

Incognito


1 Answers

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);
like image 163
John Avatar answered Sep 23 '22 13:09

John