SVG морф с аниме js без изменения пути - PullRequest
Новая
       91

SVG морф с аниме js без изменения пути

0 голосов
/ 06 января 2020

Я пытаюсь сделать некоторые SVG-анимации, используя аниме js, я думал, что это будет работать нормально, потому что, потому что мне просто нужно изменить атрибут d.

Я использовал несколько BLOB-объектов , но кажется, что код не распознает их пути. Это ручка, которую я создал, чтобы загрузить svg's https://codepen.io/obarrier/pen/eYmyEEa

Это ручка анимаций https://codepen.io/obarrier/pen/NWPXvRy

I знаю, что я делаю что-то не так, но не могу понять, где ошибка ... Потому что путь не распознается

Заранее спасибо!

1 Ответ

0 голосов
/ 26 марта 2020

Я вижу несколько вопросов. Во-первых, у вас есть пробел после .blobPath во втором коде. 

targets: '.blobPath ',

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

Showing path outside of view box

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

Screenshot showing how to set up animation in layers

Затем вы просто экспортируете SVG, открываете его в своем любимом текстовом редакторе и копируете значения "d" в вашем коде. 

d="M265.42,72.182l0,-72.182l-265.42,0l0,82.817c0,0 12.811,13.647 32.105,14.751c19.294,1.104 57.317,-11.093 57.317,-11.093l43.249,-13.139c0,0 20.977,-7.784 40.873,-7.784c19.897,0 38.711,7.784 38.711,7.784c0,0 27.756,11.399 41.335,7.557c13.579,-3.842 11.83,-8.711 11.83,-8.711Z"

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

https://codepen.io/cjboco/pen/zYGMmKm

...