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的建议，我已经习惯了TransString：

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”}，时间）。

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

有效！

谢谢！

Snap SVG动画现有矩阵

1 个答案: