Крутящееся колесо SVG

#javascript #svg #анимация

Необходимо сделать крутящийся круг из секторов.

В каждом секторе, а так же в центре показывается свой фон.



Есть два варианта, устроит любой:


Количество секторов задаётся константой в JavaScript, которую можно настроить (посложнее,
но более интересно).
Решение с фиксированным количеством секторов.


Необходимо сделать решение не только технически верное, но и что бы смотрелось красиво.

Что бы не было мыслей что я на халяву хочу получить готовую работу, поясняю, что
это задача для освоения технологий, которые мы делаем в SVG чате.
    

Ответы

Ответ 1

Смотреть желательно раскрыв на всю страницу.

Расчёт секторов делается через JavaScript.



/* картинки для анимации  */
var images = ["https://i.stack.imgur.com/SaKBd.jpg", "https://i.stack.imgur.com/cyQar.jpg",
"https://i.stack.imgur.com/gzQrR.jpg", "https://i.stack.imgur.com/cyQar.jpg", "https://i.stack.imgur.com/1KW4v.jpg"];

var svg = document.getElementById("svg");
var all = document.getElementById("all");
var svgNS = "http://www.w3.org/2000/svg";

/* шаблон анимации поворота */
var anima = ``;

/* шаблон картинки из которой будет обрезаться сектор */
var image = ``;

/* делаем все сектора, количество секторов равно количеству картинок */
MakeAllArks(40, 100, images.length);

/* функция расчёта всех секторов */
function MakeAllArks(dis1, dis2, number) {
  var angle = (2 * Math.PI) / number;
  for (var i = 0; i < number; i++) {
    MakeArc(dis1, dis2, i * angle, angle, i);
  }
}

/* функция расчёта сектора */
function MakeArc(dis1, dis2, angleStart, angle, number) {
  var sumAngle = angleStart + angle;

  /* далаем расчёт основных точек сектора на основе функции поворота */
  var point1 = RotateVector({
    x: 0,
    y: dis1
  }, angleStart);
  var point2 = RotateVector({
    x: 0,
    y: dis2
  }, angleStart);
  var point3 = RotateVector({
    x: 0,
    y: dis2
  }, sumAngle);
  var point4 = RotateVector({
    x: 0,
    y: dis1
  }, sumAngle);

  /* создаём элемент пути */
  var path = document.createElementNS(svgNS, "path");

  /* путь сектора на основе расчёта точек */
  var d = `M ${point1.x} ${point1.y} L ${point2.x} ${point2.y} A ${dis2} ${dis2}
0 0 1 ${point3.x} ${point3.y} L ${point4.x} ${point4.y} A ${dis1} ${dis1} 0 0 0 ${point1.x}
${point1.y}`;

  path.setAttribute("d", d);

  /* добавляем анимацию поворота */
  path.innerHTML = anima;

  /* создаём вырезку с путём */
  var clipPath = document.createElementNS(svgNS, "clipPath");
  clipPath.setAttribute("id", "cp" + number);
  clipPath.appendChild(path);

  /* добавляем вырезку на холст */
  all.appendChild(clipPath);

  /* создаём картинку которая будет показана по вырезке на основе шаблона */
  var group = document.createElementNS(svgNS, "g");
  group.innerHTML = image.replace("[path]", images[number]).replace("[number]", number);

  /* добавляем картинку на холст */
  svg.appendChild(group);
}

/* функция поворота вектора с помощью матрицы поворота */
function RotateVector(vector, angle) {
  var cosa = Math.cos(angle);
  var sina = Math.sin(angle);
  var rez = {
    x: vector.x * cosa - vector.y * sina,
    y: vector.x * sina + vector.y * cosa
  };
  return rez;
}










Ответ 2

Анимация вращения колеса со смещением фонов секторов:



path,
circle {
  stroke: black;
}

.p1 {
  fill: #d3dd00;
}

.p2 {
  fill: #d30000;
}

.p3 {
  fill: #682db4;
}

.p4 {
  fill: #60dd00;
}

.p5 {
  fill: #c9145e;
}





P.S. Вышло не слишком ровным, если присмотреться:)