如何通过动画更改Snap.svg中多边形的点?

时间:2014-03-15 21:29:58

标签: javascript svg snap.svg

我正在尝试在其上实现一个带有某个多边形的按钮,按下该按钮会将多边形更改为其他内容。例如,按钮上的播放图标更改为停止图标。理想情况下,图标应该是一个多边形,其中三个点描绘了游戏符号。在动画之后,它变成一个四点(一个正方形)的多边形,描绘了停止符号。

我试过这样做:

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

点击按钮后,我调用sqrFunc并再次单击它,我调用triFunc。我尝试将不同的点数组分配给“点”,因为当我查询tri.attr(“points”)时,我将指定的点作为返回值。但是,尝试分配这样的数组会导致错误。非常感谢任何有关此问题的帮助。

1 个答案:

答案 0 :(得分:7)

我的代码没有任何错误,但转换不会发生,因为三角形只有3个点。

我用

修复了它

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

试试这个

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

另一种方法是使用路径

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