Lottie, практики по работе и подготовке анимаций
Bodymovin
Это open-source библиотека для экспорта анимаций из After Effects в код (https://github.com/bodymovin/bodymovin).
Она делает парсинг всей анимации в АЕ и создает *.json файл со всеми необходимыми данными. После этого можно использовать этот файл на сайте или в приложении. Т.е. воспроизвести его с помощью плеера, который будет собирать анимацию из *.json файла.
Пользоваться им очень просто, достаточно скачать extension отсюда: https://github.com/bodymovin/bodymovin. И дать программисту эту же ссылку.
Единственный минус этой библиотеки в том, что она весит очень много (240 kb minified copy). А так она поддерживает очень много анимированных параметров и их связки между собой.
Lottie
Это еще одна замечательная open-source библиотека от ребят из Airbnb: https://airbnb.design/lottie.
Есть интерфейсы для работы с React-native, ios и android. Она использует *.json файл полученный с помощью bodymovin и воспроизводит его на мобильных устройствах.
Самая большая боль: Композиции и Lottie
Забудьте об использовании композиций в проекте, у Lottie нет для них поддержки. Точнее она есть, но очень странная и не описана в документации (надеюсь, что скоро это исправят).
Я сразу об этом пишу, потому что это стало для нас большим сюрпризом и пришлось переделывать большую часть проекта заново.
Композиции работают просто как группы, ниже примеры того, что не работает:
Т. е. все для чего вообще используются композиции.
Наши советы по работе с анимацией для Lottie:
1. Желательно все слои держать в одной композиции.
Это неудобно, особенно если проект состоит из сложной анимации, но приходится потерпеть ради результата.
Этого можно избежать таким образом: разделить проект по сценам, или логическим элементам и сделать их анимацию в отдельных композициях.
А потом собирать это все вместе в одну большую композицию.
Плюс такого подхода в том, что так проще и логичнее работать. Но большой минус в том, что перед рендером нужно обязательно копи-пастить все слои. Особенно это болезненно, когда проект вырастает.
Можно еще использовать нашу разработку: https://videohive.net/item/layer-manager-3/11506618
2. Забыть об эффектах и выкручиваться с помощью стандартной анимации шейпов.
В 2019 году в lottie добавили небольшую поддержку эффектов. Но это касается базовых эффектов, которые могут быть сделаны с помощью svg анимации. Поэтому лучше продумывать анимацию изначально так, чтобы обойтись с использованием только шейповой анимации. Это упростит вашу задачу и развяжет руки.
Список поддерживаемых эффектов можно найти здесь: https://github.com/airbnb/lottie-web/wiki/Effects
3. Лучше обойтись без экспрешенов
В 2019 году в lottie добавили поддержку экспрешенов. Но некоторые из них работают некорректно, другие могут вести себя по-разному при каждой загрузке страницы/экрана. Мы советуем обходиться без экспрешенов в своих проектах. Но, если вы всё-таки пользуетесь ими, то ниже можете найти 2 маленьких видео, которые показывают как можно “запечь” любой экспрешн и уменьшить размер финального файла.
И ещё немного информации от разработчика по поводу экспрешенов: https://github.com/airbnb/lottie-web/wiki/Expressions
4. Использовать как можно меньше Alpha matte и Alpha inverted matte.
Вместо них лучше использовать маски, потому как иногда эти эффекты дают непредвиденный результат и найти проблему становится очень сложно.
5. Использовать 48 fps.
Это достаточно нестандартное значение, но мы привыкли работать в 24 фпс (очень удобно для анимации). Поэтому 48 фпс работает для нас лучше всего. Если 60 фпс вам подходит, то работайте при таком количестве кадров. Потому что тогда вы получите максимально реалистичную картину анимации.
6. Использовать как можно меньше точек в масках и keyframes
Они очень сильно увеличивают вес финального файла.
На скриншоте выше все вместе дает +2 мегабайта к весу финального файла :/
7. Как тестировать анимации
Есть веб-сервис: https://lottiefiles.com. На нём можно просматривать *.json файлы с помощью web-плеера lottie. А в подвале сайта можно найти ссылки на ios и android приложения, чтобы посмотреть анимацию с помощью соответствующих плееров.
8. Изменение некоторых параметров с помощью кода
Некоторые параметры файлов lottie можно позже изменять и редактировать с помощью кода. Ниже небольшой пример, как это можно сделать для web версии.
Описание от разработчика для web: https://github.com/airbnb/lottie-web/wiki/SVG-and-HTML-ids-and-classes-to-reference-via-css-or-select-via-Javascript
Для ios: https://airbnb.io/lottie/#/ios?id=changing-animations-at-runtime
9. Градиенты и другие мелочи
При экспорте с помощью bodymovin иногда проскакивают странные баги. К примеру это касается правильного отображения градиентов. Чтобы избежать этого — сохраняйте проект каждый раз перед экспортом.
10. Не lottie единым
Ещё мы подготовили сравнение всех возможных методов экспорта анимации из АЕ и сравнили их (не учитывая создание анимации только с помощью кода): https://www.notion.so/untimestudio/8a327f1cf0404a06aa6a859f3710a144?v=b681ed0449104dc2bfd2da0b1e3fdb67
Дополнительные материалы по теме:
Документация lottie — https://airbnb.io/lottie
Поддерживаемые свойства АЕ — https://airbnb.io/lottie/#/supported-features
Оставляйте комментарии, чтобы улучшить этот материал. Делитесь своим опытом и своими техниками работы с Lottie. Спасибо за чтение.
Обновлено: ноябрь 2019
Статья подготовлена командой Untime Studio
