SVG animations using transform matrix

Question

Is the first time I SVG animations, I'm using a library called SnapSVG that is helping me a lot however I would like to better understand the "transform: matrix" can not manipulate objects to the option I want, is there any tool that can help me this process?

Javascript:

var frame = Snap("#frame_1_1_");
var martelo = frame.select("#martillo_xA0_Image_1_");
var prego = frame.select("#cincel_xA0_Image_1_");

function downMove() {
    // animation martelo
    martelo.animate({
        transform: "t-25,-10r-30" 
    }, 700, mina.bounce);

    // animation prego
    prego.animate({
       transform: "r45,150,150" 
    }, 1000, mina.linear);
}

function upMove() {
   // animation martelo
    martelo.animate({
        transform: "t0,0r0"
    }, 700, mina.bounce);

   // animation prego
    prego.animate({
        transform: "t0,0r0"
    }, 1000, mina.linear);
}

frame.hover(downMove, upMove);

jsfiddle

Answer 1

I think you are combining them ok, it just needs some tweaking. Is there a specific part you are not understanding.

Not sure if there is a tool, but here's a bit of code I cobbled together, see if that helps you understand combining transforms.

jsfiddle http://jsfiddle.net/8R5b4/2/

s = Snap(1000, 620);


var c = s.circle( 200,200,10 );
var r = s.rect(200,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', 'opacity': 0.3 });

rclone = r.clone();
rclone2 = r.clone();
rclone3 = r.clone();
rclone4 = r.clone();
rclone5 = r.clone();

rclone.transform( 't100,100'); 
rclone2.transform( 'r20,200,200' );
rclone3.transform( 'r40,200,200' );

s.text(350,150,"rotate around 200,200");

rclone4.transform( 't100,100r20,200,200' );
rclone5.transform( 't100,100r40,200,200' );

s.text(450,250,"combined translate of 100,100 and rotate around 200,200");

For the transform string.. t=relative transform, T=absolute transform, s=relative scale, S=absolute Scale r=relative rotate, R=relative rotate

relative means it takes into account previous transforms to accumulate. Here it doesn't make much difference, but worth bearing in mind