Морфинг SVG: согласуйте контуры перед анимацией

Если граница должна оставаться прежней, пока поворачивается весь знак, вместо этого задайте общий центр поворота SVG.

Анимация морфинга SVG меняет геометрию фигуры между двумя состояниями. Для нативной интерполяции данных контура подготовьте совпадающие структуры команд и определите соответствие точек. Два привлекательных конечных рисунка все еще могут дать схлопнутую или перекрученную форму на полпути.

Правила анимации данных контура W3C требуют одинакового количества и типов команд в одинаковом порядке для плавной интерполяции. Это структурное требование. Оно не определяет, какой угол логотипа должен стать каким углом следующего состояния.

Начните с небольшой пары, которую легко проверить. Оригинальные примеры ниже используют квадрат, ромб и квадрат с намеренно обратным порядком, чтобы разделить эти два решения.

Создайте два контура с соответствующими углами

Написанные вручную квадрат и ромб используют M L L L Z: переход к первому углу, три линии и замыкание фигуры. Каждой паре координат соответствует позиция в другом контуре.

<svg id="matched" viewBox="0 0 160 160"
  xmlns="http://www.w3.org/2000/svg"
  role="img" aria-label="Square morphing into a diamond">
  <path fill="#147d78" d="M30 30L130 30L130 130L30 130Z">
    <animate attributeName="d" dur="2s" begin="0s"
      fill="freeze" calcMode="linear"
      values="M30 30L130 30L130 130L30 130Z;M80 20L140 80L80 140L20 80Z" />
  </path>
</svg>

Элемент SVG animate меняет атрибут со временем. Здесь он меняет d за две секунды. fill="freeze" анимации сохраняет конечное состояние; зеленая заливка fill контура — отдельная настройка оформления.

При проверке держите пример на отдельной HTML-странице. Он запускается автоматически без скрипта проверки ниже. Для рабочих элементов управления определите момент запуска и предоставьте статичное состояние, подходящее интерфейсу.

Соответствие углов задано явно:

Обе границы обходят периметр в одном направлении. Первый угол движется к верху ромба, второй — вправо и так далее. Это авторское решение дизайна, а не трактовка смысла фигур.

Остановите настоящую интерполяцию

Проверьте начало, середину и конец перед изменением функции плавности (easing) или добавлением декоративных эффектов. Для SVG выше эта вспомогательная функция останавливает временную шкалу и переходит к времени в секундах:

const svg = document.querySelector('#matched');
 
function showMorphAt(seconds) {
  svg.pauseAnimations();
  svg.setCurrentTime(seconds);
}
 
showMorphAt(1); // Midpoint of the two-second animation

MDN описывает pauseAnimations() и setCurrentTime() для управления временной шкалой SVG. Подключите функцию к кнопкам со значениями 0, 1 и 2. Это три положения одной интерполяции, а не три подменяющих рисунка.

На одной секунде линейная интерполяция помещает каждую координату посередине между конечными значениями. Первый угол поэтому находится в 55, 25. Полная середина этого оригинального примера:

M55 25L135 55L105 135L25 105Z

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

Равное число команд все еще может дать плохой морфинг

Сохраните исходный квадрат, но разверните порядок углов целевого квадрата:

Start:  M30 30L130 30L130 130L30 130Z
Target: M30 30L30 130L130 130L130 30Z

Оба конечных состояния выглядят одним и тем же квадратом. Обе строки все еще используют M L L L Z. Но второй и четвертый углы теперь пересекают фигуру, чтобы поменяться местами. В середине их координаты совпадают:

M30 30L80 80L130 130L80 80Z

Все четыре точки лежат на диагонали. В браузерном тесте залитый квадрат схлопнулся в эту диагональ на полпути и вернулся к квадрату в конце. Совпадение структуры команд сделало интерполяцию возможной; неправильное соответствие точек сделало результат нежелательным.

Если экспортированная пара перекручивается, проверьте первую точку и направление обхода каждого контура. Затем проверьте соответствующие позиции углов и особенностей кривых. Безразборное добавление узлов усложняет эту проверку. Руководство по очистке узлов помогает упростить статичную графику, но сохраняйте установленное соответствие обоих состояний.

Учитывайте отверстия и отдельные части

Логотип может иметь внешнюю границу, отверстие и отдельный акцент. Рассматривайте их как части, которым нужны осознанные партнеры в следующем состоянии. Перед анимацией перечислите, какая часть во что превращается. Если одно состояние имеет отверстие, а другое нет, решите, как оно исчезнет, вместо предположения, что одинаковое число узлов решит вопрос.

Справочник fill-rule объясняет определение внутренних областей контура SVG. Сохраняйте нужное поведение заливки при подготовке и проверке составного контура. Если отверстие уже неправильно выглядит в статичном состоянии, используйте руководство по заполненным отверстиям перед добавлением перехода.

Практичный порядок проверки:

1. Подтвердите силуэт, отверстия и отдельные детали каждого конечного состояния.
2. Определите соответствующие подконтуры или отдельные элементы.
3. Согласуйте начальные точки, направление и важные особенности.
4. Проверьте промежуточные состояния на пересекающиеся границы и исчезающие детали.
5. Настраивайте время только после принятия геометрии.

Отдельными элементами может быть легче управлять, когда маленький акцент должен независимо исчезать или перемещаться. Этот выбор — часть дизайна анимации; его не нужно принудительно помещать в один составной контур.

Проверьте правила своего механизма анимации

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

Документация MorphSVG GSAP описывает преобразование данных контура в кубические кривые и добавление точек при необходимости. Она также предоставляет управление соответствием, например shapeIndex. Используйте настройки для проверки соответствия вместо предположения, что две независимо экспортированные фигуры уже согласованы.

KUTE.js описывает другую модель подготовки в руководстве SVG Morph, включая отдельный процесс подконтуров. Проверьте реально используемые версию и компонент, прежде чем применять нативные ограничения контуров или совет другой библиотеки.

Выберите небольшую характерную пару для этого механизма и проверьте промежуточную геометрию. Успешный тест квадрата в ромб не подтверждает поведение детализированного составного логотипа. Сохраните копию исходной графики, чтобы отличать изменения подготовки анимации от оригинального дизайна.

Подготовьте растр перед согласованием состояний

Если векторный оригинал отсутствует и осталась только графика PNG или JPG, процесс преобразования изображения в вектор PerfectVector может помочь подготовить редактируемый вариант SVG. Сравните силуэт, отверстия и отдельные области с исходником, затем проверьте скачанные контуры. Руководство по редактированию SVG описывает следующий этап очистки.

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

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

Частые вопросы

Нужно ли контурам SVG одинаковое число точек для морфинга? Для нативной интерполяции данных контура важна совпадающая структура команд, включая типы и порядок. Библиотека может нормализовать разные структуры, поэтому проверяйте ее документацию вместо опоры только на число точек.

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

Можно ли автоматически выполнить морфинг двух отдельных SVG-файлов? Аниматору нужны совместимая или нормализованная геометрия и полезное соответствие состояний. Два расширения файла сами по себе его не обеспечивают; проверяйте контуры, отверстия и отдельные части.

Создает ли конвертация двух PNG в SVG согласованную пару для морфинга? Нет. Конвертация подготавливает статичные векторные варианты. Все еще нужно согласовать части и точки, выбрать механизм анимации и проверить переход.

Источники

1. W3C — SVG paths — Определяет структуру нативной интерполяции данных контура и соответствие параметров.
2. MDN — animate — Описывает изменение атрибутов во времени.
3. MDN — pauseAnimations — Поддерживает остановку временной шкалы проверки.
4. MDN — setCurrentTime — Описывает переход по временной шкале SVG в секундах.
5. MDN — fill-rule — Объясняет поведение внутренних областей составной графики.
6. GSAP — MorphSVG — Описывает нормализацию и управление соответствием точек.
7. KUTE.js — SVG Morph — Описывает подготовку конкретного компонента и процесс подконтуров.

Согласуйте части и проверьте середину перед тонкой настройкой времени анимации. Если исходная графика растровая, подготовьте вариант SVG, проверьте статичную геометрию, затем создайте соответствующие состояния анимации.