CODEWITHSUNDEEP
animationsvgsnap.svg
JaK
JaK

Reputation: 133

Snap SVG animating existing matrix

I use Snap.svg to create a simple card game. I loaded drawed cards from file and moved them to specific location using matrix translate.

It's svg element now looks kinda like this:

<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>

However, now I'm trying to animate them to a specific position (same for all cards) using this:

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);
    }

or something like this:

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
    }

And here is my problem - when it animates, it allways first deletes the animation matrix of object and start animate from it's original location with blank matrix (where the object would be without transform attribute). For example, when I tried:

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

I expected it will do nothing, but my object blinks to the top left corner (blank matrix) and animates to position where it should stay.

What am I doing wrong? I need to animate that object from some matrix state to another (ideally the same one for every object). Is it somehow possible? Like I can specify start transform attribute somehow?

Thanks.

Upvotes: 0

Views: 1862

Answers (1)

JaK
JaK

Reputation: 133

According to Ian's advice, I've used toTransformString:

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

but of course, I had to use it in previous transformations too using

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

However, getting local matrix still works as expected. Animation now works and I can use matrix.translate() - to relative move the object or object.animate({transform: "t100,100"}, time).

I also can modify a,b,c,d,e,f attributes of the matrix directly. (or use transform: "T100,100")

It works!

Thanks!

Upvotes: 0

Related Questions