Попробовал давеча еще одну библиотеку для анимации SVG под названием BODYMOVIN. Данная библиотека идет вместе с экстеншеном для AE и предназначена для того, чтобы конвертить сделанную в АЕ анимацию в SVG. Решил я ее попробовать так как выполнял задание в рамках DailyUI, и хотелось сделать анимацию бокалов. Как сделать нужную траекторию и задержки с изингами через GSAP мне было понятно, но я видел, что сильно устану, а формат мероприятия итак предполагает один день на выполнение задания. Стал искать подходящие инструменты и нашел BODYMOVIN.

Принцип действия примерно такой:

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

2) Далее запускаете АЕ, если добавили экстеншен через адоб, то синхронизируете creativeCloud и логинетесь в АЕ под своей учеткой. После это в window > extensions должен появиться пункт bodymovin. Запускаем - любуемся окошком.

3) Делаете вашу анимацию предварительно выбрав размер окна. Я анимировал только шейпы, но уже сейчас есть поддержка:

  • Любые шейпы
  • *Заливки
  • *Stroke
  • *trim paths (ну вы поняли, не знаю как это по руске)
  • *Пунктирные линии
  • Любые изображение, кроме последовательностей и видео
  • Солиды, нулевые объекты
  • Precomps
  • Любые транзишины и трансформации
  • Time remapping
  • normal masks (и inverted masks только для SVG)

В бедущем обещают поддержку спрайтов и stroke анимацию.

Вот, что у меня получилось в АЕ

4) после того, как вы сделали вашу анимацию, настриваете параметры рендера и экспортируете, это довольно просто. Я экспортировал как демку в одной html для просмотра и отдельно сохраняется json файл с вашей анимацией.

У меня консоль ругалась на json поэтому код пришлось засунуть прямо в тело основного js, что не очень, так как получается он весьма и весьма массивным. Но надо сказать, что все работает, правда если анимация большая на мобилках будет работать с провисаниями и тормозами. Как заставить работать можно посмотреть в исходниках ниже. док у bodymovin лаконичный и понятный. Просто пишите функцию которая обращается к библиотеке с перечислением нужных параметров для воспроизведения анимации.

Что имеем в итоге:

С большим json кодом работать неудобно, ты не понимаешь, как его контролировать - это с непривычки. Но код с анимацией можно подгрузить отдельно. Просто привыкаешь, что у тебя есть конкретные SVG с конкретными параметрами, а тут по сути одна строчка. Но и эту анимацию можно контролировать - кликните на Джейка.

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

Советую посмотреть работы KITTONS очень круто. Моушен магия, переведенная в свг, есть чем вдохновиться. На кодпене только его пока и стоит смотреть если нужен bodymovin) И обзор, почему юзает именно bodymovin, впечатления подробно от автора ХОРОШИЙ ОБЗОР ТУТ

пока остаюсь на gsap, но bodymovin взял на заметку, чтобы дальше разбираться с ним. Спасибо.


4,265 0 6