主页 / 问题 / 802669
Accepted
Дмитрий Полянин
Asked:2020-03-21 22:37:03 +0000 UTC2020-03-21 22:37:03 +0000 UTC

从正方形制作动画 SVG 背景

  • 772

有必要编写一个脚本，以随机旋转创建相似颜色的正方形背景。

背景动画，当鼠标移动时，鼠标悬停的方块变成指定的颜色，这个颜色逐渐变成方块的原色，也是随机旋转动画。

javascript

1 个回答

  1. Best Answer

    基于SVG.js库的解决方案

    /* компоненты базового цвета */
var rgb = [255,201,218];

/* получаем холст */
var svg = document.getElementById("svg1");

/* добавляем квадрат с задаными параметрами */
function AddRect(x, y, width, height) {
  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

  /* вычисляем случайную компоненту цвета близкую к базовой */
  function randomColorComponent(start,dist) {
     var rez = start + Math.floor(Math.random() * dist);
     if(rez > 255) {
       rez = 255;
     }
     return rez;
  }

  /* создаём случайный цвет близкий к базовому */
  var rgb2 = rgb.map(x => randomColorComponent(x, 30));
  var color = `rgb(${ rgb2.join(",") })`;

  rect.setAttribute("fill", color);
  /* кастомный атрибут, для восстановления цвета */
  rect.setAttribute("mycolor", color);
  rect.setAttribute("stroke", "silver");
  rect.setAttribute("x", x);
  rect.setAttribute("y", y);
  rect.setAttribute("width", width);
  rect.setAttribute("height", height);
  rect.setAttribute("class", "rect1");

  /* случайный поворот */
  var rot = Math.random() * 360;
  rect.setAttribute(
    "transform",
    " rotate(" + rot + " " + (x + width / 2) + " " + (y + height / 2) + ")"
  );

  /* вешаем обработчик */
  rect.addEventListener("mouseover", mouseOverSquare);

  /* добавляем на холст */
  document.getElementById("svg1").appendChild(rect);
}

/* обработчик наведения мыши на квадрат */
function mouseOverSquare() {
  /* получаем объект SVG.js из текущего */
  var rect1 = SVG.adopt(this);

  /* останавливаем анимацию которая могла быть запущена ранее с сохранением параметров  */
  rect1.finish();

  /* перемещаем квадрат наверх холста для большей красоты анимации */
  this.remove();
  svg.append(this);

  var rot = (Math.random() - 0.5) * 90;

  /* извлекаем цвет для возврата из кастомного атрибута */
  var color = this.getAttribute("mycolor");

  /* заполняем новым цветом */
  rect1.fill("rgb(87, 86, 255)");

  /* анимируем варщение и возвращение цвета */
  rect1.animate(1100, "-").rotate(rot).attr({
    "fill": color
  });
}

/* заполнение холста квадратами */
function FillArea() {
  var style = window.getComputedStyle(svg);

  var width = parseInt(style.width);
  var height = parseInt(style.height);

  var rectWidth = 24;
  var rectHeight = 24;

  var vxx = 27;
  var vyy = 27;

  for (var x = -7; x < width; x += vxx) {
    for (var y = -7; y < height; y += vyy) {
      AddRect(x, y, rectWidth, rectHeight);
    }
  }
}



FillArea();
    #svg1 {
  width: 100%;
  height: 175px;
  background-color: rgb(255,201,218);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"></script>

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1"></svg>

    完整示例代码 -链接

    • 8

相关问题