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

Question

我正在尝试实现一个带有某个多边形的按钮，按下该按钮会将多边形更改为其他东西。例如按钮上的播放图标变为停止图标。理想情况下，图标应该是一个多边形，其中三个点描绘了播放符号。动画完成后，它变成了一个由四个点组成的多边形（一个正方形），描绘了停止符号。

我试过这样做：

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") 时，我将分配的点作为返回值。但是，尝试像这样分配数组最终会出错。非常感谢有关此问题的任何帮助。

Answer 1

您的代码没有出现任何错误，但是由于三角形只有 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);