使用 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 中无效：

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

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

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

Answer 1

Snap.svg 动画函数可以接受一个值数组，它会一步一步地通过它们进行动画处理。因此，它不会自动将您的 endPoints 数组转换为字符串，就像您使用 .attr() 函数设置 points 属性添加到您的 startPoints 数组。

因此，您不是对单个点串进行动画处理，而是对一系列单个数值进行动画处理。并且单个数字不是有效的多边形 points 属性！

要使其正常工作，您必须将 endPoints 数组显式转换为字符串。您可以通过调用数组的 toString() 方法来做到这一点，如下所示：

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

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

Animating points in a polygon with Snap.svg

javascript

svg

snap.svg