单独为多边形的每个点设置动画-Java 学习之路

我有一个网站菜单，由多个多边形组成，用户可以点击它 . 此外，多边形共享一些节点 . 到目前为止一直很好（见下面的代码） .

现在，我想以这样的方式为这些多边形设置动画，使它们在缓慢无限的循环中动态地改变它们的形状 . 为此，我需要单独为每个节点设置动画 . 我想让节点沿着路径（例如一个小圆圈）移动，每个路径以其各自的速度移动 .

有没有办法只使用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>

非常感谢您的帮助！

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>

回复于 2024-04-19T09:59:46+08:00

单独为多边形的每个点设置动画

1 回答

相关问题