分别为多边形的每个点设置动画

Question

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

现在，我想以某种方式为这些多边形设置动画，以便它们以缓慢且无限循环的方式动态改变它们的形状。为此，我需要单独为每个节点设置动画。我想到了让节点沿着一条路径（例如一个小圆圈）移动，每个节点都以自己的速度移动。

有没有办法只使用 SVG/CSS 来做到这一点？还是需要用js或者snap寻找解决方案？由于菜单是网页的核心功能部分，我希望它尽可能简单和普通。

这是我从复制的两个多边形的工作示例。

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>

分别为多边形的每个点设置动画

Animate each point of a polygon individually

animation

svg

polygon

snap.svg