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

Question

[Александр Осадчий]

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

Такой вопрос - возможно ли из 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>

При загрузке страницы - красная линия должна слева на право плавно загружаться...вдруг кто знает - где (если можно) - такое сгенерировать?

Comments

[Kentavr16]

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

[Kentavr16]

fter-effects плагин. Ставишь и погнал.

Answer 1

[Александр Осадчий]

В общем - кое-как собрал то, что нужно - нашел онлайн конструктор (загрузил туда свою svg и что-то да собрал)

Answer 2

[Ivan Bogachev]

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

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

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