javascript - 动画 SVG 多边形

Question

我编写了一个绘制多边形的代码:

  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', '100%');
  svg.setAttribute('height', window.innerHeight);
  document.querySelector('#bg').appendChild(svg);

for(var x = 0; x < polygons.length; x++){
  var polygon = document.createElementNS(svg.namespaceURI, 'polygon');
  polygon.setAttribute('points', polygons[0 + x]);
  polygon.setAttribute('fill', polygons[0 + x][1]);
  svg.appendChild(polygon);
}

我的带有多边形点的完整代码: http://codepen.io/anon/pen/WrqrbB

我想为这个多边形设置动画，类似于这个动画: http://codepen.io/zessx/pen/ZGBMXZ

如何为我的多边形设置动画？

Answer 1

你可以

• 调用动画函数来根据需要操纵坐标值，
• 将它们转换为字符串，例如使用.join()，
• 将生成的字符串作为其 points 属性值发送回多边形，重新绘制形状(正如您最初创建形状时所做的那样)，并且
• 具有动画功能，当完成时，使用requestAnimationFrame以合理的内置时间延迟再次调用自身。

以下代码片段给出了可以做什么的基本概念。

(请注意，我在示例中重新定义了数组polygons，因此它与您所拥有的不同，但在本示例中这样做是为了简单起见。)

var svg = document.getElementsByTagName("svg")[0];
var polygons = [], numSteps = 100, stepNum = 0;
var coords = [
  [40, 20, 80, 20, 80, 60, 40, 60],
  [140, 20, 180, 20, 160, 50]
];

for (var x = 0; x < coords.length; x++) {  
  polygons[x] = document.createElementNS(svg.namespaceURI, 'polygon');
  polygons[x].setAttribute('points', coords[x].join());
  svg.appendChild(polygons[x]);
}

function anim() {
  for (var x = 0; x < coords.length; x++) {
    coords[x] = coords[x].map(function(coord) {
      return coord + 4 * (Math.random() - 0.5);
    });
    polygons[x].setAttribute('points', coords[x].join());
    stepNum += 1;
  }
  if (stepNum < numSteps) requestAnimationFrame(anim);
}

anim();

<svg></svg>

更新 上面的代码片段通常显示了如何对多边形进行动画处理。然而，就您而言，还有一个进一步的问题。在您的 codepen 演示中，很明显您已经分别对每个多边形的点坐标进行了硬编码。因此，如果您想移动一个点，则必须为接触该点的每个多边形更新至少 2 个位置(如果不是更多位置)的坐标。

更好的方法是创建一个包含所有点的单独数组，然后相对于该数组定义每个多边形。 (这类似于有时在 3D 图形中完成事情的方式，例如 WebGL。)以下代码片段演示了这种方法。

var svg = document.getElementsByTagName("svg")[0];
var polyElems = [], numSteps = 100, stepNum = 0;
var pts = [[120,20], [160,20], [200,20], [240,20], [100,50], [140,50], [180,50], [220,50], [260,50], [120,80], [160,80], [200,80], [240,80]];
var polyPts = [[0,1,5], [1,2,6], [2,3,7], [0,4,5], [1,5,6], [2,6,7], [3,7,8], [4,5,9], [5,6,10], [6,7,11], [7,8,12], [5,9,10], [6,10,11], [7,11,12]];

for (var x = 0; x < polyPts.length; x++) {
  polyElems[x] = document.createElementNS(svg.namespaceURI, 'polygon');
  polyElems[x].setAttribute('fill', '#'+Math.floor(Math.random()*16777215).toString(16));
    // random hex color routine from http://www.paulirish.com/2009/random-hex-color-code-snippets/
  drawPolygon(x);
}

function anim() {
  pts = pts.map(function(pt) {
    return pt.map(function(coord) {
      return coord + 3 * (Math.random() - 0.5); // move each point
    });
  });
  for (var x = 0; x < polyPts.length; x++) {drawPolygon(x);}
  stepNum += 1;
  if (stepNum < numSteps) requestAnimationFrame(anim); // redo anim'n until all anim'n steps done
}

anim(); // start the animation

function drawPolygon(x) {
  var ptNums = polyPts[x];
  var currCoords = [pts[ptNums[0]], pts[ptNums[1]], pts[ptNums[2]]].join();
    // creates a string of coordinates; note that [[1,2],[3,4],[5,6]].join() yields "1,2,3,4,5,6"
  polyElems[x].setAttribute('points', currCoords);
  svg.appendChild(polyElems[x]);
}

<svg></svg>