Snap SVG動畫現有矩陣

我使用Snap.svg來創建一個簡單的紙牌遊戲。我從文件中加載了卡片並使用矩陣轉換將它們移動到特定位置。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);

我預期它會做什麼，但我的對象閃爍，左上角（空白基質）和動畫來定位，它應該留下來。

我在做什麼錯？我需要將該對象從某個矩陣狀態動畫到另一個（理想情況下每個對象都是同一個對象）。它有可能嗎？像我可以指定開始轉換屬性？

謝謝。

來源

2015-02-07 PipBoy

我可能不會嘗試動畫矩陣，它們通常會因各種原因而成爲問題，即使它們工作時也不會完全按照您的想法進行操作。嘗試動畫轉換字符串，它應該工作。如果沒有，發佈一個jsfiddle。 – Ian 2015-02-08 08:18:05

據伊恩的建議，我用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」）

它的工作原理！

謝謝！

來源

2015-02-10 15:01:07 PipBoy

Snap SVG動畫現有矩陣

回答

相關問題