Создание и анимирование полигонов SVG

Sep 13, 2025

Инструкции

В этом руководстве мы будем создавать ассортимент изображений из треугольников SVG, и настроив анимированный переход от одного изображения на другой на клик. Это будет выглядеть что-то вроде Лица силы интернет сайт. Эти анимации могут действительно добавить интерес к сайту, особенно Страница посадки , а также улучшение Пользовательский опыт Отказ Если у вас есть сложный сайт для обслуживания, вам понадобится супер веб хостинг служба. строить что-то менее сложное? А. Строитель сайта может сделать работу.

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

Мы собираемся извлечь все координаты в точки Атрибут, получите цветной цвет полигона, а затем добавляют их в качестве свойств объекта. Затем мы добавим все эти объекты в одну из двух массивов: к множество.

Мы будем использовать Tweenmax для анимирования значений из массив на значения к множество. Когда анимация завершена, мы установим к массив, чтобы стать новым из множество.

На первый пробег, из Массив будет содержать все значения точек и все цвета заполнения в текущих видимых многоугольниках.

 & lt; href = "# NAT" & GT; NAT;
& lt; href = "# BWL" & gt; bwl & lt; / a & gt;
& lt; href = "# Kevin" & gt; kevin & lt; / a & gt;

& lt; svg class = "SVG-держатель" & gt;
  многоугольники для #nat идут сюда
& lt; / svg & gt;

& lt; svg id = "NAT" CLASS = "HIDDEN" & GT;
 многоугольники для #nat идут сюда
& lt; / svg & gt;

& lt; svg id = "bwl" Class = "hidden" & gt;
 многоугольники для #bwl идут сюда
& lt; / svg & gt;
& lt; svg id = "Kevin" Class = "hidden" & gt;
 многоугольники для # kevin идут сюда
& lt; / svg & gt;

01. Конвертировать изображения в полигоны

two images before and after Primitive — Как изображение будет выглядеть раньше и после пробега через примитив

Первый шаг - на самом деле сделать изображения. Для этого я использовал инструмент под названием Примитивный (Проверьте Github repo. ). Изображения, используемые в руководстве, являются личными образами нескольких друзей.

Запустите выбранные выбранные изображения через примитивную утилиту, используя командную строку:

 Примитив -i-input.jpg-oeput.svg -n 250 -m 1

-n 250. Определяет 250 многоугольников, -М 1. Определяет форму треугольника и -i input.jpg -o вывода .svg являются входным и выходом. Важно, чтобы все СВГС одинакового количества многоугольников и являются той же формой. Вывод .svg будет коллекция многоугольников.

02. Вставьте свои SVG в HTML

После создания SVGS вставьте их в корпус HTML. Дублируйте первый SVG и дайте один из дубликатов класса .svg-держатель Отказ

То .svg-держатель будет единственным, который технически виден; Это будет владелец для всех многоугольников, которые анимированы и из него. Дайте всем SVG, кроме держателя класса скрытый и ан я бы с уникальным именем. Это должно соответствовать усердие в ссылках. Скрытые SVG будут скрыты с Дисплей: нет; Отказ Важно убедиться, что усердие каждой ссылки соответствует я бы его соответствующего СВГ.

Затем объявите переменные:

 Пусть topolygonarray = [];
пусть freypolygonarray = [];

03. Извлечь координаты полигонов

Теперь мы должны проходить через каждый из наших многоугольников и получить координаты в атрибуте очках. Мы можем сделать это, используя Regex:

 const getcoordinates = (многоугольник) = & gt; {
  Вернуть Polygon.GetAttribute («точки»). Соответствие (/ (-? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) \ ( -? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) \ (-? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) /);
};

04. Обновите массивы многоугольников

image saved as an SVG with text — Сохранено как SVG, все треугольники становятся элементами

Каждый раз, когда нажата ссылка, мы собираемся запустить функцию, которая принимает href щелчковатой ссылки в качестве аргумента, и найдите соответствующую SVG, получить значения точек, анимируйте его, а также обновляйте из массива.

 Const UpdatePOLYGONARRARY = (IDTTOANIMATETO) = & GT; {
  TOPOLYGONARRARY = CreatePolyGonpointSObject (Document.getelementBybyID (IDTOANIMATETE).

  анимационныеполигоны ();

  frompolygonarraray = тополигонаррраль;
}

Эта функция вызывает две другие функции - CreatePolyGonPointSObject. и анимационныеполигоны Отказ

CreatePolyGonPointSObject. преобразует все элементы многоугольника на объекты, которые мы можем оживить значения, а также анимационныеполигоны оживляет многоугольники внутри .svg-держатель Отказ

 createpolygonpointsobjects = (многоугольники) = & gt; {
  const polygonsarnay = [];

  Polygons.Foreach ((многоугольник, I) = & gt; {
    Const Cornionates = GetCoordinates (Polygon);

    polygonsarray.push ({{
      Заполните: Polygon.GetAttribute («заполнить»),
      Один: координаты ,
      Два: координаты ,
      Три: координаты ,
      Четыре: координаты ,
      Пять: координаты ,
      Шесть: координаты 
    });
  });

  вернуть многоугольников;
}

Это использует наш GetCoordinates. Функция Чтобы получить все координаты в атрибуте точек и создает объект с каждой координатой и заполнением. Это возвращает массив объектов. Я решил сделать их объектами, потому что этот тип данных, похоже, проще работать, когда вы анимируете много значений одновременно.

05. Анимируйте многоугольники

Two images made up of SVG polygons — В финальной версии полигоны SVG переходят через анимацию

Давайте использовать Tweenmax для анимирования многоугольников.

 const inimatepolygons = () = & gt; {
  const polygons = document.queryselector (". SVG-держатель"). QuerySelectorAll («Полигон»);
  frompolygonarray = createPolygonpointsObject (полигоны);

  frompolygonarraray.foreach ((obj, i) = & gt; {
    Tweenmax.to (OBJ, 1, {
      Один: тополигонаррр [I] .one,
      Два: тополигонаррар [I] .two,
      Три: тополигонаррраль [I]. Трее,
      Четыре: тополигонарр [я] .four,
      Пять: тополигонаррар [я] .five,
      Шесть: тополигонаррар [I] .six,
      Легкость: Power3.easeOut,
      Onupdate: () = & gt;
      {
        Polygons [I] .Setattribute («точки», `$ {obj.one}, $ {obj.two} $ {Obj.two}, $ {Obj.four} $ {obj.five}, $ {obj.six } `);
      }
    });
  });
}

На каждом кадре анимации этот цикл анимирует атрибут точек видимых многоугольных полигонов в .svg-держатель на новые значения, установленные выше. То onUpdate. метод внутри Tweenmax.to. называется каждый раз, когда обновления анимации, так что здесь она будет работать на каждом изменении значений obj.one. , obj.two. , obj.three. , и так далее. Таким образом, значения точек анимают и формы морфы имеют разные координаты.

Далее мы можем оживить заполнение. Для каждого многоугольника в .svg-держатель установите заполнить на заполнение в Тополигонарррар это в том же индексе.

 Polygons.Foreach ((многоугольник, I) = & gt; {
    const toColor = topolygonarraray [i] .fill;

    Tweenlite.to (многоугольник, 1, {
      Заполните: токор,
      Легкость: Power3.easeOut.
    });
});

Теперь полигоны будут ожидать их координаты и их цветы заполнения. И вы сделали! Хотите сохранить свои страницы? Экспортировать их как PDFS и бросьте их в облачное хранилище Отказ

Чтобы улучшить свои навыки веб-дизайна в дальнейшем, отправляйтесь на нашу конференцию, генерируйте и испытывают упакованный график отраслевых докладчиков, семинаров и ценных сетевых возможностей. Не пропустите это! Получить свой генерирующий билет сейчас Отказ

Прочитайте больше:

Полное руководство по SVG
Animate SVG с JavaScript
30 лучших инструментов веб-дизайна для ускорения вашего рабочего процесса

Создание и анимирование полигонов SVG

01. Конвертировать изображения в полигоны

02. Вставьте свои SVG в HTML

03. Извлечь координаты полигонов

04. Обновите массивы многоугольников

05. Анимируйте многоугольники

Инструкции - Самые популярные статьи

Управление состоянием rection Form с Formik

6 Быстрые советы по улучшению рисунка кисточек

Как нарисовать лошадь

Все, что вам нужно знать о разделении кода JavaScript

Создайте свою собственную игру WebGL Phyfics

Как добавить текстуру к вашим пасцам с праймерами

Начните с HTML Canvas

Моделирование комплексной геометрии: 5 верхних советов

Категории