Question

我有一个网站菜单，其中包含多个多边形，用户可以单击它们。此外，多边形共享一些节点。到目前为止一切顺利（请参见下面的代码）。

现在，我想对这些多边形进行动画处理，使它们以缓慢而无尽的循环动态改变其形状。为此，我需要分别为每个节点设置动画。我想到让节点沿着一条路径（例如一个小圆圈）移动，每个节点以其各自的速度移动。

是否只有通过使用SVG / CSS才能做到这一点？还是我需要使用js或snap寻找解决方案？由于菜单是网页的核心功能部分，因此我希望使其尽可能简单和简洁。

这是一个包含两个多边形的工作示例，我从this thread复制了该多边形。

polygon {
  stroke-width: 1;
  stroke: red;
  fill: transparent;
}
polygon:hover {
  fill: red;
}

<svg viewBox="0 0 999 799">
  <polygon points="445,161 345,174 500,10" />

  <polygon points="445,161 345,174 500,270" />
</svg>

下面的代码片段显示了到目前为止我提出的唯一的移动单个节点的方法。不幸的是，它需要所有其他点的坐标。由于节点是在各个多边形之间共享的，因此该解决方案对我不起作用。

<polygon points="" fill="red">
 <animate attributeName="points" dur="1s" fill="freeze"
          from="0,0, 0,100, 100,100"
          to="0,0, 0,100, 100,50"/>
</polygon>

非常感谢您的帮助！

Answer 1

我将为此使用javascript，并使用一个点数组。然后，我要对这些点的位置进行动画处理。您可以使用这些点绘制多边形。请参阅我的代码中的函数function resetPoints()。我希望这就是您要的。

let points = [
  {x:445,y:161,a:.7},
  {x:345,y:147,a:2.1},
  {x:500,y:10,a:3.9},
  {x:500,y:270,a:5.2}
]

let r = 20;// the radius of rotation. In this case is a unique value. It may be a different value for every point
let speed = .01;//the speed of rotation. In this case is a unique value. It may be a different value for every point 


//get center rotation
points.forEach(p=>{
  p.c = {};
  let a = 2*Math.PI - p.a;//angle
  p.c.x = p.x + r*Math.cos(a);
  p.c.y = p.y + r*Math.sin(a);
});



//resetPoints();

function Frame(){
  requestAnimationFrame(Frame)
  points.forEach(p=>{
    p.a += speed;
    p.x = p.c.x + r*Math.cos(p.a);
    p.y = p.c.y + r*Math.sin(p.a);
  });
  
  resetPoints();
}

Frame();

// a function to draw the polygons in base of the points

function resetPoints(){
  let pts1 = `${points[0].x}, ${points[0].y} 
            ${points[1].x}, ${points[1].y} 
            ${points[2].x}, ${points[2].y}`
  let pts2 = `${points[0].x}, ${points[0].y} 
            ${points[1].x}, ${points[1].y} 
            ${points[3].x}, ${points[3].y}`

a.setAttributeNS(null,"points",pts1);
b.setAttributeNS(null,"points",pts2);
}

polygon {
  stroke-width: 1;
  stroke: red;
  fill: transparent;
}
polygon:hover {
  fill: red;
}

<svg viewBox="0 0 999 799">
  <polygon id="a" points="445,161 345,174 500,10" />

  <polygon id="b" points="445,161 345,174 500,270" />
</svg>

分别对多边形的每个点进行动画处理

1 个答案: