Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 942
Pradyumna Avatar asked Mar 15 '14 21:03

Pradyumna


Video Answer


1 Answers

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);
like image 148
Hssen Avatar answered Oct 12 '22 07:10

Hssen