Question

Hi I am following this tutorial found on this page:
http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

Here is the code I am testing:

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
tetronimo.attr(
    {
        gradient: '90-#526c7a-#64a0c1',
                    rotation: -90,
        stroke: '#3b4449',
        'stroke-width': 10,
        'stroke-linejoin': 'round'
    }
);

tetronimo.animate({rotation: 360, 'stroke-width': 1}, 2000, 'bounce', function() {
/* callback after original animation finishes */
this.animate({
    rotation: -90,
    stroke: '#3b4449',
    'stroke-width': 10
}, 1000);
    });

}

The animation works for the stroke width, but not for the rotation. After some research, I found out that the “rotation” attribute is no longer supported in version 2. So I have two options:

1) Figure out an alternate way to reach the same goal

2) Find a copy of the Raphael V1 library

Can anyone help me with any of those options (my preference would go for option 1).

Thanks!

Answer 1

You need to use transform method now in v2. Its not too different, see this fiddle:

http://jsfiddle.net/58yqW/3/

    var paper = new Raphael(document.getElementById('canvas'), 500, 500);
    var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
    tetronimo.attr(
      {
        gradient: '90-#526c7a-#64a0c1',
        'transform':"r-90",
        stroke: '#3b4449',
        'stroke-width': 10,
        'stroke-linejoin': 'round'
      }
    );

    tetronimo.animate({'transform':"r360", 'stroke-width': 1}, 2000, 'bounce',       function() {
    this.animate({
        'transform':"r-90",
        stroke: '#3b4449',
        'stroke-width': 10
       }, 1000);
    });

I don’t know the exact requirements of your animation, but you can see that is does rotate etc. One thing to note is that you can use R-90 and r-90, review the docs for element transform.