Об авторе Wuyue Ant Financial Data Experience Техническая команда
В браузере любая двухмерная плоская графика может быть описана в виде путей. Затем базовый API отрисовывается напрямую статически. Но если вы хотите динамически рисовать путь, у браузера нет прямой поддержки. Эта статья призвана решить эту проблему, дополнить эту функцию для браузера, чтобы статические пути можно было легко рисовать динамически.
окончательный эффект
Посмотрим на конечный результат~
Описание чипа:
Сканирование лица:
Ручное написание:
Эффект довольно крутой, и весь процесс разработки реализации начинается с спроса.
нужно
Обсудите n мультипозов с одноклассниками по дизайну:
- исчезать и исчезать
- эффект частиц, комбинация фрагментации
- Есть маленькие и большие, причудливые вращения, деформации
- ...
Но студенты-дизайнеры настаивают на собственной позе, то есть на восстановлении реальной сцены, то есть на сканировании!
Так что я могу только:
Ну, хватит ерунды, вернемся к теме~
Следующие два решения пришли на ум для динамического рендеринга браузера:
Вариант первый
Хотя браузер не предоставляет метод динамического рисования, svg предоставляет более важный атрибут штриха, который по-китайски называется штрихом. Первой мыслью было использовать stroke-dasharray для установки пунктирной обводки, а затем использовать анимацию для изменения stroke-dashoffset для отрисовки динамической копии. Таким образом можно добиться эффекта динамического рисования. Но есть следующие недостатки.
- Каждый путь должен контролироваться написанием CSS-анимации.
- Процесс рисования единый, вы можете использовать только несколько алгоритмов анимации, предоставляемых браузером, и вы не можете сами контролировать процесс рисования
- Если в будущем будет такой спрос, фронтэнду потребуется много развития
На основании вышеперечисленных моментов от этого решения отказались.
Вариант 2
Можем ли мы сами контролировать процесс рисования svg и реализовать его динамическое рисование? Как будто... это возможно! !
Анализ SVG
Первое, что нужно сделать, это проанализировать файл svg. Неправильную графику можно вырезать с помощью инструмента пера ps, а затем экспортировать в AI, чтобы получить информацию о пути графики. Или напрямую попросите студентов-дизайнеров предоставить изображения в формате svg. Наконец, мы можем получить информацию о пути графа, например, следующим образом:
Вышеприведенное изображение представляет собой перехваченное лицо в формате svg. Анализируя формат внутри, мы видим, что есть несколько ключевых сведений:
- Информация о макете, которую можно рассматривать как исходный размер в viewBox.
- Часть стиля — это стиль, позволяющий контролировать толщину, цвет и т. д. линии.
- Третья часть красного прямоугольника — это информация о пути, которая здесь имеет фиксированный формат. Подробнее см. здесь https://developer.mozilla.org/en-US/docs/Web/SVG.
Наконец, мы можем преобразовать приведенную выше информацию в следующую форму инструкций, чтобы облегчить последующий анализ кода.
разбор команды
Проблема ясна, то есть разделить инструкцию пути. Каждая команда анализируется, затем подсчитываются баллы по каждой команде и рисуются линии в соответствии с соответствующим стилем. Конкретный процесс выглядит следующим образом:
Ключевой код части инструкции синтаксического анализа выглядит следующим образом:
Идея состоит в том, чтобы перечислить все разделители, а затем реализовать синтаксический анализ для каждого разделителя. Исчерпывающие разделители следующие:
командный рисунок
Затем идет исполняемая часть кода для каждой инструкции:
В конце концов, для каждой инструкции сводится к тому, рисовать ли прямую линию или рисовать кривую.По соответствующему уравнению кривой вычисляются соответствующие точки, а затем точки динамически соединяются, и непрерывно рисуются отрезки линий. , и, наконец, большое количество крошечных сегментов линий объединяются в сложную графику. Основной код выглядит следующим образом:
Нарисуйте точки и соедините линии, чтобы сделать анимационную часть:
Тогда мы добились эффекта в начале этой статьи~
Суммировать
Для сложной графики мы сначала получаем информацию о ее пути различными способами. Затем информация о пути разбивается на крошечные инструкции, и для каждой инструкции реализуется анимация. Это реализовано в виде рисования точек и соединительных линий, наконец, все точки связаны с городом, а большое количество линий комбинируется для динамического рисования сложной графики.
И мы можем открыть скорость рисования и другие конфигурации для студентов-дизайнеров.Если есть такой спрос, студентам-дизайнам нужно только предоставить изображение svg с путем. Затем вы можете настроить конфигурацию самостоятельно, освободив объем разработки для фронтенд-студентов.
Заинтересованные студенты могут подписаться на эту колонку или отправить свое резюме по адресу 'wuyue.lwy####alibaba-inc.com'.replace('####', '@'). Приглашаются люди с высокими идеалами~
Оригинальная ссылка:GitHub.com/proto team/no…