使用变换矩阵的 SVG 动画答案

【问题标题】：SVG animations using transform matrix使用变换矩阵的 SVG 动画
【发布时间】：2015-12-02 11:34:09
【问题描述】：

我是第一次使用 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

【问题讨论】：

标签： javascript css animation svg snap.svg

【解决方案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 意味着它考虑到以前的转换来累积。在这里并没有太大区别，但值得牢记

【讨论】：