0

我是第一次使用 SVG 动画，我正在使用一个名为 SnapSVG 的库，它对我有很大帮助，但是我想更好地理解“变换：矩阵”无法将对象操作到我想要的选项，有没有什么工具可以可以帮我这个过程吗？

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

4

1 回答 1

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

于 2014-01-23T17:42:50.857 回答