使用Snap.svg为​​多边形中的点设置动画

Question

我尝试使用以下代码为多边形中的点设置动画：

var lineWeight = 2.5,
    startPoints = [25,18,54,24,35,38,42,51,12,34,23,52,25,18],
    endPoints = [15,38,54,24,35,38,42,51,12,34,23,52,25,18];

var logo = Snap('.logo');

var p1 = logo.polygon().attr({
    points: startPoints,
    fill: 'none',
    stroke: 'white',
    strokeWidth: lineWeight,
    strokeLinejoin: 'round'
});

setTimeout(function () {
    p1.animate({
        points: endPoints
    }, 2000, mina.elastic);
}, 2000);

当setTimeout触发动画时，多边形会消失，在动画期间我在控制台中会出现几个错误，如下所示：

看起来动画正在错误地更新points属性的值。知道为什么，以及我如何解决它？

谢谢！

更新

出于某种原因使用Snap.svg v3.0时有效，但不是v4.1：

＆＃13;

＆＃13;

(function($){
  var lineWeight = 2.5,
    startPoints = [25,18,54,24,35,38,42,51,12,34,23,52],
    endPoints = [40,10,54,24,35,38,42,51,12,34,23,52];

  var logo = Snap('.logo');

  var p1 = logo.polygon().attr({
    points: startPoints,
    fill: 'none',
    stroke: 'white',
    strokeWidth: lineWeight,
    strokeLinejoin: 'round'
  });

  setTimeout(function () {
    p1.animate({
       points: endPoints
    }, 1000, mina.elastic);
  }, 2000);
 })();

＆＃13;

.logo {
  background: green;
  height: 68px;
  left: 10px;
  position: absolute;
  top: 10px;
  width: 68px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg class="logo"></svg>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Snap.svg动画函数可以获取一组值，并逐步对它们进行动画处理。因此，不会自动将endPoints数组转换为字符串，就像使用.attr()函数设置{{1您的points数组的属性。

因此，您可以通过一系列单数值设置动画，而不是将动画设置为单个字符串。并且单个数字不是有效的多边形startPoints属性！

要使其正常工作，您必须将points数组显式转换为字符串。您可以通过调用数组的endPoints方法来完成此操作，如下所示：

toString()