How to change the points of a polygon in Snap.svg through animation?

Question

I'm trying to implement a button with a certain polygon on it, which when pressed changes the polygon to something else. For example the play icon on the button changing to stop icon. Ideally the icon should be a polygon with three points depicting the play symbol. After animation it turns into a polygon of four points(A square) depicting the stop symbol.

I tried doing it this way:

var paper = Snap('svg');
var tpts = [100,100,100,130,120,115];
var sqpts = [100,100,100,130,130,130,130,100];
var tri = paper.polygon(sqpts);
tri.attr({
    id:"tri",
    fill:"#555555"
});

sqrFunc = function(){
    tri.animate({"points":sqpts},1000,mina.linear);
}
triFunc = function(){
    tri.animate({"points":tpts},1000,mina.linear);
}

On clicking the button once I call sqrFunc and on clicking it again I call triFunc. I tried assigning different point arrays to "points" because when I query tri.attr("points") I get the assigned points as return value. However, trying to assign the arrays like this ends up in errors. Any help regarding this problem is greatly appreciated.

Answer 1

I don't get any error with your code, however the tranformation does not happen as wished because the triangle has only 3 points.

I fixed it with

var tpts = [100,100,100,100,100,130,120,115];

try this

var paper = Snap('svg');
var tpts = [100,100,100,100,100,130,120,115];
var sqpts = [100,100,100,130,130,130,130,100];

var tri = paper.polygon(tpts);
tri.attr({
    id:"tri",
    fill:"#555555"
});

sqrFunc = function(){
    tri.animate({"points":sqpts},1000,mina.linear);
}
triFunc = function(){
    tri.animate({"points":tpts},1000,mina.linear);
}

setTimeout(sqrFunc, 200);
setTimeout(triFunc, 1200);

another method is to use paths

var paper = Snap('svg');
var tri = paper.path("M 10 10, L 10 50, L 50 25, Z");
tri.attr({
    id:"tri",
    fill:"#555555"
});

sqrFunc = function(){
    tri.animate({d:"M 10 10, L 10 50, L 50 50, L50 10,Z"},1000,mina.linear);
}
triFunc = function(){
    tri.animate({d:"M 10 10, L 10 50, L 50 25, Z"},1000,mina.linear);
}
setTimeout(sqrFunc, 200);
setTimeout(triFunc, 1200);