SVG Morph Javascript Logic

Question

РЕДАКТИРОВАТЬ: Вопрос был отредактирован, чтобы сузить область, но я чувствовал, что было полезно сохранить оригинальную информацию. Загляните в раздел с выводами на предмет правок.

Оригинальный вопрос

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

Зачем?

Я хотел бы превратить один SVG в другой, но мне нужно кросс-браузерное решение. Я нашел такие решения, как GreenSock, но я не могу позволить себе их лицензии.

Какие?

В духе развивающегося разработчика я решил немного расширить свой кругозор и выяснить, как создать персональное кросс-браузерное SVG-решение с возможностью повторного использования. Хотя, прежде чем начать, я хотел бы понять примерно то, к чему я стремлюсь.

Подробности (мой главный вопрос)

Я надеюсь, что смогу понять логику морфинга SVG. IE. Как могут быть сопоставлены и объединены вершины, как можно беспрепятственно преобразовать вершины из острого угла в кривую Безье, какова математика этих преобразований, как может быть возможно преобразование SVG с различным количеством вершин (если вы есть какие-нибудь идеи), как бы вы помешали вершинам совпасть с несколькими корреспондентами в целевой форме и т. д.?

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

Например, ради, чтобы все было согласованно в ответах, что если я хочу превратить круг в квадрат? (Очевидно, есть более простые способы сделать это, но использование этого просто упрощает визуализацию)

Отказ от ответственности

(1) Я очень хорошо разбираюсь в Javascript, его синтаксисе и тонкостях. Я просто никогда не имел дело с векторами в Javascript, я не уверен, как вершины нацелены и управляются.

(2) Я НЕ прошу полного, углубленного учебника о том, как этого добиться, я знаю, что это не то, для чего любой из нас здесь. Скорее, я был бы признателен за основу, толчок в правильном направлении и некоторое понимание нюансов этого процесса.

TL; DR

Какую информацию вы могли бы представить в логике, науке или математике за переходом от одного SVG к другому (простому или сложному).

Заключение

Спасибо всем за любые идеи, которые вы можете предоставить! Это ни в коем случае не обязательно, поэтому, пожалуйста, не стесняйтесь отвечать.

РЕДАКТИРОВАТЬ:

Этот вопрос был отложен из-за слишком широкой. После пересмотра того, что я написал, я полностью понимаю. Таким образом, вот, в частности, что я хотел бы помочь с.

Допустим, у меня есть вектор А от иллюстратора:

<svg id="Layer_1" x="0px" y="0px" width="72px" height="72px" viewBox="0 0 72 72" . . . >
    <polygon style="fill:#FFFFFF;" points="72,72 36,72 0,72 0,36 0,0 36,0 72,0 72,36 "/>
</svg>

И вектор Б:

<svg id="Layer_1" x="0px" y="0px" width="72px" height="72px" viewBox="0 0 72 72" . . .>
    <path style="fill:#FFFFFF;" d="M72,36c0,9.941-4.029,18.941-10.544,25.456S45.941,72,36,72c-9.938,0-18.937-4.027-25.451-10.539
    C4.031,54.945,0,45.943,0,36c0-9.941,4.029-18.941,10.544-25.456C17.059,4.029,26.059,0,36,0c9.94,0,18.939,4.029,25.455,10.543
    C67.971,17.058,72,26.059,72,36z"/>
</svg>

Вектор A представляет собой идеальный квадрат с 8 равномерно разнесенными вершинами, вектор B представляет собой идеальный круг с 8 равномерно разнесенными вершинами.

Если бы я хотел превратить Вектор A в Вектор B, как я мог бы сделать это в Javascript? Я понимаю, что мне нужно было бы использовать цикл и активно перемещать точки в назначенные места назначения, но, во-первых, каков будет лучший метод нацеливания и перемещения отдельных вершин? Во-вторых, каков наилучший метод определения, в какую позицию должна двигаться вершина и как ее можно активно отслеживать. Для чего-то подобного, где вершины располагаются идеально, с несколькими точками, равноудаленными от единственной цели, как бы я логически пошел к сопоставлению правильных вершин для наиболее эстетичного результата? В-третьих, в этом примере я преобразовываю элемент многоугольника в элемент пути, это важно? и если да, то как мне обойти это препятствие?

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

Большое спасибо! Весь вклад приветствуется.

Answer 1

Я создал простую библиотеку для объединения двух изображений в javascript, однако она не работает с SVG... но, возможно, я все еще могу помочь с несколькими предложениями:

если у вас есть совпадающие точки, это должно быть легко: - позволяет вызывать точки на рисунке 1 O1 .. Ox (O в качестве источника;) - позволяет вызывать точки на рисунке 2 D1 ...Dx (D в качестве пункта назначения) - позволяет вызывать время, когда мы начинаем трансформировать T1 - и давайте назовем время, когда мы остановим T2 (так что T2-T1 - это длина анимации)

на основе T2 и T1 вы можете рассчитать количество кадров, которые вам нужно показать. Затем вы можете рассчитать позиции для каждого кадра. в основном кадр в T1 должен быть изображением 1... кадр в T2 должен быть изображением 2 ... давайте назовем количество кадров NF.

в промежутках между кадрами вам нужно вычислить новую позицию ваших точек, давайте назовем их F1_1 ... F1_x (кадр один указывает от 1 до x). Позволяет вызвать конкретный кадр Fx (поэтому точка в конкретном кадре Fx_x)

Затем мы можем рассчитать положение точек для каждого кадра:

F1_x = Fx * (расстояние от Tx до Px)/NF

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

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

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

Вы можете взглянуть на мой блог (со ссылкой на проект github) о библиотеке морфинга изображений, которую я написал: http://peter.pisljar.si/

однако.... чтобы найти подходящую точку, это может быть немного больше работы.