首页 文章

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

提问于
浏览 次
2

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

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 触发动画时，多边形就会消失，在动画期间我在控制台中出现了几个错误，如下所示：

enter image description here

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

谢谢！

UPDATE

它出于某种原因使用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>
javascript svg snap.svg

1 回答

  • 1

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

    因此，您可以通过一系列单数值设置动画，而不是为单个点的动画制作动画 . 并且单个数字不是有效的多边形 points 属性！

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

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

相关问题