Snap SVG 动画现有矩阵

Question

我使用 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);

我原以为它什么都不做，但我的对象闪烁到左上角（空白矩阵）并动画到它应该停留的位置。

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

谢谢。

Answer 1

根据Ian的建议，我使用了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"）

有效！

谢谢！

Snap SVG 动画现有矩阵

Snap SVG animating existing matrix

animation

svg

snap.svg