Возможно ли с SVG сгенерировать JSON для lottie-react?

Здравствуйте!

Такой вопрос - возможно ли из SVG сгенерировать JSON-файл для создания анимации на странице с помощью lottie-react?

То есть, есть такой SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1924" height="207" viewBox="0 0 1924 207" fill="none">
  <path d="M110 63.1578C92.8 59.5578 30.8333 94.9911 2 113.158V204.658H1922V43.1577C1780 -50.3423 1598 61.6578 1544 80.6577C1490 99.6576 1454 46.6577 1434 28.1577C1414 9.65771 1397.5 5.15781 1372 2.15781C1346.5 -0.842187 1265 39.6578 1219 61.6578C1173 83.6578 943.5 88.6578 905.5 90.6578C867.5 92.6578 591 46.6578 549.5 45.1578C516.3 43.9578 317 79.3245 221.5 97.1578C206.833 102.491 173.2 108.758 156 91.1578C134.5 69.1579 131.5 67.6578 110 63.1578Z" fill="url(#paint0_linear_16_247)" stroke="url(#paint1_linear_16_247)" stroke-width="3"/>
  <defs>
    <linearGradient id="paint0_linear_16_247" x1="962" y1="2" x2="962" y2="204.658" gradientUnits="userSpaceOnUse">
      <stop offset="0.380208" stop-color="#240B0E"/>
      <stop offset="1" stop-color="#240B0E" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="paint1_linear_16_247" x1="962" y1="2" x2="962" y2="204.658" gradientUnits="userSpaceOnUse">
      <stop stop-color="#991B27"/>
      <stop offset="1" stop-color="#991B27" stop-opacity="0"/>
    </linearGradient>
  </defs>
</svg>


6545dbcc6de15417081435.png

При загрузке страницы - красная линия должна слева на право плавно загружаться...вдруг кто знает - где (если можно) - такое сгенерировать?
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
DELUX
@DELUX Автор вопроса
В общем - кое-как собрал то, что нужно - нашел онлайн конструктор (загрузил туда свою svg и что-то да собрал)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
sfi0zy
@sfi0zy
Creative frontend developer
Во-первых из вопроса нужно убрать реакт. Lottie - это самостоятельный инструмент, который к реакту никакого отношения не имеет. Его прародитель, Bodymovin, был расширением для After Effects, позволяющим экспортировать анимации оттуда. Сейчас это все развилось в целую экосистему для дизайнеров, и там чего только нет. Плагин для AE - это теперь малая часть экосистемы. А фронтендерский пакет lottie-react - это просто обертка над местным плеером, не более того.

Вы можете по-старинке взять After Effects, импортировать SVG туда, там все анимировать, и потом оттуда экспортировать с помощью плагина Lottie, и загрузить к нам во фронтенд. Альтернативно вы можете взять их собственный редактор (на сайте Lottie есть все, что нужно знать про него). Что там, что там - будет нужно погрузиться в локальную специфику работы с этими программами, на какие кнопочки тыкать. По идее это зона ответственности моушн-дизайнера, а не программиста-фронтендера. Если у вас в проекте все завязано на Lottie - где-то поблизости должен быть и дизайнер, который работает или с AE, или с их собственным редактором. Если вы не умеете - он умеет. Тут не нужно изобретать новые инструменты. Все уже есть. Работайте по стандартной схеме.

Но если смотреть на вопрос в вакууме, со стороны фронтенда, то в текущей формулировке все звучит так, что вы хотите взять что-то, что уже находится в мире фронтенда, вынести в мир Lottie, а потом внести обратно. Это выглядит как усложнение ради усложнения. Иногда такой подход можно объяснить, но не всегда. Учитывая простоту вашей анимации - возможно имеет смысл рассмотреть что-то из стандартных фронтендерских инструментов? У нас есть по крайней мере три способа анимировать SVG нативными средствами. Возможно, что в конкретном случае проще будет не ввязываться в зависимость от Lottie.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы