捕捉 SVG 动画现有矩阵答案

【问题标题】：Snap SVG animating existing matrix捕捉 SVG 动画现有矩阵
【发布时间】：2015-04-07 21:53:10
【问题描述】：

我使用Snap.svg 来创建一个简单的纸牌游戏。我从文件中加载绘制的卡片并使用矩阵转换将它们移动到特定位置。

它的 svg 元素现在看起来有点像这样：

<g id="card11" inkscape:label="#g3908" transform="matrix(1.5621,0,0,1.5621,625.1085,529.3716)" cardposition="4" style="visibility: visible;" class="card inhand hand-4 ofplayer1">...</g>

但是，现在我正在尝试使用以下方法将它们设置为特定位置（所有卡片都相同）：

function animateTo(object, x, y, scaleX, scaleY, time) {
        var matrix = object.transform().localMatrix;
        var added = new Snap.Matrix();
        added.translate(x, y);
        added.scale(scaleX, scaleY);
        added.add(matrix);
        object.animate({transform: added}, time);
    }

或类似的东西：

function animateTo(object, x, y, scaleX, scaleY, time) {
        object.animate({transform: "t100,100"}, time);//this one I tried to use to understand how snap animations works
    }

这是我的问题 - 当它动画时，它总是首先删除对象的动画矩阵并从它的原始位置开始动画，并使用空白矩阵（对象将没有变换属性）。例如，当我尝试：

var matrix = object.transform().localMatrix;
object.animate({transform: matrix}, time);

我预计它不会做任何事情，但我的对象闪烁到左上角（空白矩阵）并动画到它应该停留的位置。

我做错了什么？我需要将该对象从某个矩阵状态设置为另一个（理想情况下每个对象都相同）。有可能吗？像我可以以某种方式指定启动变换属性吗？

谢谢。

【问题讨论】：

我可能不会尝试为矩阵制作动画，它们通常会由于各种原因而成为问题，并且即使它们起作用，也不会完全按照您的想法进行。尝试为转换字符串设置动画，但它应该可以工作。如果没有，请发布一个 jsfiddle。

标签： animation svg snap.svg

【解决方案1】：

根据伊恩的建议，我已经习惯了toTransformString：

object.animate({transform: matrix.toTransformString()}, time);

当然，我也必须在以前的转换中使用它

object.attr({transform: added.toTransformString()});//this
//object.transform(added);//instead of this

但是，获取本地矩阵仍然可以按预期工作。动画现在可以工作，我可以使用 matrix.translate() - 相对移动对象或 object.animate({transform: "t100,100"}, time)。

我也可以直接修改矩阵的a,b,c,d,e,f属性。（或使用变换：“T100,100”）

有效！

谢谢！

【讨论】：