Анимировать каждую точку многоугольника индивидуально - PullRequest
Новая
       35

Анимировать каждую точку многоугольника индивидуально

0 голосов
/ 09 декабря 2018

У меня есть сайт-меню, состоящее из нескольких полигонов, по которым пользователь может щелкнуть.Кроме того, полигоны разделяют некоторые узлы.Пока все хорошо (см. Код ниже).

Теперь я хотел бы анимировать эти полигоны таким образом, чтобы они динамически изменяли свою форму в медленном и бесконечном цикле.Для этого мне нужно анимировать каждый узел в отдельности.Я думал о том, чтобы позволить узлам двигаться по пути (например, по маленькому кругу), каждый со своей индивидуальной скоростью.

Есть ли способ сделать это, используя только 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>

Большое спасибо за вашу помощь!

1 Ответ

0 голосов
/ 10 декабря 2018

Я бы использовал для этого 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>
...