EDIT: Вопрос был отредактирован для ограниченного объема, но я счел полезным сохранить исходную информацию. Посмотрите за заключение раздел для редактирования.SVG Morph Javascript Logic
Оригинал Вопрос
Добрый день всем! Я хотел бы изучить логику SVG morphing. Как быстрый предшественник, я знаю, что уже есть вопросы, подобные этому в Stack Overflow, но насколько я знаю, это не дубликат. Если вы прочитаете немного дальше, вы поймете, что я имею в виду.
Почему?
Я хотел бы преобразовать один SVG в другой, но мне нужно кросс-браузерное решение. Я нашел решения, такие как GreenSock, но я не могу позволить себе их лицензии.
Что?
В духе развивающегося разработчика я решил немного расширить свои горизонты и узнать, как сделать персональное многократно используемое кросс-браузерное решение SVG morph. Хотя, прежде чем начать, я хотел бы приблизительно понять, к чему я стремлюсь.
Подробности (Мой главный вопрос)
Я надеюсь, что я мог бы получить некоторое представление о логике позади SVG морфинга. И.Е. Как можно совместить вершины между собой и подстроить, как можно легко преобразовать вершины из резкого угла в кривую безье, какова математика за этими преобразованиями, как можно преобразовать SVG с разным количеством вершин (если у вас есть любые идеи), как бы вы не смогли совместить вершины с несколькими корреспондентами в целевой форме и т. д.?
Меня больше интересуют логика, информатика, математика. Если вы хотите указать мне в правильном направлении с точки зрения того, какие встроенные функции Javascript мне нужно использовать, тогда я был бы очень признателен, но это не обязательно. Когда у меня есть идея логического направления, которое мне нужно взять, я могу легко найти эту документацию.
Например, саке, что делает вещи согласованными в ответах, что, если бы я хотел превратить круг в квадрат? (Есть, очевидно, более простые способы сделать это, но, используя это как раз делает его проще визуализировать)
Disclaimers
(1) Я очень хорошо разбирается в JavaScript, его синтаксис, и запутанности. Я просто никогда не рассматривал векторы в Javascript, я не уверен, что вершины нацелены и управляются.
(2) Я NOT с просьбой дать полный, углубленный учебник о том, как этого добиться, я знаю, что для нас не для кого предназначен. Скорее, я был бы признателен за позвоночник, толчок в правильном направлении и некоторое понимание нюансов этого процесса.
TL; DR
Какую информацию вы могли бы представить в логике, науке или математике за морфинга от одного к другому SVG (простым или сложным).
Заключения
Спасибо всем за любую проницательность, вы можете предоставить! Это отнюдь не обязательно необходимо, поэтому, пожалуйста, не стесняйтесь отвечать.
EDIT:
Этот вопрос был поставлен на удержание слишком широки. После пересмотра того, что я написал, я полностью понимаю. Таким образом, вот, точнее, то, с чем мне хотелось бы помочь.
Допустит, у меня есть вектор А, от иллюстратора:
<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>
и вектор B:
<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>
Вектор А представляет собой идеальный квадрат с 8 равномерно расположенными вершинами, вектор B является идеальным кругом с 8 равномерно разнесенными вершинами.
Если бы я хотел преобразовать вектор A в вектор B, как я могу его обойти в Javascript? Я понимаю, что мне нужно будет использовать цикл и активно перемещать точки в назначенные им пункты назначения, но , в первую очередь,, что было бы лучшим методом таргетинга и перемещения отдельных вершин? Во-вторых,, каков наилучший метод определения того, на какую позицию должна двигаться вершина, и как можно было бы активно отслеживать ее. Для чего-то вроде этого, когда вершины отлично расположены друг от друга, с несколькими точками, эквидистантными от особой цели, как логически я буду согласовывать правильные вершины для самого эстетического результата? Третий, в этом примере я преобразовываю элемент многоугольника в элемент пути, это важно? и если да, то как я могу обойти это препятствие.
Опять же, меня больше интересует логика, но конкретный код всегда ценится. И просто повторю, я не ищу решение для SVG-морфинга, это много, я надеюсь понять процесс, чтобы я мог его воссоздать, чтобы расширить свои знания в области развития.
Большое спасибо! Весь ввод оценивается.
Отбрасывание нерелевантного текста наверняка улучшило бы шансы Q. –
Решение с Javascript здесь http://stackoverflow.com/a/36202790/803358 – thednp