Question

我是第一次使用SVG动画，我正在使用一个名为SnapSVG的库，这对我帮助很大但是我想更好地理解“transform：matrix”无法操纵对象到我想要的选项，是否有任何可以帮助我这个过程的工具？

使用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

我认为你把它们组合好了，只需要一些调整。是否有一个你不理解的具体部分。

不确定是否有工具，但这里有一些拼凑在一起的代码，看看是否有助于您理解组合变换。

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

对于转换字符串.. t =相对变换，T =绝对变换，s =相对尺度，S =绝对尺度 r =相对旋转，R =相对旋转

relative意味着它会考虑先前的变换来累积。这里没有太大的区别，但值得记住

使用变换矩阵的SVG动画

1 个答案: